react-three-next
react-three-next copied to clipboard
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.
Thanks for the feedbacks!
create-r3f-app 1.6.7 fix the npx issue: https://github.com/utsuboco/create-r3f-app/commit/4d68e41cad25b59e2ea6149b12c818a9feff6451
Related: #120 #125
Thanks for the quick response, but whatever you did is causing other issues. :cry:
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 [email protected] 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.
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.
I'll try yarn and see if that fixes the runtime errors.
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.
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
Sorry unfortunately this is still failed.. any other way to fix it?
I also have this issue.
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).
Just tested using node 19.9.0 and the same error is occuring. Not certain what is casuing this too happen.
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.
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: 984e9bb9bb0d2d3bd7581a67f5ce98bf040c3890 (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.
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. eeb38acc2e1d3c413263f3420f290cf11de5a0e7 doesn't show tunnel-rat
at all (see: it's package.json), but then 984e9bb9bb0d2d3bd7581a67f5ce98bf040c3890 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 eeb38acc2e1d3c413263f3420f290cf11de5a0e7.
I feel like that has to be where the issue is, because updating the other packages doesn't break anything.
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 [email protected] 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 [email protected]
(be careful withnpm i [email protected]
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).
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 .
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 [email protected] 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 [email protected]
(be careful withnpm i [email protected]
sometimes it gives a dependency error)- Finally
npm run dev
should work.
Node Version v16.13.2
is the same, error and solution here:
- Creating the project with
npx [email protected] 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 [email protected]
(be careful withnpm i [email protected]
sometimes it gives a dependency error)- Finally
npm run dev
should work.