[v15] Module parse failed: Bad character escape sequence #71582

faisalrehmanlums · 2024-10-21T21:11:26Z

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/condescending-haze-go8s7s

To Reproduce

run this commad: npx create-next-app@latest
This will install latest version of nextjs like in package.json is "dependencies": { "react": "19.0.0-rc-65a56d0e-20241020", "react-dom": "19.0.0-rc-65a56d0e-20241020", "next": "15.0.0" }, "devDependencies": { "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.1", "eslint": "^8", "eslint-config-next": "15.0.0" }
npm run dev
browser showing error `Module parse failed: Bad character escape sequence (11:57)
| const fileSizeInMB = buffer.byteLength / 1024 / 1024

`

Current vs. Expected behavior

I have just not changed any default value during app creation like shown in screenshot
it should spin up dev server without error. which it dose but after within seconds error pop out.

Provide environment information

test

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

When i step down to version 14 its working fine with 14.2.15 npx create-next-app@14 test-project

The text was updated successfully, but these errors were encountered:

FKAJerry · 2024-10-22T06:41:15Z

v15 stable has this bug it's CRAZY!

Is anyone in the next.js community actually reviewing code?

Sayakie · 2024-10-22T07:42:19Z

Looks like this started appearing in [email protected] on Windows platform.

feat(next): throw when twitter-image or opengraph-image file size exceeds #70353

darthmaim · 2024-10-22T08:20:19Z

What node.js version are you using (please fill out the entire issue template next time)? There was a bug in some recent Node.js versions recently (mainly 22.7.0) that had some similar symptoms, you should try upgrading if you are using that version.

kdy1 · 2024-10-22T08:48:04Z

I think we should not inline the path into the string, or we should replace \ with \\ on windows. cc @devjiwonchoi

faisalrehmanlums · 2024-10-22T09:57:24Z

What node.js version are you using (please fill out the entire issue template next time)? There was a bug in some recent Node.js versions recently (mainly 22.7.0) that had some similar symptoms, you should try upgrading if you are using that version.

I'm using node verion v20.18.0 with npm version 10.9.0

### Why? When handling the `opengraph-image` size exceeding the limit, we mapped with string literal between Rust and JavaScript. The Rust string literal contains backslashes `\` on Windows, incompatible with JavaScript string syntax. Fixes vercel#71582 --------- Co-authored-by: Donny/강동윤 <[email protected]>

devjiwonchoi · 2024-10-22T18:01:07Z

Hey everyone, sorry for letting this slip. Feel free to ping me if 15.0.1-canary.2 did not fix it. When we can confirm, will have the patch ASAP to unblock your upgrade. Again, apologies for inconvenience and thank you all for your report. Thank you!

faisalrehmanlums · 2024-10-22T18:12:54Z

I have installed the canary version but still issue not resolved. Here is my package.json screenshot with error.

cmd is

Sayakie · 2024-10-23T00:57:35Z

@devjiwonchoi, I suppose to webpack loader should be fix as well:

next.js/packages/next/src/build/webpack/loaders/next-metadata-route-loader.ts

Line 108 in 79bc150

    
               throw new Error('File size for ${imgName} image "${resourcePath}" exceeds ${fileSizeLimit}MB. ' +

devjiwonchoi · 2024-10-23T01:04:03Z

@Sayakie Thank you!

@faisalrehmanlums Could you add the next info as well? I wasn't able to reproduce this issue on my VM, which I think it slipped.

Sayakie · 2024-10-23T02:23:48Z

FYI, here is my development environment:

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 23855
  Available CPU cores: 12
Binaries:
  Node: 22.9.0
  npm: N/A
  Yarn: N/A
  pnpm: 9.12.0
Relevant Packages:
  next: 15.0.1 // Latest available version is detected (15.0.1).
  eslint-config-next: 14.2.13
  react: 19.0.0-rc-45804af1-20241021
  react-dom: 19.0.0-rc-45804af1-20241021
  typescript: 5.6.2
Next.js Config:
  output: N/A

next dev --turbo is working healthy but either next dev or next build throws the same error.

### Why? When handling the opengraph-image size exceeding the limit, we mapped with string literal between Rust and JavaScript. The Rust string literal contains backslashes `\` on Windows, incompatible with JavaScript string syntax. Following up on #71615. Fixes #71582

) ### Why? When handling the opengraph-image size exceeding the limit, we mapped with string literal between Rust and JavaScript. The Rust string literal contains backslashes `\` on Windows, incompatible with JavaScript string syntax. Following up on vercel#71615. Fixes vercel#71582

