TypeError: "exports" is read-only

[ai]

After I added your awesome plugin to my project I have the error in browser, when I try to open my webapp:

Uncaught TypeError: "exports" is read-only
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
    n http://localhost:5000/app.modern.05404073.js:2
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
    n http://localhost:5000/app.modern.05404073.js:2
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
    n http://localhost:5000/app.modern.05404073.js:2
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
    n http://localhost:5000/app.modern.05404073.js:2
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
    <anonymous> http://localhost:5000/app.modern.05404073.js:2
app.modern.05404073.js:2:3531

Versions:

• webpack: 4.44.2
• webpack-babel-multi-target-plugin: 2.5.0

Webpack config:

let { BabelMultiTargetPlugin } = require('webpack-babel-multi-target-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let browserslist = require('browserslist')
let { join, resolve } = require('path')
let TerserPlugin = require('terser-webpack-plugin')

const IS_PRODUCTION = process.env.NODE_ENV === 'production'

const BABEL = {
  presets: [
    '@babel/preset-env',
    [
      '@babel/preset-typescript',
      {
        isTSX: true,
        allExtensions: true
      }
    ],
    [
      '@babel/preset-react',
      {
        runtime: 'automatic'
      }
    ]
  ]
}

let plugins = [
  new HtmlWebpackPlugin({ template: './src/index.html' })
]
let optimization = {}

if (IS_PRODUCTION) {
  let browsers = browserslist()
  let esmBrowsers = browserslist('supports es6-module')

  plugins.push(
    new MiniCssExtractPlugin({
      filename: '[name].[hash:8].css',
      ignoreOrder: true
    }),
    new BabelMultiTargetPlugin({
      babel: {
        presets: BABEL.presets.filter(i => i !== '@babel/preset-env')
      },
      targets: {
        modern: {
          browsers: browsers.filter(i => esmBrowsers.includes(i))
        },
        legacy: {
          browsers: browsers.filter(i => !esmBrowsers.includes(i))
        }
      }
    })
  )
  cssClasses = '[hash:base64:12]'
  optimization = {
    minimize: true,
    minimizer: [
      new TerserPlugin({ terserOptions: { format: { comments: false } } }),
      new CssMinimizerPlugin()
    ]
  }
}

module.exports = {
  mode: IS_PRODUCTION ? 'production' : 'development',
  devtool: IS_PRODUCTION ? false : 'eval-cheap-module-source-map',
  entry: {
    app: join(__dirname, 'src', 'index.tsx')
  },
  output: {
    publicPath: '/',
  },
  plugins,
  module: {
    rules: [
      {
        test: /\.(js|mjs|cjs|jsx)?$/,
        use: [IS_PRODUCTION ? BabelMultiTargetPlugin.loader() : 'babel-loader']
      },
      {
        test: /\.tsx?$/,
        use: [
          IS_PRODUCTION ? BabelMultiTargetPlugin.loader() : 'babel-loader'
        ]
      },
      {
        test: /\.pcss$/,
        use: [
          IS_PRODUCTION ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  optimization,
  resolve: {
    alias: { src: join(__dirname, 'src') }
  }
}

[DanielSchaffer]

@ai IIRC, that error happens either when there are node_modules packages that either aren't transpiled when they should be, or when babel tries to transpile something that's already in UMD format.

This plugin relies on the assumption that node_modules is getting included in transpiling, and that you're providing it with the most "modern" source possible, which is why the custom configuration of mainFields is required in the setup. Can you try adding this to your config code?

const resolve = {}
if (IS_PRODUCTION) {
  ...
  resolve.mainFields = [

    // rxjs and Angular Package Format
    // these are generally shipped as a higher ES language level than `module`
    'es2015',
    'esm2015',
    'fesm2015',

    // current leading de-facto standard - see https://github.com/rollup/rollup/wiki/pkg.module
    'module',

    // previous de-facto standard, superceded by `module`, but still in use by some packages
    'jsnext:main',

    // Angular Package Format - lower ES level
    'esm5',
    'fesm5',

    // standard package.json fields
    'browser',
    'main',
  ]
}

module.exports = {
  ...
  resolve: Object.assign(resolve, {
    alias: { src: join(__dirname, 'src') }
  }),
}

[DanielSchaffer]

If that still doesn't work, we'll need to do a little investigation:

• create a build that uses the plugin, but does not minify / obfuscate
• locate line from stack trace and determine which library it is coming from
• this library may need to be added to the exclude key of the plugin's configuration

[DanielSchaffer]

@ai are you still having this issue? I'm going to close this if there's no update.

[ai]

Yeap. Let’s close it.