How to transpile a node_module with webpack in a web worker?

Question

I am trying to include a node module (primitive-ellipsoid) in my wepback project. The module is not transpiled to es5 so throws an error when used in the browser:

Uncaught Error: Module parse failed: /Users/kevzettler/code/crashgiants/node_modules/primitive-ellipsoid/index.js Unexpected token (8:4)
You may need an appropriate loader to handle this file type.
|   // Default to an oblate spheroid
|   const { latSegments = 32, lngSegments = 64, rx = 2, ry = 1, rz = 1 } = {
|     ...options
|   };
|

This project is an older create-react-app webpack that is ejected.

    "webpack": "3.5.1",
    "webpack-dev-server": "2.8.2",
    "webpack-manifest-plugin": "1.2.1",

It is using babel and babel-loader and worker-loader I have a webpack.config.dev.js with rules like:

    rules: [
      {
        // "oneOf" will traverse all following loaders until one will
        // match the requirements. When no loader matches it will fall
        // back to the "file" loader at the end of the loader list.
        oneOf: [
          // Process JS with Babel.
          {
            test: /\.(js|jsx)$/,
            include: [
              paths.appSrc,
            ],
            exclude: /\.worker.js$/,
            loader: require.resolve('babel-loader'),
            options: {
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              //cacheDirectory: true,
            },
          },

          {
            test: /\.worker.js$/,
            exclude: /node_modules/,
            use: [
              'worker-loader',
              require.resolve('babel-loader'),
            ]
          }
        ]

I have babel configured in package.json with:

  "babel": {
    "plugins": [
      "babel-plugin-transform-decorators-legacy"
    ],
    "presets": [
      [
        "env",
        {
          "targets": "defaults"
        }
      ],
      "flow",
      "react-app"
    ]
  },

I have tried messing around with includes and excludes in the webpack.config.json to no success. I am confused if I need to focus on the worker-loader rule because it also uses the babel-loader or if the top level babel-loader gets applied as well.

UPDATE I only want to transpile the specific node_module/primitive-ellipsoid if I transpile the entire node_modules there is a bunch of other issues. I have tried

          {
            test: /\.(js|jsx)$/,
            include: [
              'node_modules/primitive-ellipsoid',
              paths.appSrc,
            ],
            exclude: /\.worker.js$/,
            loader: require.resolve('babel-loader'),
            options: {
              // This is a feature of `babel-loader` for webpack (not Babel itself).
              // It enables caching results in ./node_modules/.cache/babel-loader/
              // directory for faster rebuilds.
              //cacheDirectory: true,
            },
          },

But this has the same error.

The `worker-loader` only apply to `.worker.js` file. You can try remove the `include` field from first rule. — hackape, Aug 29 '20 at 18:29
With current setting no rule matches anything in `node_modules` thus the problem. — hackape, Aug 29 '20 at 18:30
Yes, you'll need an exclude that filter `node_modules` but the one used by your worker like this: `exclude: /(clientlib_base)|(node_modules\/(?!(primitive-ellipsoid)/` — romuleald, Sep 04 '20 at 12:36

score 0 · Answer 1 · answered Aug 29 '20 at 19:19

0

Your first rule isn't finding primitive-ellipsoid. As mentioned in the comments above, try removing the include from your first build rule:

{
    test: /\.(js|jsx)$/,
    exclude: /\.worker.js$/,
    loader: require.resolve('babel-loader'),
    options: {
        // This is a feature of `babel-loader` for webpack (not Babel itself).
        // It enables caching results in ./node_modules/.cache/babel-loader/
        // directory for faster rebuilds.
        //cacheDirectory: true,
    },
},

If that doesn't work, try adding another rule that will catch anything else as a fallback and see if it finds your library.

answered Aug 29 '20 at 19:19

Salvatore

10,815
4
31
69

This solution then attempts to transpile everything in node_modules which throws other errors. How can I target the specific module??? – kevzettler Aug 31 '20 at 01:47
Use a regex that only matches that folder, or the JavaScript inside – Salvatore Aug 31 '20 at 05:02
have added an update to the question demonstrating a regex on the include that targets the module and still fails to transpile it. – kevzettler Aug 31 '20 at 18:49

How to transpile a node_module with webpack in a web worker?

1 Answers1