faisalrehmanlums · 2024-10-23T13:44:49Z

I have tried with latest canary version but still same issue following is my system info

Same ERROR on browser:

devjiwonchoi · 2024-10-23T14:22:59Z

@faisalrehmanlums Hi, #71673 hasn't been added to the release yet, ~~expected to be at 15.0.1-canary.4~~.

Could you try v15.0.2-canary.0? Thank you!

Rakvadium · 2024-10-24T18:15:57Z

@faisalrehmanlums Hi, #71673 hasn't been added to the release yet, ~~expected to be at 15.0.1-canary.4~~.

Could you try v15.0.2-canary.0? Thank you!

I just tried this, not working.

dualdetail · 2024-10-24T19:47:33Z

I get this issue when I run dev or build. If you run dev you gotta load a page to see the bug propagate

devjiwonchoi · 2024-10-24T20:08:43Z

@dualdetail @Rakvadium @faisalrehmanlums Since I cannot reproduce the case, it isn't easy to fix it confidently.
Could you confirm the npx [email protected] does not work?

CleanShot.2024-10-25.at.05.02.32.mp4

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 4087
  Available CPU cores: 6
Binaries:
  Node: 20.18.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 15.0.2-canary.0 // There is a newer canary version (15.0.2-canary.4) available, please upgrade!
  eslint-config-next: 15.0.2-canary.0
  react: 19.0.0-rc-69d4b800-20241021
  react-dom: 19.0.0-rc-69d4b800-20241021
  typescript: 5.6.3
Next.js Config:
  output: N/A
 ⚠ There is a newer canary version (15.0.2-canary.4) available, please upgrade!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

dualdetail · 2024-10-24T23:10:54Z

The npx create next app works and I was also able to get the turbo repo basic example updated and working. Let me try to work and see if I can figure out whats going on. I don't understand why it's breaking on my mono repo but not others just yet

Sayakie · 2024-10-24T23:29:33Z

npx rimraf .next and then running next server should be working.

devjiwonchoi · 2024-10-25T06:41:56Z

@dualdetail Could you try removing node_modules/ (the root one as well) & .next/?

Charles0123 · 2024-10-25T07:58:25Z

I deleted favicon.ico and it returned to normal operation.

dualdetail · 2024-10-25T17:31:33Z

I am pretty confused, I can only get the icons to work using the --turbo flag and refactoring a bit. Similar to what Sayakie mentioned a while ago. I did try to remove all node_modules and .next folders and also recloned but both still fail on build. I did notice that the nextjs docs mention turbo not being experimental anymore, but it's still a experimental option in the next.config.ts. If anyone can confirm this then I at least know my package isn't bugged or anything. I think I'll try messing around with my next config to see if maybe the error lies there.

Rakvadium · 2024-10-25T22:38:29Z

I deleted favicon.ico and it returned to normal operation.

This is also what "fixed" it for me. Should definitely not run into that error for having a favicon.ico file...

PahesebPJ · 2024-10-26T18:26:32Z

I deleted favicon.ico and it returned to normal operation.

This is also what "fixed" it for me. Should definitely not run into that error for having a favicon.ico file...

Sure, confirm also I deleted favicon.ico and worked again.

dualdetail · 2024-10-27T02:51:51Z

I've been going crazy, but I just decided to mess with the dist that I have (15.0.2-canary.7) and I just modified the code and got it to work properly. I had to run a replaceAll on the resource path to adjust any \ to \\ (what kdy1 mentioned earlier) which fixed my problems. For whatever reason the path.default.posix.normalize(resourcePath) does not fix the path for me at all (I'm using Windows 11 pro). I'm not sure why normalize doesn't do jack, but the printed path is the same as what comes in originally.

