Build process crashes during pre-rendering when using vite-plugin-ssr with Icon component from @mdi/react #830

ruigouveiamaciel · 2023-04-29T12:07:59Z

ruigouveiamaciel
Apr 29, 2023

Issue Description

When using vite-plugin-ssr to pre-render a page that includes an <Icon path={...} /> component from the @mdi/react library, the build process crashes during pre-rendering. This issue does not occur in other SSR frameworks such as Next.js, Nuxt.js and Astro.

The discussion #704 seems to be the exact same error as this issue but it was deemed an "user land error".

Expected Behavior

The build process should successfully pre-render the page that includes an <Icon path={...} /> component without any errors.

Actual Behavior

The build process crashes during pre-rendering when an <Icon path={...} /> component is included in the page.

Reproduction Steps

I have prepared a StackBlitz that follows the following reproduction steps:

Enable pre-rendering in vite.config.ts

// vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import ssr from 'vite-plugin-ssr/plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    ssr({ prerender: true, includeAssetsImportedByServer: true }),
  ],
});

Include an <Icon path={...} /> component from the @mdi/react library in a page component.

// src/pages/doesnt-work.page.tsx

import { mdiAbTesting } from "@mdi/js";
import Icon from "@mdi/react";


export function Page() {
  return (
    <Icon path={mdiAbTesting} />
  );
}

Run the build process with the command npm run build

Additional Information

This issue appears to be specific to vite-plugin-ssr. Other SSR frameworks, such as Next.js, Nuxt.js and Astro, do not encounter this issue when pre-rendering pages that include <Icon path={...} /> components from the @mdi/react library.

As a temporary workaround, the issue can be resolved by rendering the component only on the client-side using conditional rendering, such as the NoSSR component used in the example below. However, this defeats the point of pre-rendering a page.

// works.page.tsx

import { mdiAbTesting } from '@mdi/js';
import Icon from '@mdi/react';
import { useEffect, useState } from 'react';

type NoSSRProps = React.PropsWithoutRef<{
  children?: React.ReactNode;
}>;

const NoSSR: React.FC<NoSSRProps> = ({ children }) => {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return isClient ? <>{children}</> : null;
};

export function Page() {
  return (
    <NoSSR>
      <Icon path={mdiAbTesting} />
    </NoSSR>
  );
}

Error Message + Error Stack

