optimize-plugin
optimize-plugin copied to clipboard
Published
20 hours ago •
developit
developit
errored out during transformation TypeError: /PROJECT/pages/404.js: Cannot read property 'constant' of undefined
Hi there 👋
I ran into this issue when adding optimize-plugin to my nextjs project.
$ next build
> [PWA] PWA support is disabled
> [PWA] PWA support is disabled
info - Using external babel configuration from /PROJECT/.babelrc
[OptimizePlugin] Detected core-js version 3
[OptimizePlugin] Completed in 4ms.
4ms: Optimize Assets
No polyfills bundle was created.
[OptimizePlugin] Completed in 1ms.
1ms: Optimize Assets
No polyfills bundle was created.
errored out during transformation TypeError: /PROJECT/pages/404.js: Cannot read property 'constant' of undefined
at PluginPass.FunctionExpression|FunctionDeclaration (/PROJECT/node_modules/babel-preset-modernize/dist/plugins/transform-iife-arrows/index.js:1:424)
at newFn (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/visitors.js:175:21)
at NodePath._call (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/path/context.js:55:20)
at NodePath.call (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/path/context.js:42:17)
at NodePath.visit (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/path/context.js:92:31)
at TraversalContext.visitQueue (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/context.js:115:16)
at TraversalContext.visitMultiple (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/context.js:79:17)
at TraversalContext.visit (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/context.js:141:19)
at Function.traverse.node (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/index.js:82:17)
at NodePath.visit (/PROJECT/node_modules/optimize-plugin/node_modules/@babel/traverse/lib/path/context.js:99:18) {
type: 'TypeError',
code: 'BABEL_TRANSFORM_ERROR'
}
info - Creating an optimized production build
Failed to compile.
TypeError: /PROJECT/pages/404.js: Cannot read property 'constant' of undefined
> Build error occurred
Error: > Build failed because of webpack errors
at build (/PROJECT/node_modules/next/dist/build/index.js:15:918)
at runMicrotasks (<anonymous>)
babel.rc
{
"env": {
"development": {
"presets": ["next/babel", "@emotion/babel-preset-css-prop"],
"plugins": ["@emotion", "date-fns", "transform-react-remove-prop-types"]
},
"production": {
"presets": ["next/babel", "@emotion/babel-preset-css-prop"],
"plugins": ["@emotion", "date-fns", "transform-react-remove-prop-types"]
}
}
}
package.json
"dependencies": {
"@apollo/react-hooks": "^3.1.5",
"@apollo/react-ssr": "^3.1.5",
"@charlietango/use-focus-trap": "^1.2.10",
"@cometchat-pro/chat": "2.0.10",
"@emotion/babel-plugin": "^11.0.0",
"@emotion/babel-preset-css-prop": "^11.0.0",
"@emotion/react": "^11.1.1",
"@emotion/styled": "^11.0.0",
"@next/bundle-analyzer": "^10.0.3",
"@popmotion/popcorn": "^0.4.4",
"@types/node": "^14.0.1",
"@types/react": "^16.9.35",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.9",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
"apollo-upload-client": "^13.0.0",
"cloudinary-core": "^2.8.2",
"cron": "^1.8.2",
"date-fns": "^2.13.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"framer-motion": "^1.10.3",
"graphql": "^15.0.0",
"graphql-tag": "^2.10.3",
"helmet": "^4.2.0",
"intersection-observer": "^0.12.0",
"isomorphic-unfetch": "^3.0.0",
"js-cookie": "^2.2.1",
"mapbox-gl": "^2.0.0",
"next": "^10.0.3",
"next-cookies": "^2.0.3",
"next-fonts": "^1.1.0",
"next-i18next": "^7.0.1",
"next-pwa": "^3.1.5",
"node-cron": "^2.0.3",
"query-string": "^6.12.1",
"react": "^17.0.1",
"react-beautiful-dnd": "^13.0.0",
"react-date-range": "^1.0.3",
"react-dom": "^17.0.1",
"react-dropzone": "^11.0.1",
"react-html-parser": "^2.0.2",
"react-intersection-observer": "^8.26.2",
"react-select": "^3.1.0",
"typescript": "^3.9.2",
"use-media": "^1.4.0"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@testing-library/cypress": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"babel-plugin-date-fns": "^2.0.0",
"babel-plugin-jsx-remove-data-test-id": "^2.1.3",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"cypress": "^4.5.0",
"cypress-file-upload": "^4.0.6",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"eslint": "^7.0.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"optimize-plugin": "^1.0.0",
"prettier": "^2.0.5",
"webpackbar": "^4.0.0"
}
next.config.js
webpack: config => {
config.plugins.push(new OptimizePlugin());
return config;
},
Any idea?
Hiya - try passing modernize:false:
webpack: config => {
config.plugins.push(new OptimizePlugin({ modernize: false }));
return config;
},
That should perhaps be the default, since it's very much a thing that can break.
FWIW Next.js has its own way of generating modern + legacy output, and I'm not sure this plugin will do a better job of it. I believe you can enable it by doing:
module.exports = {
experimental: {
modern: true,
}
};
@developit I faced a similar issue in a normal webpack app. The errors I was getting were this plus many others like:
-
Cannot read property 'arguments' of undefined -
Cannot read property 'referencePaths' of undefined -
Cannot read property 'node' of undefined
Then I used modernize: false as suggested above, and now the error is:
errored out during transformation Error: xxx/app.prod.a60be814.js: Not a webpack bundle
at mod (xxx/node_modules/optimize-plugin/dist/worker.js:203:15)
Yes - I haven't tested it on Webpack 5+.
I'm thinking the issue here is related to Webpack output options folks have configured - output.target, etc. If anyone can post their output config that would be useful.
Hey, Had the same error plus those below
vendors..bundle.js: v.forEach is not a function
UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
8..bundle.js: Cannot read property 'arguments' of undefined
after applying modernize:false the errors are gone but the build is failing like that
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build:production'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild:production', 'build:production', 'postbuild:production' ]
5 info lifecycle [email protected]~prebuild:production: [email protected]
6 info lifecycle [email protected]~build:production: [email protected]
7 verbose lifecycle [email protected]~build:production: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build:production: PATH: C:\Users\WIN_USERNAME\AppData\Roaming\nvm\v12.20.0\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\WIN_USERNAME\Workspaces\_project-folder\cartridge\react\node_modules\.bin;C:\Users\WIN_USERNAME\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\local\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\usr\bin;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\Users\WIN_USERNAME\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ActiveTcl\bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\WINDOWS\System32\OpenSSH;C:\Program Files\Git\cmd;C:\Users\WIN_USERNAME\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Java\jdk-11\bin;C:\PROGRA~2\Groovy\Groovy-2.5.7\bin;C:\Program Files\Intel\WiFi\bin;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\PuTTY;C:\Python27\Scripts;C:\Python27;C:\Python3;C:\Python3\Scripts;C:\Users\WIN_USERNAME\AppData\Local\Microsoft\WindowsApps;C:\Users\WIN_USERNAME\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\JetBrains\PyCharm Community Edition 2018.3\bin;C:\Users\WIN_USERNAME\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\Git\usr\bin\vendor_perl;C:\Program Files\Git\usr\bin\core_perl
9 verbose lifecycle [email protected]~build:production: CWD: C:\Users\WIN_USERNAME\Workspaces\_project-folder\cartridge\react
10 silly lifecycle [email protected]~build:production: Args: [
10 silly lifecycle '/d /s /c',
10 silly lifecycle 'cross-env NODE_ENV=production webpack --env production --progress -p --json > stats.json'
10 silly lifecycle ]
11 silly lifecycle [email protected]~build:production: Returned: code: 2 signal: null
12 info lifecycle [email protected]~build:production: Failed to exec build:production script
13 verbose stack Error: [email protected] build:production: `cross-env NODE_ENV=production webpack --env production --progress -p --json > stats.json`
13 verbose stack Exit status 2
13 verbose stack at EventEmitter.<anonymous> (C:\Users\WIN_USERNAME\AppData\Roaming\nvm\v12.20.0\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:314:20)
13 verbose stack at ChildProcess.<anonymous> (C:\Users\WIN_USERNAME\AppData\Roaming\nvm\v12.20.0\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:314:20)
13 verbose stack at maybeClose (internal/child_process.js:1022:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid [email protected]
15 verbose cwd C:\Users\WIN_USERNAME\Workspaces\_project-folder\cartridge\react
16 verbose Windows_NT 10.0.18362
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:production"
18 verbose node v12.20.0
19 verbose npm v6.14.8
20 error code ELIFECYCLE
21 error errno 2
22 error [email protected] build:production: `cross-env NODE_ENV=production webpack --env production --progress -p --json > stats.json`
22 error Exit status 2
23 error Failed at the [email protected] build:production script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 2, true ]
@Super-Fly unfortunately that error message only tells me that webpack failed to complete successfully (the stack trace is just from npm run). Are you able to share the repository or webpack configuration you're using?
ah @developit I had to remove the changes that I made to test the plugin and now when I applied them again, it worked ... sorry for bothering you.
btw the difference that we received in bundles are those: Non legacy bundles - 3.7 mb total Legacy bundles - 3.8 mb total
Bundles without the plugin - 3.8 mb total
this is the plugin config
new OptimizePlugin({
'sourceMap': false,
'minify': true,
'downlevel': true,
'verbose': false,
'modernize': false
})
@Super-Fly hmm - those numbers mean something is misconfigured. Are you running babel-loader or transpiling typescript? Need to remove babel-loader to use this.