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...
