errored out during transformation TypeError: /PROJECT/pages/404.js: Cannot read property 'constant' of undefined

[meesrutten]

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?

[developit]

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,
    }
};

[mohsinulhaq]

@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)

[developit]

@mohsinulhaq what version of Webpack are you using?

[mohsinulhaq]

@developit webpack@4.43.0

[rockeynebhwani]

@developit - Is this supposed to work on Webpack versions < 5 ?

[developit]

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.

[Super-Fly]

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 npm@6.14.8
3 info using node@v12.20.0
4 verbose run-script [ 'prebuild:production', 'build:production', 'postbuild:production' ]
5 info lifecycle React@0.0.1~prebuild:production: React@0.0.1
6 info lifecycle React@0.0.1~build:production: React@0.0.1
7 verbose lifecycle React@0.0.1~build:production: unsafe-perm in lifecycle true
8 verbose lifecycle React@0.0.1~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 React@0.0.1~build:production: CWD: C:\Users\WIN_USERNAME\Workspaces\_project-folder\cartridge\react
10 silly lifecycle React@0.0.1~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 React@0.0.1~build:production: Returned: code: 2  signal: null
12 info lifecycle React@0.0.1~build:production: Failed to exec build:production script
13 verbose stack Error: React@0.0.1 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 React@0.0.1
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 React@0.0.1 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 React@0.0.1 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 ]

[developit]

@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?

[Super-Fly]

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
      })

[developit]

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