How can I use Node.js CommonJS modules in ES6 import/export modules using babel or webpack?

Question

I'm sorry if this is a duplicate (I looked hard using the search tool but nothing came close). Anyone has any ideas how to transpile Node.js CommonJS modules so they can be used within an ES6 import/export project?

I know there's @babel/plugin-transform-modules-commonjs which transpiles ES6 modules into CommonJS form, but I think I'm in need of the opposite. The reason I need this is I have a config file written using Node's module.exports syntax that needs to be imported within a React project built with babel using ES6 modules, but I get a Uncaught TypeError: Cannot assign to read only property 'exports' of object error. Any ideas would be greatly appreciated.

Here's my babelrc.js file:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
  plugins: [
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-transform-runtime', { regenerator: true }],
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-optional-chaining'
  ],
  env: {
    production: {
      plugins: [
        [
          "transform-react-remove-prop-types",
          { removeImport: true }
        ],
      ]
    }
  }
}

And my webpack config babel loader rule:

{
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                cacheCompression: false,
                envName: isModeProduction ? 'production' : 'development'
              }
            }
          ]
        },

That's not necessary. You can use ES6 to import CJS modules with Node.js. — Thomas Sablik
– Thomas Sablik, Commented Oct 6, 2021 at 21:00
I tried that, but it gives the error I listed in the description. — sgarcia.dev
– sgarcia.dev, Commented Oct 6, 2021 at 21:14
Does this solve your problem? github.com/webpack/webpack/issues/4039 Looks like a problem with babel. — Thomas Sablik
– Thomas Sablik, Commented Oct 6, 2021 at 21:22
Yes and no 🙃 I had no idea it was a webpack issue, so thank you very much for the clarification. I tried replacing module-exports -> exports but that didn't solve the issue (it broke other things). However, you pointed me in the right direction and after some digging around, I found out setting babel's sourceType: ambigous resolved the bug. Feel free to copy-past this link as an answer and I'll gladly mark it as the accepted answer since you helped me find a solution either way. — sgarcia.dev
– sgarcia.dev, Commented Oct 6, 2021 at 21:36
No, link-only answers should be avoided and I don't have the time to write an explanation now. You can answer your own question or wait for someone else. — Thomas Sablik
– Thomas Sablik, Commented Oct 6, 2021 at 21:42

sgarcia.dev · Accepted Answer · 2021-10-07 15:46:11Z

3

Thanks to @Thomas Sablik's comment, I found out this was a known webpack issue.

And after poking round and looking up this error, I found this answer on another Stack Overflow which helped me fix it by adding "sourceType": "unambiguous" to my babel configuration. https://stackoverflow.com/a/56283408/2942765

Thank you Thomas.

answered Oct 7, 2021 at 15:46

sgarcia.dev

6,22014 gold badges52 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I use Node.js CommonJS modules in ES6 import/export modules using babel or webpack?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related