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

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.

About this issue

Original URL
State: open
Created a year ago
Comments: 17 (3 by maintainers)

Most upvoted comments

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).

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)
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)
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).

+11

RoboticWater on Apr 14, 2023

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.

RoboticWater on Apr 13, 2023

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 😅

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)

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)

Finally npm run dev should work.

TheDormouse on Apr 25, 2023

I also have this issue. Error

derin-art on Apr 13, 2023

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

RenaudRohlinger on Apr 13, 2023

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.

RoboticWater on Apr 13, 2023