dualdetail · 2024-10-27T02:59:42Z

Here's my next info, I can also paste in the distribution code if needed but it's exactly the same in the working and non-working instances. I still don't quite understand why it's not working specifically for my repo only, but I was able to get it fixed with a code change.

elitalpa · 2024-10-27T21:55:38Z

Solution

I have a very similar issue but the error message is Module parse failed: Octal literal in strict mode (11:75).

I found the solution while playing with the dist file (./node_modules/next/dist/build/webpack/loaders/next-metadata-route-loader.js).
The build error seems to be caused by ResourcePath inside throw new Error().
Wrapping it with JSON.stringify(ResourcePath) fixes the error, like this :

    throw new Error('File size for ${imgName} image "${JSON.stringify(resourcePath)}" exceeds ${fileSizeLimit}MB. ' +
    \`(Current: \${fileSizeInMB.toFixed(2)}MB)\n\` +
    'Read more: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image#image-files-jpg-png-gif'
    )

Same solution seems to already be used elsewhere in the same file :

throw new Error('Default export is missing in ${JSON.stringify(resourcePath)}')

About the error

What I found about the error :

The error seems to be caused by backslashes (\) which seem to be interpreted as escape characters.
- Backslashes are used only on Windows for paths, which explains why there is no issue on other Operating Systems like Linux which uses forward slashes (/).
Also, the error seems to be triggered only if one of the directories have a name that begins with certain characters.
- Like beginning with a number (path example : C:\Users\eli\Documents\01-next-app where the 01-next-app directory begins with 01).
- Which explains why I didn't get exactly the same error message and why others did not get the error at all.

Reproducing the error

How I got the error :

on Windows 10 or 11 (tried on Linux and had no error)
using npx create-next-app@latest (next 15.0.1) and webpack with all the default options (TypeScript : yes, ESLint : yes, Tailwind CSS : yes, src/ : yes, App Router : yes, Turbopack : no, customize the import alias : no).
the name of one of the directories begins with a number
running the app with npm run dev (next dev)
refreshing the page a few times (or using Ctrl + F5 once) makes the build error appear (does not appear on the first load)

No error in these cases :

removing the favicon.ico file
using Turbopack (next dev --turbo)
if you have luck and your directory names don't begin with certain characters like numbers

Hope this helps ;)

devjiwonchoi · 2024-10-29T07:35:25Z

Could you guys all try the 15.0.2-canary.10? Hope this is our final fix. Kudos to @elitalpa for the PR!

devjiwonchoi · 2024-10-29T15:43:30Z

Hey everyone, v15.0.2 is out with the fix. Please give it a try and lmk!

github-actions · 2024-11-13T00:05:00Z

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

faisalrehmanlums added the bug Issue was opened via the bug report template. label Oct 21, 2024

github-actions bot added the create-next-app Related to our CLI tool for quickly starting a new Next.js application. label Oct 21, 2024

samcx changed the title ~~Error in latest nextjs version 15.0.0~~ Module parse failed: Bad character escape sequence Oct 21, 2024

samcx changed the title ~~Module parse failed: Bad character escape sequence~~ [v15] Module parse failed: Bad character escape sequence Oct 21, 2024

devjiwonchoi self-assigned this Oct 22, 2024

devjiwonchoi mentioned this issue Oct 22, 2024

fix: metadata image route Windows path escaping #71615

Merged

devjiwonchoi closed this as completed in #71615 Oct 22, 2024

devjiwonchoi closed this as completed in 4f260d6 Oct 22, 2024

lubieowoce mentioned this issue Oct 22, 2024

Module parse failed: Bad character escape sequence #71625

Closed

unstubbable mentioned this issue Oct 22, 2024

Read page name from work store in server module map proxy #71669

Merged

devjiwonchoi mentioned this issue Oct 23, 2024

fix: metadata image route normalize path posix for windows #71673

Merged

devjiwonchoi reopened this Oct 24, 2024

elitalpa mentioned this issue Oct 28, 2024

fix: webpack build error on Windows #71943

Merged

1 task

devjiwonchoi closed this as completed in #71943 Oct 28, 2024

github-actions bot added the locked label Nov 13, 2024

github-actions bot locked as resolved and limited conversation to collaborators Nov 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v15] Module parse failed: Bad character escape sequence #71582

[v15] Module parse failed: Bad character escape sequence #71582

faisalrehmanlums commented Oct 21, 2024 •

edited

Loading

FKAJerry commented Oct 22, 2024

Sayakie commented Oct 22, 2024

darthmaim commented Oct 22, 2024 •

edited

Loading

kdy1 commented Oct 22, 2024

faisalrehmanlums commented Oct 22, 2024

devjiwonchoi commented Oct 22, 2024 •

edited

Loading

faisalrehmanlums commented Oct 22, 2024

Sayakie commented Oct 23, 2024

devjiwonchoi commented Oct 23, 2024 •

edited

Loading

Sayakie commented Oct 23, 2024

faisalrehmanlums commented Oct 23, 2024

devjiwonchoi commented Oct 23, 2024 •

edited

Loading

Rakvadium commented Oct 24, 2024

dualdetail commented Oct 24, 2024

devjiwonchoi commented Oct 24, 2024 •

edited

Loading

dualdetail commented Oct 24, 2024

Sayakie commented Oct 24, 2024

devjiwonchoi commented Oct 25, 2024

Charles0123 commented Oct 25, 2024

dualdetail commented Oct 25, 2024

Rakvadium commented Oct 25, 2024

PahesebPJ commented Oct 26, 2024

dualdetail commented Oct 27, 2024 •

edited

Loading

dualdetail commented Oct 27, 2024

elitalpa commented Oct 27, 2024

devjiwonchoi commented Oct 29, 2024

devjiwonchoi commented Oct 29, 2024

github-actions bot commented Nov 13, 2024

[v15] Module parse failed: Bad character escape sequence #71582

[v15] Module parse failed: Bad character escape sequence #71582

Comments

faisalrehmanlums commented Oct 21, 2024 • edited Loading

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

FKAJerry commented Oct 22, 2024

Sayakie commented Oct 22, 2024

darthmaim commented Oct 22, 2024 • edited Loading

kdy1 commented Oct 22, 2024

faisalrehmanlums commented Oct 22, 2024

devjiwonchoi commented Oct 22, 2024 • edited Loading

faisalrehmanlums commented Oct 22, 2024

Sayakie commented Oct 23, 2024

devjiwonchoi commented Oct 23, 2024 • edited Loading

Sayakie commented Oct 23, 2024

faisalrehmanlums commented Oct 23, 2024

devjiwonchoi commented Oct 23, 2024 • edited Loading

Rakvadium commented Oct 24, 2024

dualdetail commented Oct 24, 2024

devjiwonchoi commented Oct 24, 2024 • edited Loading

dualdetail commented Oct 24, 2024

Sayakie commented Oct 24, 2024

devjiwonchoi commented Oct 25, 2024

Charles0123 commented Oct 25, 2024

dualdetail commented Oct 25, 2024

Rakvadium commented Oct 25, 2024

PahesebPJ commented Oct 26, 2024

dualdetail commented Oct 27, 2024 • edited Loading

dualdetail commented Oct 27, 2024

elitalpa commented Oct 27, 2024

Solution

About the error

Reproducing the error

devjiwonchoi commented Oct 29, 2024

devjiwonchoi commented Oct 29, 2024

github-actions bot commented Nov 13, 2024

faisalrehmanlums commented Oct 21, 2024 •

edited

Loading

darthmaim commented Oct 22, 2024 •

edited

Loading

devjiwonchoi commented Oct 22, 2024 •

edited

Loading

devjiwonchoi commented Oct 23, 2024 •

edited

Loading

devjiwonchoi commented Oct 23, 2024 •

edited

Loading

devjiwonchoi commented Oct 24, 2024 •

edited

Loading

dualdetail commented Oct 27, 2024 •

edited

Loading