search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.68k stars 26.61k forks source link

Error during SSR Rendering #44278

Open MattL-NZ opened 1 year ago

MattL-NZ commented 1 year ago

Verify canary release

Provide environment information

Operating System: Platform: win32 Arch: x64 Version: Windows 10 Enterprise Binaries: Node: 16.15.0 npm: N/A Yarn: N/A pnpm: N/A Relevant packages: next: 13.1.0 eslint-config-next: 13.1.0 react: 18.2.0 react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

N/A

To Reproduce

After updating to Next.js 13.1 I am getting the below SSR error 

  Error during SSR Rendering
  ReferenceError: scrapeMotionValuesFromProps is not defined
    at <unknown> (/node_modules/framer-motion/dist/es/render/html/config-motion.mjs:7:9) [<unknown> (.next\server\app\chunks\ssr\_9fb602.js:68506:9)]
    at Module.[project-with-next]/node_modules/framer-motion/dist/es/render/html/config-motion.mjs (ecmascript, ssr) (.next\server\app\chunks\ssr\_9fb602.js:68512:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:66351:165)
    at Module.[project-with-next]/node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs (ecmascript, ssr) (.next\server\app\chunks\ssr\_9fb602.js:66370:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:63199:173)
    at Module.[project-with-next]/node_modules/framer-motion/dist/es/render/dom/motion.mjs (ecmascript, ssr) (.next\server\app\chunks\ssr\_9fb602.js:63230:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:63030:154)
    at Module.[project-with-next]/node_modules/framer-motion/dist/es/index.mjs (ecmascript, ssr) (.next\server\app\chunks\ssr\_9fb602.js:63190:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:62542:136)
    at Module.[project-with-next]/app/page.tsx (ecmascript, ssr) (.next\server\app\chunks\ssr\_9fb602.js:62715:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\rsc\app_page.tsx.js:18:92)
    at Module.[project-with-next]/app/page.tsx/client-proxy.tsx (ecmascript, rsc) (.next\server\app\chunks\rsc\app_page.tsx.js:32:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\rsc\app_page.tsx.js:5:118)
    at Object.[project-with-next]/app/page.tsx (ecmascript, rsc) (.next\server\app\chunks\rsc\app_page.tsx.js:11:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at <unknown> (.next\server\app\chunks\rsc\app_page.tsx_layout-entry.tsx.js:24:92)
    at Module.[project-with-next]/app/page.tsx/layout-entry.tsx (ecmascript, rsc) (.next\server\app\chunks\rsc\app_page.tsx_layout-entry.tsx.js:37:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at getOrInstantiateModuleFromParent (.next\server\app\chunks\ssr\_9fb602.js:114960:12)
    at esmImport (.next\server\app\chunks\ssr\_9fb602.js:114689:20)
    at Module.default (.next\server\app\chunks\rsc\app_page.tsx_layout-entry.tsx_with-client-chunks.js:6:18)
    at <unknown> (/app/entry:20:21) [<unknown> (.next\server\app\chunks\ssr\_9fb602.js:157:165)]
    at Module.[project-with-next]/app/entry (ecmascript, ssr) (.next\server\app\chunks\ssr\_9fb602.js:349:3)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114879:21)
    at runModuleExecutionHooks (.next\server\app\chunks\ssr\_9fb602.js:114918:5)
    at instantiateModule (.next\server\app\chunks\ssr\_9fb602.js:114878:5)
    at instantiateRuntimeModule (.next\server\app\chunks\ssr\_9fb602.js:115468:12)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:114521:1)
    at <unknown> (.next\server\app\chunks\ssr\_9fb602.js:115519:39)
    at <anonymous>
    at Object.registerChunk [as push] (.next\server\app\chunks\ssr\_9fb602.js:115519:25)
    at Object.<anonymous> (.next\server\app\chunks\rsc\node_modules_next_dist_client_components_app-router.js:1:41)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (.next\server\app\index.js:23:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at <unknown> (node:internal/main/run_main_module:17:47)

Package.json

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@next/font": "^13.0.6",
    "@react-google-maps/api": "^2.17.1",
    "@tailwindcss/forms": "^0.5.3",
    "@types/node": "18.11.11",
    "@types/react": "18.0.26",
    "@types/react-dom": "18.0.9",
    "autoprefixer": "^10.4.13",
    "eslint": "8.29.0",
    "eslint-config-next": "^13.1.0",
    "framer-motion": "^7.10.3",
    "next": "^13.1.0",
    "postcss": "^8.4.19",
    "prettier": "^2.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.2.4",
    "typescript": "4.9.4"
  },
  "devDependencies": {
    "prettier-plugin-tailwindcss": "^0.2.1"
  }
}

Describe the Bug

Looks to be a bug between turbo and potentially Framer Motion. Having the two packages installed causes the issue.

Expected Behavior

No error message should be shown and the site should render correctly.

Which browser are you using? (if relevant)

Chrome Version 108.0.5359.125

How are you deploying your application? (if relevant)

No response

akdombrowski commented 1 year ago

Getting the same error trying to use Chakra-UI. I just took the turbopack app playground and tried to wrap the main layout with ChakraProvider and add the use client directive. Tried adding directive to main layout in root app directory and to all the layouts. https://github.com/akdombrowski/howyadoinbuddy

kratos-respawned commented 1 year ago

I am also getting the same error while using framer motion with turbopack