Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does Shopify Polaris support Server Side Rendering (SSR)? #11888

Open
artooras opened this issue Apr 12, 2024 · 0 comments
Open

Does Shopify Polaris support Server Side Rendering (SSR)? #11888

artooras opened this issue Apr 12, 2024 · 0 comments
Labels
Bug Something is broken and not working as intended in the system. untriaged

Comments

@artooras
Copy link

artooras commented Apr 12, 2024 •
edited

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 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'
}

The code in my layout.tsx is quite simple:

import {AppProvider} from '@shopify/polaris'
import translations from '@shopify/polaris/locales/en.json'
import '@shopify/polaris/build/esm/styles.css'


export default function RootLayout({children}: {children: React.ReactNode}) {

  return (
    <html lang='en'>
      <head>
        <meta name='shopify-api-key' content={process.env.NEXT_PUBLIC_SHOPIFY_API_KEY} />
        <script src='https://cdn.shopify.com/shopifycloud/app-bridge.js' />
      </head>
      <body>
        <AppProvider i18n={translations}>
          {children}
        </AppProvider>
      </body>
    </html>
  )
}

Steps to reproduce

Sandbox

Are you using React components?

Yes

Polaris version number

12.21.0

Browser

Firefox 124.0.2

Device

Macbook Air
@artooras artooras added Bug Something is broken and not working as intended in the system. untriaged labels Apr 12, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Something is broken and not working as intended in the system. untriaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@artooras