Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
meesrutten opened this issue Dec 11, 2020 · 10 comments
Labels
upstream Blocked on upstream dependency

Comments

@meesrutten
Copy link

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
Copy link
Owner

developit commented Dec 11, 2020

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
Copy link

@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
Copy link
Owner

@mohsinulhaq what version of Webpack are you using?

@mohsinulhaq
Copy link

@rockeynebhwani
Copy link

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

@developit
Copy link
Owner

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.

@developit developit added the needs more info More information is needed to diagnose. label Dec 14, 2020
@Super-Fly
Copy link

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 ]

@developit
Copy link
Owner

@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
Copy link

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
Copy link
Owner

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

@developit developit added upstream Blocked on upstream dependency and removed needs more info More information is needed to diagnose. labels Feb 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
upstream Blocked on upstream dependency
Projects
None yet
Development

No branches or pull requests

5 participants