3

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'
              }
            }
          ]
        },
sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80
  • 2
    That's not necessary. You can use ES6 to import CJS modules with Node.js. – Thomas Sablik Oct 06 '21 at 21:00
  • I tried that, but it gives the error I listed in the description. – sgarcia.dev Oct 06 '21 at 21:14
  • 2
    Does this solve your problem? https://github.com/webpack/webpack/issues/4039 Looks like a problem with babel. – Thomas Sablik Oct 06 '21 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 Oct 06 '21 at 21:36
  • 2
    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 Oct 06 '21 at 21:42

1 Answers1

2

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.

sgarcia.dev
  • 5,671
  • 14
  • 46
  • 80