Clean typescript install giving "Module parse failed: Octal literal in strict mode" when opening

[RoboticWater]

• Platform: Windows 11
• Node Version: v19.6.1
• Installed using: yarn create r3f-app next 3d-mapper -ts

On a clean install of react-three-next and running npm run dev I'm getting the following error:

Failed to Compile

./app/page.tsx
Module parse failed: Octal literal in strict mode (2:38)
| import { createProxy } from "next/dist/build/webpack/loaders/next-flight-loader/module-proxy"
> const proxy = createProxy("D:\code\web\3d-mapper\app\page.tsx")
| 
| // Accessing the __esModule property and exporting $$typeof are required here.

Incidentally, I also had difficulty installing via the npx create-r3f-app next 3d-mapper tailwind -ts command, getting the same problem as #120. I was able to get around this using this suggestion in #119 and then the yarn command, but in both cases, upon running the app, I get the above error.

I was able to create a new app via npx about 3 weeks ago, so it's probably one of the changes made since then.

[RenaudRohlinger]

Thanks for the feedbacks!

create-r3f-app 1.6.7 fix the npx issue:
utsuboco/create-r3f-app@4d68e41

Related: #120 #125

[RoboticWater]

Thanks for the quick response, but whatever you did is causing other issues. 😢

First, running npx create-r3f-app next my-app -ts now opens a new cmd window that shows only Welcome. Project's generation started using create-R3F-App 🐱 then closes without doing anything.

Running npx create-r3f-app@1.6.7 next my-app -ts opens a new window, downloads everything correctly, but installs the app to the root of the drive. Still workable though, but then testing what it did install gets me these errors:

Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at parseModel (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:33:15)
    at resolveModule (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:749:33)
    at processFullRow (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:825:9)
    at processBinaryChunk (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:869:5)
    at progress (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1476:5)

The above error occurred in the <ServerRoot> component:

    at ServerRoot (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:147:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/next/dist/client/app-index.js:164:11)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Uncaught SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at parseModel (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:33:15)
    at resolveModule (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:749:33)
    at processFullRow (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:825:9)
    at processBinaryChunk (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:869:5)
    at progress (webpack-internal:///(:3000/app-client)/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1476:5)

I tried running npm i to see if it forgot to install something, but that yielded the same results.

[RenaudRohlinger]

That seems related to the system, I don't really know how npx works behind the hood so I will remove npx from the readme as we investigate this. I will keep this issue open in the meantime and hopefully, someone knows more about the issue.

[RoboticWater]

I'll try yarn and see if that fixes the runtime errors.

[RoboticWater]

OK, so the new window thing was probably just a thing on my end. That went away after closing and reopening the terminal, but npx still isn't working.

Still also getting the "Failed to Compile" error with yarn installs. I'll try this tomorrow on my Mac and see if anything changes.

[RenaudRohlinger]

You can debug this by cloning https://github.com/utsuboco/create-r3f-app and running the binary directly. For example:
./bin/create-r3f-app next my-app -ts

[LuLue7775]

Sorry unfortunately this is still failed.. any other way to fix it?

[derin-art]

I also have this issue.

[RoboticWater]

OK, so I tested on my mac (Node version 19.9.0), and both npx create-r3f-app next test tailwind -ts and yarn create r3f-app next test tailwind -ts work as expected, no installation or runtime errors.

It looks like this is a platform thing (or maybe a discrepancy between Node v19.9.0 and Node v19.6.1, but that seems less likely).

[Ethan-Hill]

Just tested using node 19.9.0 and the same error is occuring. Not certain what is casuing this too happen.

[RoboticWater]

I tried moving my working install from my Mac to my PC. Naturally, it didn't work at first (I assume there's several platform-specific libraries), so I cleared node_modules, and package-lock.json and ran npm i which compiled, but still gives me the Uncaught SyntaxError: "undefined" is not valid JSON... errors.

I also tested a yarn create r3f-app next test to see if it was just Typescript, but that also gets the same error.

This suggests to me that there's a problem beyond simply the installer, and maybe something with this project and Windows.

[RoboticWater]

Alright, I have now tested this repo to see if it was broken on my machine, and as it turns out, yes, the most recent version is broken, but it wasn't always. It seems like (according to my testing at least) that this commit: 984e9bb (bump packages and some minor fixes) is the culprit! All previous commits (that I tested) work fine, and running npm i with it takes significantly longer (the latter may be a coincidence, though).

It's likely that one of the dependencies is broken on Windows or is having some strange reaction with another.

[RoboticWater]

I'm trying to figure out if the packages are to blame, but I've found one oddity: I can't find the commit where tunnel-rat got added. eeb38ac doesn't show tunnel-rat at all (see: it's package.json), but then 984e9bb shows an existing tunnel-rat going from ^0.1.1 to ^0.1.2.

I'm not the most well-versed in git, so maybe this is common, but it seems like some changes got suppressed when merging eeb38ac.

I feel like that has to be where the issue is, because updating the other packages doesn't break anything.

[RoboticWater]

OK, I think I may have found a solution to the Uncaught SyntaxError: "undefined" is not valid JSON problem. Looking for the error on nextjs's issues, I came across vercel/next.js#47024), which suggested upgrading to the latest next canary release (currently v13.3.1-canary.7).

1. Creating the project with npx create-r3f-app@1.6.7 next test2 -ts works as expected (omitting the version still doesn't work for me; IDK if something just hasn't been synced yet)
2. I run yarn add next@13.3.1-canary.7 (be careful with npm i next@13.3.1-canary.7 sometimes it gives a dependency error)
3. Finally npm run dev should work.

Again, I will note that this only seems to be a problem on Windows not my Mac (though, the next.js issue was with darwin, so maybe it's just non-macs? Who knows).

[FunAomi]

Today I also encountered this problem, but version 13.3.1 has already been released. It may be due to my local environment that the npm package downloaded is still version 13.3.0. However, the issue has been fixed in next-13.3.1, so I changed to version to13.3.1. The problem has been solved. thanks @RoboticWater .

[TheDormouse]

I'm seeing this error as well in a fresh run of yarn create r3f-app next my-app. Node version v19.7.0 in powershell.

error - SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)

Edit: this resolved the issue. I blame powershell 😅

1. Creating the project with npx create-r3f-app@1.6.7 next test2 -ts works as expected (omitting the version still doesn't work for me; IDK if something just hasn't been synced yet)
2. I run yarn add next@13.3.1-canary.7 (be careful with npm i next@13.3.1-canary.7 sometimes it gives a dependency error)
3. Finally npm run dev should work.

[PaleHazy]

Node Version v16.13.2 is the same, error and solution here:

1. Creating the project with npx create-r3f-app@1.6.7 next test2 -ts works as expected (omitting the version still doesn't work for me; IDK if something just hasn't been synced yet)
2. I run yarn add next@13.3.1-canary.7 (be careful with npm i next@13.3.1-canary.7 sometimes it gives a dependency error)
3. Finally npm run dev should work.