Error during SSR Rendering

[MattL-NZ]

Verify canary release

• I verified that the issue exists in the latest Next.js 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]

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]

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

[nextjs-bot]

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

[nextjs-bot]

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!