Vite update issue with emotion dependencies.

[tylerscave]

When updating to use the new vite dev server (this PR), I was able to get everything working on the majority of our site, but ran into an issue with an installed npm package with a dependency on emotion.

Some of the pages on our site are created in Builder io (our CMS/site-builder). Our installed "@builder.io/react": "^3.2.6" package has a dependency on @emotion/core, which doesn't seem to be playing nicely with the new vite configuration.

The builder pages work as expected when using site navigation, but going to a URL directly, or doing a page refresh causes the following 500 error:

TypeError: Cannot read properties of null (reading 'registered')
    at render2 (/node_modules/@builder.io/react/node_modules/@emotion/core/dist/emotion-element-04d85134.browser.esm.js?v=b3b8945c:74:65)
    at /node_modules/@builder.io/react/node_modules/@emotion/core/dist/emotion-element-04d85134.browser.esm.js?v=b3b8945c:105:10
    at /node_modules/@builder.io/react/node_modules/@emotion/core/dist/emotion-element-04d85134.browser.esm.js?v=b3b8945c:26:14
    at renderContextConsumer (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7357:29)
    at renderElement (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7478:19)
    at renderNodeDestructive (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7626:19)
    at finishFunctionComponent (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7283:13)
    at renderForwardRef (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7341:11)
    at renderElement (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7456:17)
    at renderNodeDestructive (/node_modules/.vite/deps_ssr/react-dom_server.js?v=b3b8945c:7626:19)

This is caused due to a null cache object in the emotion file...

I understand this may be an issue with the @builder.io/react package and that I may need to file an issue with them, but I wanted to file it here in case I'm missing some vite configuration (I'm not a vite wizard just yet 😅).

Something else that might be related, are the number of dependencies I needed to add to our optimizeDeps in our vite.config. Understandably, our project has quite a few libraries installed, but I ran into a lot of issues with ReferenceError: module is not defined for things in the dependency tree (maybe this is normal?)

  ssr: {
    optimizeDeps: {
      include: [
        'typographic-base/index',
        'textr',
        'hash-sum',
        'react-slick',
        'fast-deep-equal/react',
        'js-cookie',
        'copy-to-clipboard',
        'prop-types',
        'snakecase-keys',
      ],
    },
  },

I've attempted to add @builder.io/react and @emotion/core to that list, but that has not solved the issue...

Thanks in advance for any guidance on this 🙏

[tylerscave]

Update: I reached out to Builder.io and it seems their their Gen2 SDK should solve this... I'm in the process of updating/upgrading our project and will close this thread if its successful.

[ignacio-dev]

Hey, any luck with this?

[tylerscave]

This was resolved by upgrading to the Builder Gen2 SDK --> Closing issue...