❯ npm run build
$ tsc && vite build
vite v4.3.3 building for production...
✓ 157 modules transformed.
dist/client/vite-plugin-ssr.json                                           0.16 kB │ gzip:  0.14 kB
dist/client/manifest.json                                                  2.32 kB │ gzip:  0.45 kB
dist/client/assets/chunks/chunk-4ed993c7.js                                0.00 kB │ gzip:  0.02 kB
dist/client/assets/entries/src_pages_doesnt-work.page.18e030ae.js          0.16 kB │ gzip:  0.14 kB
dist/client/assets/entries/src_pages_works.page.609e92a9.js                0.31 kB │ gzip:  0.23 kB
dist/client/assets/entries/entry-server-routing.2e8097b5.js                2.52 kB │ gzip:  1.16 kB
dist/client/assets/chunks/chunk-8bc41161.js                                7.40 kB │ gzip:  2.80 kB
dist/client/assets/chunks/chunk-33c17f51.js                                7.71 kB │ gzip:  2.87 kB
dist/client/assets/chunks/chunk-55f9c175.js                               28.76 kB │ gzip: 10.09 kB
dist/client/assets/entries/entry-client-routing.65682bcb.js               35.32 kB │ gzip: 11.64 kB
dist/client/assets/entries/src_renderer_default.page.client.726fcd61.js  134.86 kB │ gzip: 43.56 kB
vite v4.3.3 building SSR bundle for production...
✓ 11 modules transformed.
dist/server/package.json                                  0.02 kB
dist/server/importBuild.cjs                               0.35 kB
dist/server/entries/src_pages_doesnt-work-page.mjs        0.22 kB
dist/server/importBuild.mjs                               0.23 kB
dist/server/entries/src_pages_works-page.mjs              0.53 kB
dist/server/entries/src_renderer_default-page-server.mjs  1.67 kB
dist/server/pageFiles.mjs                                 3.22 kB
✓ built in 112ms
vite-plugin-ssr v0.4.119 pre-rendering HTML...
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at Ib (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:72:155)
    at W (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:67:482)
    at W (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:71:304)
    at W (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:67:482)
    at W (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)
    at Ib (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:67:482)
    at W (file:///home/projects/vitejs-vite-crvbkk/node_modules/react-dom/cjs/react-dom-server-legacy.node.production.min.js:73:89)

Answered by brillout

Apr 29, 2023

It’s possibly an ESM-CJS compatibility thing. I’d inspect how mdi exports the components and import them accordingly.

Also check https://vite-plugin-ssr.com/common-issues#npm-packages-containing-invalid-code.

View full answer

brillout · 2023-04-29T14:53:33Z

brillout
Apr 29, 2023
Maintainer

It’s possibly an ESM-CJS compatibility thing. I’d inspect how mdi exports the components and import them accordingly.

Also check https://vite-plugin-ssr.com/common-issues#npm-packages-containing-invalid-code.

1 reply

ruigouveiamaciel Apr 29, 2023
Author

Thank you for your input. I am aware of packages containing invalid code but I didn't think about adding the @mdi packages to noExternal because they work perfectly when running in SPA render mode.

I tried adding both @mdi/js and @mdi/react to noExternal but I was faced with the following error:

6:06:36 PM [vite] Error when evaluating SSR module /@fs/home/rui/Projects/binedge-website/node_modules/@mdi/react/Icon.js:
|- ReferenceError: module is not defined
    at eval (/@fs/home/rui/Projects/binedge-website/node_modules/@mdi/react/Icon.js:3:14)
    at instantiateModule (file:///home/rui/Projects/binedge-website/node_modules/vite/dist/node/chunks/dep-24daf00c.js:54351:15)

I then tried to look through the source code of both of those packages for obvious errors but I found none.

I decided to try adding color to noExternal, to try and see if the problem was only related to @mdi/js and @mdi/react. I was then again faced with the following error:

7:04:06 PM [vite-plugin-ssr] HTTP Request ERR /
Error: [[email protected]][Bug] You stumbled upon a bug in vite-plugin-ssr's source code. Go to https://github.com/brillout/vite-plugin-ssr/issues/new and copy-paste this error. (The error's stack trace is usually enough to fix the problem). A maintainer will fix the bug (usually under 24 hours). Don't hesitate to reach out as it makes vite-plugin-ssr more robust.
    at get (/home/rui/Projects/binedge-website/node_modules/vite-plugin-ssr/dist/cjs/utils/require-shim.js:72:41)
    at eval (/@fs/home/rui/Projects/binedge-website/node_modules/color/index.js:3:34)
    at instantiateModule (file:///home/rui/Projects/binedge-website/node_modules/vite/dist/node/chunks/dep-24daf00c.js:54351:15)

To further clarify this issue, I then tried adding only @chakra-ui/react to see if it would work, and it did.

I am not sure if any of this informations helps with anything but here it is. I have decided to not blow my head over this and to use svgr instead of @mdi/js.

brillout · 2023-04-29T18:38:58Z

brillout
Apr 29, 2023
Maintainer

Reproduction reposted on GitHub: https://github.com/brillout/vps-mdi.

0 replies

ruigouveiamaciel · 2023-04-29T18:47:08Z

ruigouveiamaciel
Apr 29, 2023
Author

Further development on this, I tried installing vite-plugin-svgr and import an SVG. I got the exact the same error as the original post but this time it occured during development and so I got the full error stack instead of the production error stack:

// index.page.tsx
import { ReactComponent as MyIcon} from "../assets/icon.svg";

export function Page() {
  return <MyIcon />;
}

Error

> vite


  VITE v4.3.1  ready in 337 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at index.page.tsx:4.
    at Page
    at EnvironmentProvider (file:///home/rui/Projects/binedge-website/node_modules/@chakra-ui/react-env/dist/chunk-23XYWYLU.mjs:24:11)
    at ColorModeProvider (file:///home/rui/Projects/binedge-website/node_modules/@chakra-ui/color-mode/dist/chunk-4DEUOPYU.mjs:22:5)
    at ThemeProvider (/home/rui/Projects/binedge-website/node_modules/@emotion/react/dist/emotion-element-b63ca7c6.cjs.dev.js:106:21)
    at ThemeProvider (file:///home/rui/Projects/binedge-website/node_modules/@chakra-ui/system/dist/chunk-3ZTTLJBV.mjs:13:11)
    at ChakraProvider (file:///home/rui/Projects/binedge-website/node_modules/@chakra-ui/provider/dist/chunk-5PBJXT35.mjs:15:5)
    at ChakraProvider2 (file:///home/rui/Projects/binedge-website/node_modules/@chakra-ui/react/dist/chunk-DGNA6VRZ.mjs:13:5)
    at PageContextProvider (/src/renderer/usePageContext.tsx:8:32)
    at PageShell (/src/renderer/PageShell.tsx:27:22)
7:35:18 PM [vite-plugin-ssr] HTTP Request ERR /
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at renderElement (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6047:9)
    at renderNodeDestructiveImpl (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderIndeterminateComponent (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5789:7)
    at renderElement (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at renderNode (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6263:12)
    at renderChildrenArray (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6215:7)
    at renderNodeDestructiveImpl (/home/rui/Projects/binedge-website/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6145:7)

3 replies

ruigouveiamaciel Apr 29, 2023
Author

Since vite-plugin-svgr works with plain Vite + React, I think it's safe to say it's not a "packages with broken code" issue.

ruigouveiamaciel Apr 29, 2023
Author

I'm sorry, it seems that the reason vite-plugin-ssr was due to my own stupidity, I made a typo on the import path.

I will be setting this discussion as answered but it might be worth looking into why @mdi/js, @mdi/react and colors packages don't work when placed in "noExternal". All these packages work fine in SPA mode and the colors package works well in SSR when it is not in "noExternal". I'm not sure if this would be a problem related to Vite itself or VPS.

brillout Apr 30, 2023
Maintainer

All transpilation is done by Vite, including SSR transpilation. So it's more of a Vite/ecosystem problem. That said, I definitely agree that things should be more smooth. Not everything is within my realm of influence and I'll see what I can do. And, yes, I've started digging into mdi to have a better picture of what's going on.

Contributions welcome, see #621 (comment).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build process crashes during pre-rendering when using vite-plugin-ssr with Icon component from @mdi/react #830

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 4 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Build process crashes during pre-rendering when using vite-plugin-ssr with Icon component from @mdi/react #830

ruigouveiamaciel Apr 29, 2023

Issue Description

Expected Behavior

Actual Behavior

Reproduction Steps

Additional Information

Error Message + Error Stack

Replies: 3 comments · 4 replies

brillout Apr 29, 2023 Maintainer

ruigouveiamaciel Apr 29, 2023 Author

brillout Apr 29, 2023 Maintainer

ruigouveiamaciel Apr 29, 2023 Author

Error

ruigouveiamaciel Apr 29, 2023 Author

ruigouveiamaciel Apr 29, 2023 Author

brillout Apr 30, 2023 Maintainer

ruigouveiamaciel
Apr 29, 2023

Replies: 3 comments 4 replies

brillout
Apr 29, 2023
Maintainer

ruigouveiamaciel Apr 29, 2023
Author

brillout
Apr 29, 2023
Maintainer

ruigouveiamaciel
Apr 29, 2023
Author

ruigouveiamaciel Apr 29, 2023
Author

ruigouveiamaciel Apr 29, 2023
Author

brillout Apr 30, 2023
Maintainer