You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Answers in this issue by @ry5n seem to suggest that Polaris should be fully SSR compatible. However, I get an error when I try to do so.
Expected behavior
Polaris to be rendered on the server without errors.
Actual behavior
I'm using Shopify Polaris in a Next.js (v14) app using their App router, allowing for easy switching between SSR and CSR by removing or adding the 'use client' directive in the file. So, when I render the layout.tsx of my app using 'use client', it works. However, when I remove it thus forcing the route to render on the server, I get the following error (it seems that Polaris uses React Context internally...):
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_0__.createContext) is not a function
at eval (webpack-internal:///(rsc)/./node_modules/@shopify/polaris/build/esm/utilities/use-theme.js:17:87)
at (rsc)/./node_modules/@shopify/polaris/build/esm/utilities/use-theme.js (/my_path/.next/server/vendor-chunks/@shopify.js:2075:1)
at __webpack_require__ (/my_path/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./node_modules/@shopify/polaris/build/esm/components/AppProvider/AppProvider.js:8:81)
at (rsc)/./node_modules/@shopify/polaris/build/esm/components/AppProvider/AppProvider.js (/my_path/.next/server/vendor-chunks/@shopify.js:1767:1)
at __webpack_require__ (/my_path/.next/server/webpack-runtime.js:33:42)
at eval (webpack-internal:///(rsc)/./app/layout.tsx:7:74)
at (rsc)/./app/layout.tsx (/my_path/.next/server/app/page.js:373:1)
at Function.__webpack_require__ (/my_path/.next/server/webpack-runtime.js:33:42)
at runNextTicks (node:internal/process/task_queues:60:5)
at listOnTimeout (node:internal/timers:540:9)
at process.processTimers (node:internal/timers:514:7)
at async eq (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:402641)
at async tt (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406205)
at async tr (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:35:406787)
at async tl (/my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2057)
at async /my_path/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:36:2596 {
digest: '2242913041'
}
Summary
Answers in this issue by @ry5n seem to suggest that Polaris should be fully SSR compatible. However, I get an error when I try to do so.
Expected behavior
Polaris to be rendered on the server without errors.
Actual behavior
I'm using Shopify Polaris in a Next.js (v14) app using their App router, allowing for easy switching between SSR and CSR by removing or adding the
'use client'
directive in the file. So, when I render thelayout.tsx
of my app using'use client'
, it works. However, when I remove it thus forcing the route to render on the server, I get the following error (it seems that Polaris uses React Context internally...):The code in my
layout.tsx
is quite simple:Steps to reproduce
Sandbox
Are you using React components?
Yes
Polaris version number
12.21.0
Browser
Firefox 124.0.2
Device
Macbook Air
The text was updated successfully, but these errors were encountered: