Build fails with error TypeError: /vercel/path0/node_modules/next/dist/build/webpack/loaders/css-loader/src/camelcase.js: e.charCodeAt is not a function

[hborrelli1]

What version of Next.js are you using?

v11.1.3-canary.30

What version of Node.js are you using?

v14.17.6

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

npm run build and build triggered by vercel

Describe the Bug

I am receiving the following error during build: TypeError: /vercel/path0/node_modules/next/dist/build/webpack/loaders/css-loader/src/camelcase.js: e.charCodeAt is not a function. After researching the issue I thought it was related to my Tailwindcss integration. I have since removed the Tailwind integration but am still seeing the issue.

The issue is present when using the next version 11.1.0 as well as v11.1.3-canary.30.

I've also noticed most of the time this issue is present while trying to use grid CSS properties. However, I am not using grid anywhere within my CSS.

I have tried tweaking the next.config.js among other things but cannot seem to get rid of the issue.

Expected Behavior

Build to run successfully both locally and in vercel.

To Reproduce

1. Clone repo: https://github.com/hborrelli1/bp-website
2. Install dependencies
3. Run npm run build

[ijjk]

Hi, after cloning the provided repro from https://github.com/hborrelli1/bp-website and commenting out the contentful data fetching it appears to work fine. I'm gonna close this since the error isn't present, if you are still encountering this feel free to respond with additional info and we can take another look.

screenshot of successful build from repro

[jonespen]

Fwiw, I'm seeing this as well rather randomly when building my project in Vercel, and the only similiarity I see with your project is next-plugin-preval. Perhaps a pointer on where to start digging @hborrelli1.

[hborrelli1]

Thanks for the feedback. I ended up removing preval and that fixed the issues.

[akshitkrnagpal]

@ijjk
I am experiencing the same issue. Here is what my investigation led me to.

PS - This error is flaky. Sometimes happens, sometimes, doesn't. So it's not possible for us to make a reproducible repo.

This is the full stack trace for this error.

See full stack trace

./src/index.css.webpack[javascript/auto]!=!./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[10].use[2]!./src/index.css
TypeError: /{dir}}/node_modules/next/dist/build/webpack/loaders/css-loader/src/camelcase.js: e.charCodeAt is not a function
    at W (/{dir}}/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:306:479279)
    at Y.add (/{dir}}/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:306:482657)
    at E (/{dir}}/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:306:520987)
    at P (/{dir}}/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:306:521505)
    at k (/{dir}}/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:306:523439)
    at PluginPass.RegExpLiteral (/{dir}}/node_modules/next/dist/compiled/babel-packages/packages-bundle.js:74:17947)
    at newFn (/{dir}}/node_modules/@babel/traverse/lib/visitors.js:177:21)
    at NodePath._call (/{dir}}/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/{dir}}/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/{dir}}/node_modules/@babel/traverse/lib/path/context.js:100:31)

So this file next/dist/compiled/babel-packages/packages-bundle.js is where that e.charCodeAt code is present.

As far as I could research, this seems to be a bug in @babel/plugin-proposal-unicode-property-regex which was fixed in babel/babel#13767 and is released in babel version 7.15.7.

I am not really familiar with nextjs architecture. Is this packages-bundle.js file is using an older babel version? If so, how can we update this file? I am just really guessing here, so apologies if it's just noise.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.