[webpack v5] Uncaught (in promise) ReferenceError: exports is not defined

[sukano]

Do you want to request a feature or report a bug?
A bug.

What is the current behavior?
I got this error since I updated webpack from v5.0.0-beta.25 to v5.6.0.

It happens when the browser want to load a CommonJS module/library.

If I add <script>var exports = {};</script> to my index.html file, this is the require function who is not defined.

If the current behavior is a bug, please provide the steps to reproduce.
I can't provide access to source code because is a companie project but I can provide the configuration.
https://gist.github.com/sukano/10a9cafc90e7e6b8591dd4f665c648ed

What is the expected behavior?
He should provide CommonJS capacity to load module.

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.
This bug seems appear since v5.0.0-beta.26.

[sokra]

Difficult to say without the source code of dayjs-internal. My guess would be there is a "type": "module" in dayjs-internal/package.json.

[sukano]

I confirm, there is a "type": "module" in dayjs-internal/package.json.

And I can share the tsconfig.json file content:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "es5",
    "module": "CommonJS",
    "lib": ["esnext"],
    "strict": true,
    "sourceMap": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "declarationDir": "./dist",
    "outDir": "./dist",
    "typeRoots": ["node_modules/@types"],
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts", "src/*.ts"],
  "exclude": ["./node_modules"]
}

[alexander-akait]

@sukano Can you try latest webpack@5 version?

[sukano]

@alexander-akait Editing package.json fixed my problem.

It works with the latest version of webpack@5.

[gabycperezdias]

Can anyone help me? I am still facing this issue.

I am using

    "webpack": "^5.61.0",
    "webpack-dev-server": "^4.4.0",

I am trying to upgrade from webpack 4 to 5 (all config was initially done using CRA + eject). I was able to make the webpack compile successfully but the application breaks with a "Uncaught ReferenceError: exports is not defined" error.

I saw some hacks using <script>var exports = {};</script> I thought it was too hacky, but tried anyway, it solves the issue but then the next error is require is undefined so I need a real solution for this.

My package.json does not have type: module.

tsconfig.js

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "ESNext",
    "baseUrl": ".",
    "lib": ["DOM", "ESNext", "DOM.Iterable", "ScriptHost", "ES2016.Array.Include"],
    "moduleResolution": "node",
    "module": "CommonJS",
    "outDir": "lib",
    "esModuleInterop": true,
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "checkJs": false,
    "declaration": false,
    "strictNullChecks": true,
    "jsx": "react",
    "types": ["react", "node"],
    "paths": {
      "components/*": ["./src/components/*"],
    },
    "skipLibCheck": true
  },
  "exclude": [
    "node_modules",
    "lib"
  ],
  "include": [
    "src",
    "custom.d.ts"
  ]
}

webpack.config.js

...
output: {
      libraryTarget: 'umd'
    },
module: {
      strictExportPresence: true,
      rules: [
        {
          test: /\.tsx?$/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true
              }
            }
          ]
        },
        {
          oneOf: [
            {
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.mp?g$/],
              loader: require.resolve('url-loader'),
              options: {
                limit: 10000,
                name: 'static/media/[name].[hash:8].[ext]',
              },
            },
            {
              test: [/\.(ogg|mp3|wav|mpe?g)$/i],
              loader: require.resolve('file-loader'),
              options: {
                name: '[name].[hash:8].[ext]',
                outputPath: 'static/media/'
              },
            },
            {
              test: /\.(woff|woff2|eot|ttf|otf|svg)$/,
              loader: require.resolve('file-loader'),
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts/'
              }
            },
            {
              test: /\.(js|mjs|jsx)$/,
              include: [paths.appSrc, path.resolve(__dirname, '../../Common')],
              loader: require.resolve('babel-loader'),
              options: {
                customize: require.resolve(
                  'babel-preset-react-app/webpack-overrides'
                ),

                plugins: [
                  [
                    require.resolve('babel-plugin-named-asset-import'),
                    {
                      loaderMap: {
                        svg: {
                          ReactComponent: '@svgr/webpack?-svgo![path]',
                        },
                      },
                    },
                  ],
                ],
                cacheDirectory: false,
                cacheCompression: isEnvProduction,
                compact: isEnvProduction,
              },
            },
            {
              test: /\.(js|mjs)$/,
              exclude: /@babel(?:\/|\\{1,2})runtime/,
              loader: require.resolve('babel-loader'),
              options: {
                babelrc: false,
                configFile: false,
                compact: false,
                presets: [
                  [
                    require.resolve('babel-preset-react-app/dependencies'),
                    { helpers: true },
                  ],
                ],
                cacheDirectory: true,
                cacheCompression: isEnvProduction,
                sourceMaps: false,
              },
            },
...

I can post more of webpack / babelrc if needed...

In the previous comments there is this: "I confirm, there is a "type": "module" in dayjs-internal/package.json." for me, it, in fact, breaks on libraries that do have that, but they are all external libraries so I cannot simply edit their pacakge.json in order to work with my code. There must be something I can do on my side. It doesn't make sense to me that I am not able to use some external libs because they have one attribute on their package.json

[flyskywhy]

None of webpack config change above can fix it, only source code change can fix: react-native-web with react-app-rewired and react-scripts@5 and webpack@5 cause Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./node_modules/@flyskywhy/react-native-gcanvas/index.js, ref to #4039 (comment)