Importing PNG/SVG from node_modules failing

[jkjustjoshing]

What version of Remix are you using?

1.1.3

Steps to Reproduce

1. Install uswds NPM module
2. In app/routes/index.tsx, import an image with import img from 'uswds/img/circle-124.png' and put on the page with <img src={img} alt="" />
3. Run dev server npm run dev and load up the page.

Expected Behavior

Circle image should be displayed

Actual Behavior

I get the following error:

C:\Users\jkjustjoshing\Documents\myrepo\node_modules\uswds\dist\img\circle-124.png:1
�PNG


SyntaxError: Invalid or unexpected token
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\Users\jkjustjoshing\Documents\myrepo\build\index.js:446:36)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)

[jkjustjoshing]

Additional reproduction - https://codesandbox.io/s/gallant-satoshi-mhrnz?file=/app/routes/index.tsx

[jacob-ebey]

I believe what we want is to essentially "bundle" any file extension we support loaders for. Essentially this: https://github.com/remix-run/remix/blob/dev/packages/remix-dev/compiler/plugins/serverBareModulesPlugin.ts#L46

I believe these are being "externalized" currently and for assets I'm not sure what that means for the output bundle.

[machour]

Still reproducible with 1.11.1

[jamesarosen]

The serverBareModulesPlugin.ts link above is broken. https://github.com/remix-run/remix/blob/212f17cfd4f51df27a23575273828f30c1d072d3/packages/remix-dev/compiler/plugins/serverBareModulesPlugin.ts is a more recent version of the relevant module.

[augustskare]

Any updates on this? I'm encountering the same issue.

Is there a short term solution where I can patch Remix to support importing .svg files as urls?

[machour]

@augustskare here's a PR doing what you want, but for CSV files: https://github.com/remix-run/remix/pull/3920/files
This + patch-package should lead you to a workaround until proper support gets added

[augustskare]

@machour Not sure I understand what to do. .svg is already set up using the "file" loader https://github.com/kayac-chang/remix/blob/main/packages/remix-dev/compiler/loaders.ts#L25

[kiliman]

@augustskare Remix only imports assets from inside the /app folder.

import imgPath from '~/assets/image.png'

I don't believe you can import an image directly from node_modules. You may need to copy those images to your app folder.

[augustskare]

I guess that's why my current workaround works:

import svgPath from "~/../node_modules/path/to/svg.svg";

[kiliman]

Ah. Cool to know that you can use relative paths to escape outside the app folder. Glad you found a workaround.

[augustskare]

It's a bit more complex then that 🙈 I have an internal design system/component library that is importing that svg file. Ended up copying over the component so that I could modified the import. I can live with that for now. Any idea if this is something that will be supported in Remix any time soon?

[kiliman]

I'm not sure. They've been able to move quickly by not exposing the compiler internals quite yet. Perhaps they'll relax that more as they move to v2 release.

[augustskare]

Found a better workaround! ✨ Adding the package to the serverDependenciesToBundle array (in Remix config) solved the issue for me

[HerrBertling]

@augustskare Thank you SO much for this issue/thread. It is quite ugly, but importing the SVG file with a relative path going into the node_modules folder did the trick for me 👍

[lpsinger]

Definitely still broken in 1.18.1.

[pcattori]

Fixed by #6813

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-a179aa7-20230809 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-b1149bb-20230810 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!