search

pmndrs / react-three-next

React Three Fiber, Threejs, Nextjs starter
https://react-three-next.vercel.app/
MIT License
2.46k stars 332 forks source link

Uncaught SyntaxError: "undefined" is not valid JSON on fresh clone #133

Closed FackJox closed 1 year ago

FackJox commented 1 year ago

Fresh clone and package install with yarn, can't access the site and get errored out with: index.js:10 Uncaught SyntaxError: "undefined" is not valid JSON

After some Googling have found a possibly related issue: https://github.com/vercel/next.js/discussions/48651

I tried converting all of my functions to arrow functions but I had the same issue unfortunately.

Terminal Log:

R3F\react-three-next> yarn dev 
yarn run v1.22.19
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - Invalid next.config.js options detected: 
warn  -     The value at .experimental has an unexpected property, reactRoot, which is not in the list of allowed properties (adjustFontFallbacks, adjustFontFallbacksWithSizeAdjust, allowedRevalidateHeaderKeys, amp, clientRouterFilter, clientRouterFilterRedirects, clientRouterFilterAllowedRate, cpus, craCompat, disableOptimizedLoading, disablePostcssPresetEnv, esmExternals, appDir, extensionAlias, externalDir, externalMiddlewareRewritesResolve, fallbackNodePolyfills, fetchCacheKeyPrefix, forceSwcTransforms, fullySpecified, gzipSize, incrementalCacheHandlerPath, isrFlushToDisk, isrMemoryCacheSize, largePageDataBytes, legacyBrowsers, manualClientBasePath, middlewarePrefetch, newNextLinkBehavior, nextScriptWorkers, optimizeCss, optimisticClientCache, outputFileTracingRoot, outputFileTracingExcludes, outputFileTracingIgnores, outputFileTracingIncludes, pageEnv, 
proxyTimeout, runtime, serverComponentsExternalPackages, scrollRestoration, sharedPool, sri, strictNextHead, swcFileReading, swcMinify, swcPlugins, swcTraceProfiling, urlImports, enableUndici, workerThreads, webVitalsAttribution, mdxRs, typedRoutes, webpackBuildWorker, turbo, instrumentationHook, turbotrace).
warn  - See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Thank you for testing `appDir` please leave your feedback at https://nextjs.link/app-feedback
warn  - You have enabled experimental features (reactRoot, appDir) in next.config.js.
warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

> [PWA] PWA support is disabled.
> [PWA] PWA support is disabled.
event - compiled client and server successfully in 4s (265 modules)
wait  - compiling...
event - compiled client and server successfully in 715 ms (265 modules)
wait  - compiling /page (client and server)...
event - compiled client and server successfully in 39.2s (1407 modules)
error - SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 645 ms (1394 modules)
error - SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)

Browser log:

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)
parseModel @ react-server-dom-webpack-client.browser.development.js:33
resolveModule @ react-server-dom-webpack-client.browser.development.js:749
processFullRow @ react-server-dom-webpack-client.browser.development.js:825
processBinaryChunk @ react-server-dom-webpack-client.browser.development.js:869
progress @ react-server-dom-webpack-client.browser.development.js:1476
app-index.js:23 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.
window.console.error @ app-index.js:23
logCapturedError @ react-dom.development.js:13856
update.callback @ react-dom.development.js:13882
callCallback @ react-dom.development.js:8194
commitCallbacks @ react-dom.development.js:8241
commitLayoutEffectOnFiber @ react-dom.development.js:20083
commitLayoutEffects @ react-dom.development.js:21529
commitRootImpl @ react-dom.development.js:24907
commitRoot @ react-dom.development.js:24760
commitRootWhenReady @ react-dom.development.js:23545
finishConcurrentRender @ react-dom.development.js:23429
performConcurrentWorkOnRoot @ react-dom.development.js:23322
workLoop @ index.js:10
flushWork @ index.js:10
performWorkUntilDeadline @ index.js:10
index.js:10 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)
parseModel @ react-server-dom-webpack-client.browser.development.js:33
resolveModule @ react-server-dom-webpack-client.browser.development.js:749
processFullRow @ react-server-dom-webpack-client.browser.development.js:825
processBinaryChunk @ react-server-dom-webpack-client.browser.development.js:869
progress @ react-server-dom-webpack-client.browser.development.js:1476
shaolinseed commented 1 year ago

facing this issue too when using yarn create r3f-app next my-app -ts

yct37785 commented 1 year ago

Just change "next" dependency to "^13.4.2" in your package.json. The issue originates from NextJS and the latest Next version fixes it.