next-plugin-preval: css-loader/cjs.js: e.charCodeAt is not a function

next: 11.1.2 node: v14.18.0 (also happens on v14.15.5) next-plugin-preval: 1.2.1

When setting up preval in our project, we ran into this intermittent error on next build:

info  - Creating an optimized production build  
Failed to compile.

./styles/blocks.css.webpack[javascript/auto]!=!./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[3].oneOf[6].use[2]!./styles/blocks.css
TypeError: ./node_modules/next/dist/compiled/css-loader/cjs.js: e.charCodeAt is not a function

The css file differs but it’s always the same error when it occurs. It seems to occur about 90% of the time.

This is occurring when building locally as well as in an isolated Docker environment.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 21 (6 by maintainers)

Most upvoted comments

@akshitkrnagpal ah that makes a lot of sense. next.js 12 mightve significantly changed how this works though i’m curious why the example app in the CI isn’t breaking.

im using babel + babel register right now to compile the code for execution in node.js. after the code is executed, the result is serialized and passed to webpack as a json string. it might help to completely skip the next babel preset and use babel independently (or even a similar even register hook). i’ll play around with that today.

ricokahler on Nov 14, 2021

I have tried to reproduce this without success. But I can confirm what @fabien says. If I delete the .next folder before building, it works.

When I have some more spare time, I will try to debug this further.

thomaskvael on Nov 13, 2021

Alright, i think i finally got this one. After lots of stack trace following and a helpful call with @fabien, I think this one is solved.

The solution was relatively simple as well. See #77 and v1.2.4

Thanks for hanging in there everyone!

ricokahler on Dec 11, 2021

I still have the error on both Next 11 and Next 12. Anecdotally it seems much more likely to fail when I deploy to Vercel than when I build locally.

benjaminleonard on Nov 30, 2021

Hey All

I was trying to figure this out. Just wanted to add my findings.

This error seems to be open issue in babel. https://github.com/babel/babel/issues/13815 From the conversation, this was a bug in @babel/plugin-proposal-unicode-property-regex which was fixed in https://github.com/babel/babel/pull/13767 and is released in babel version 7.15.7. Link of release - https://github.com/babel/babel/releases/tag/v7.15.7

I am seeing older babel version pinned in nextjs but not sure if that is the cause. (Babel Newbie here 😄 ) https://github.com/search?q=babel+repo%3Avercel%2Fnext.js+filename%3Apackage.json+path%3A%2Fpackages&type=Code&ref=advsearch&l=&l=

Hope this helps someone figure this out.

akshitkrnagpal on Nov 14, 2021

Quick update: I finally updated my apps to Next 12. I keep seeing this issue, with all relevant dependencies updated.

fabien on Nov 13, 2021

So I gave it another shot today, and disabled the Tailwind imports. At first that appeared to help, as I was consistently getting a correct startup of the app, without any issues. However, in another app, the issue returned.

As I mentioned, I haven’t had a build fail at all. What I seem to have noticed though, is that during development, my browser is trying to reload the tab as soon as the Next app starts. Doing so appears to trigger the compilation of the css prematurely, in turn causing the error to appear. In other words, from my findings I did not see this issue when there’s no browser tab trying to load the page instantly.

Also - and this is another faint guess - it appears that deleting the .next folder before starting the app also helped to prevent it. As if there’s some left-over stuff conflicting with the new build - or even some cached scripts in the browser during an attempt to perform a fast-refresh.

Again, only suspicions, nothing definite yet. Don’t even know how it all started in the first place either, as it used to work fine for my apps a few months ago.

fabien on Nov 11, 2021

I also have this problem. It seems to happen kinda randomly. Sometimes i get it during next dev but refreshing the page solves the issue.

The biggest problem is when this error occures during builds. I’m using netlify and every subsequent build will fail. I have to trigger a new build and clear cache to make the build go trough.

After a while the error occurs again.

I can’t share the repo since it is client work, but I will try to make some sort of reproduction repo.

I use preval to cache json returned from multiple Apollo requests.

thomaskvael on Oct 1, 2021