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.

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

[Remix SPA] Error loading .svg assets imported in npm package #8606

Closed
mkarajohn opened this issue Jan 26, 2024 · 4 comments
Closed

[Remix SPA] Error loading .svg assets imported in npm package #8606

mkarajohn opened this issue Jan 26, 2024 · 4 comments

Comments

@mkarajohn
Copy link

mkarajohn commented Jan 26, 2024

Reproduction

The reproduction project is a very slimmed down approximation of the actual project that I work on.

My project is an SPA setup with Vite and I tried migrating over to Remix SPA, as a 1st step towards an eventual full fledged migration to Remix.

For the migration I followed the guide and any relevant material.

https://stackblitz.com/edit/vitejs-vite-u1xsya

System Info

System:
    OS: Linux 6.2 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (16) x64 AMD Ryzen 7 PRO 4750U with Radeon Graphics
    Memory: 1.88 GB / 14.84 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.18.2 - ~/.nvm/versions/node/v18.18.2/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v18.18.2/bin/npm
    bun: 1.0.0 - ~/.bun/bin/bun
  Browsers:
    Chrome: 120.0.6099.216
    Chromium: 120.0.6099.199

Used Package Manager

yarn

Expected Behavior

In my application I am using a package called @orfium/toolbox. One of the exported components of that package imports an .svg asset, which is also included in the package (the import can be found here)

The expected behaviour is that when I run the dev server using the remix vite:dev command the project should be built and served correctly.

This is the case when the project is run as a plain Vite SPA, without using the Remix SPA plugin; everything is bundled and served correctly

Actual Behavior

Whenever the remix vite:dev command is used, I am getting the following error:

Caution

Unknown file extension ".svg" for /home/projects/vitejs-vite-u1xsya/node_modules/@orfium/toolbox/dist/esm/assets/orfium_logo.svg

(see the reproduction stackblitz)

.svg loading seems to work only when the import happens in the user's code directly as seen in this working stackblitz.

The problem seems to appear only when an external package (@orfium/toolbox in this case) is importing non-js files.

@brophdawg11
Copy link
Contributor

Cross-linking to the discussion that prompted this issue #8534

@brophdawg11
Copy link
Contributor

It turns out SVG issue is not actually a Vite issue - it's a complaint coming from node during the server render for Remix SPA mode. During dev (remix vite:dev), Remix runs a dev server for you to render the root.tsx HydrateFallback and to provide HMR/HDR support. In a prod build (remix vite:build) Remix still builds a server handler and does a single render to output an index.html file from your HydrateFallback.

In your case, the internal require's of SVGs are not being internalized - and this node is complaining when it encounters a require('something.svg) at runtime (the vite build runs without issue). You can fix this and tell Vite to internalize all of your dependencies for the server build via the ssr.noExternal config: https://vitejs.dev/config/ssr-options#ssr-noexternal.

Once you do that, a separate ReferenceError: module is not defined error surfaces, so I think there's still some ESM/CJS issues in your project/dependencies.

It's hard to narrow it down in this setup because your @orfium/toolbox has a lot of internal dependencies. I was having issues reproducing locally without also installing sentry, another orfium package, a few emotion packages, etc. I think my recommendation would be to start with a fresh Remix SPA template, and start brining in dependencies one by one to match your old setup - and along the way you'll be able to see which incremental step causes issues and try to dig into that specific dependency - which would also provide a more focused reproduction case if the issue turns out to be something in the remix vite plugin.

If you have packages that don't play nicely with ESM (there are a lot of these) then you could also try removing type: 'module' from your package.json and see if that helps resolve dependencies as CJS instead.

@brophdawg11 brophdawg11 removed their assignment Jan 29, 2024
@pcattori
Copy link
Contributor

@pcattori pcattori closed this as completed Feb 5, 2024
@guenyoobaywa
Copy link

@pcattori I seem to have the same problem and the troubleshooting section didn't help.

I've a similar setup:

I have a package, which expects "@package/icons" to exist in the repository and in that packages lib build, it imports it:

import icons from "@package/icons/lib/icons/icons.symbols.svg";

In my Library, everything works fine.

In Remix, when I start my dev or build, I get the error:
"[vite] Internal server error: Unknown file extension ".svg"

In my vite.config.ts I have an alias:

'@package/icons': resolve(__dirname, './node_modules/@package/icons'),

I've tried using the cjsInterop Package (however, I'm trying to reference a node_module svg here, not a JS File).

When I try to incorporate @brophdawg11 's suggestion with ssr.noExternal, I also get the error:
[vite] Internal server error: module is not defined

So I'm currently at an impasse and can confirm that I, too, have the same problem importing non-JS-Files from external packages.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants