Next.js: nextjs 7 TypeError: [BABEL]...

[Qeneke]

Bug report

TypeError: [BABEL] D:\www\next.config.js: Cannot read property '_exploded' of undefined (While processing: "D:\www\node_modules\next\babel.js")

Describe the bug

problem due to babelrc ( next/babel )

To Reproduce

I started to get this error after moving to nextjs 7

Screenshots

Additional context

next/babel when I disable
"Module parse failed: Unexpected token (24:11)
You may need this file type. "
I get an error

[timneutkens]

You probably have to upgrade some dependencies. Please provide a clear and concise reproduction when creating issues.

[chentsulin]

Edit: Problem solved after removing node_modules

I run into the same problem too after upgrading all of the dependencies and refreshing yarn.lock.

 ERROR  Failed to compile with 2 errors                                                                    10:33:43

 error  in ./pages/_app.js

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: [BABEL] /Users/chentsulin/Projects/project/client/pages/_app.js: Cannot read property '_exploded' of undefined (While processing: "/Users/chentsulin/Projects/project/client/node_modules/next/babel.js")
    at explode (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/traverse/lib/visitors.js:19:15)
    at Object.merge (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/traverse/lib/visitors.js:195:5)
    at Object.<anonymous> (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:70:60)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/plugin-transform-classes/lib/index.js:68:46)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

 @ multi ./pages/_app.js

 error  in ./pages/_error.js

Module build failed (from ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js):
TypeError: [BABEL] /Users/chentsulin/Projects/project/client/pages/_error.js: Cannot read property '_exploded' of undefined (While processing: "/Users/chentsulin/Projects/project/client/node_modules/next/babel.js")
    at explode (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/traverse/lib/visitors.js:19:15)
    at Object.merge (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/traverse/lib/visitors.js:195:5)
    at Object.<anonymous> (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/plugin-transform-classes/lib/transformClass.js:70:60)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (/Users/chentsulin/Projects/project/client/node_modules/next/node_modules/@babel/plugin-transform-classes/lib/index.js:68:46)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

 @ multi ./pages/_error.js

[devilcoders]

I had same issue yesterday. Removing node_modules and installing them again fixed it.

[timneutkens]

@devilcoders sounds reasonable, maybe all you have to clear is node_modules/.cache (the babel cache etc).

@chentsulin I'm going to post this here again:

Please provide a clear and concise reproduction when creating issues.

Showing just log lines makes it really hard for me to fix an issue as I don't know any context of your app.

[jackgray]

I am still having this problem after deleting node_modules and the .cache any time I change the name or path of a file or folder in next 7.0.2, it tries to resolve the old names and fails.

from package.json:

"main": "index.js",
    "scripts": {
        "dev": "next -p 7777",
        "build": "next build",
        "start": "next start",
        "test": "NODE_ENV=test jest --watch",
        "heroku-postbuild": "next build"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
        "apollo-boost": "^0.1.16",
        "apollo-cache-inmemory": "^1.3.12",
        "apollo-client": "^2.4.8",
        "apollo-link": "^1.2.6",
        "apollo-link-context": "^1.0.12",
        "apollo-link-error": "^1.1.5",
        "apollo-link-http": "^1.5.9",
        "apollo-link-state": "^0.4.2",
        "apollo-link-ws": "^1.0.12",
        "apollo-utilities": "^1.0.27",
        "babel-core": "^7.0.0-bridge.0",
        "babel-plugin-styled-components": "^1.7.1",
        "date-fns": "^2.0.0-alpha.7",
        "downshift": "^2.2.3",
        "enzyme": "^3.6.0",
        "enzyme-adapter-react-16": "^1.5.0",
        "graphql": "^14.0.2",
        "graphql-tag": "^2.9.2",
        "lodash": "^4.17.11",
        "lodash.debounce": "^4.0.8",
        "next": "^7.0.2",
        "next-with-apollo": "^3.1.3",
        "nprogress": "^0.2.0",
        "prop-types": "^15.6.2",
        "react": "^16.5.2",
        "react-adopt": "^0.6.0",
        "react-apollo": "^2.3.3",
        "react-dom": "^16.5.2",
        "react-stripe-checkout": "^2.6.3",
        "react-transition-group": "^2.5.0",
        "styled-components": "^3.4.9",
        "waait": "^1.0.2"
    },
    "devDependencies": {
        "babel-jest": "^23.6.0",
        "babel-plugin-module-resolver": "^3.1.1",
        "casual": "^1.5.19",
        "enzyme-to-json": "^3.3.4",
        "graphql-tools": "^4.0.0",
        "jest": "^23.6.0",
        "jest-transform-graphql": "^2.1.0"
    },
    "jest": {
        "setupTestFrameworkScriptFile": "<rootDir>/jest.setup.js",
        "testPathIgnorePatterns": [ "<rootDir>/.next/", "<rootDir>/node_modules/" ],
        "transform": {
            "\\.(gql|graphql)$": "jest-transform-graphql",
            ".*": "babel-jest"
        }
    },
    "//": "babel config, replaces .babelrc file",
    "babel": {
        "env": {
            "development": {
                "presets": [ "next/babel" ],
                "plugins": [
                    [
                        "styled-components",
                        {
                            "ssr": true,
                            "displayName": true
                        }
                    ]
                ]
            },
            "production": {
                "presets": [ "next/babel" ],
                "plugins": [
                    [
                        "styled-components",
                        {
                            "ssr": true,
                            "displayName": true
                        }
                    ]
                ]
            },
            "test": {
                "presets": [
                    [
                        "next/babel",
                        {
                            "preset-env": {
                                "modules": "commonjs"
                            }
                        }
                    ]
                ],
                "plugins": [
                    [
                        "styled-components",
                        {
                            "ssr": true,
                            "displayName": true
                        }
                    ]
                ]
            }
        }
    }
}