Webpack inline loader syntax not working

[davestewart]

Afternoon @CompuIves

I have a need to load in the text of an SVG so I can manipulate the curves. As such, I'm trying to use the raw-loader to load in the text verbatim.

Locally, I can force the loader for the required resource using !!raw-loader!./path/to.svg:

• https://github.com/davestewart/vuex-pathify/blob/develop/demo/src/assets/svg/index.js

However, in CodeSandbox, rather than loading the raw SVG as below...

... you see the text https://rawgit.com/davestewart/vuex-pathify/50eb7783457e6d1dcd438c8b41a43d1eed458759/demo/src/assets/svg/sunrise.svg:

• https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/develop/demo?initialpath=api/properties

In another branch, I renamed the SVGs to .svg.txt to see if that would work, and it did, but I'd rather not rename files if possible:

• https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/temp/raw-loader/demo?initialpath=api/properties

I'm no webpack expert, I have a working knowledge, and just piece things together as I need them.

Do you know how to work around this?

Many thanks :)

[CompuIves]

Hey! I think the behaviour is the wrong way in CodeSandbox, currently you will get raw text by using !raw-loader! but it should work with raw-loader!. Thanks for letting me know, I'll look into fixing it.

Oh wait, no I know what you mean. The raw loader is behaving wrongly for binary files. Ah that totally makes sense. I can make a fix for this tonight!

[davestewart]

Hey, that's great! Looking forward to it!

[lbogdan]

Hey @davestewart , I can't reproduce this, it seems to work here: https://codesandbox.io/s/v619vmqzl5 .

Do you have another reproduction URL, as I see that https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/develop/demo?initialpath=api/properties already has svg files renamed to .svg.txt?

@CompuIves Did you fix this and forgot to comment on / close this issue? 😄

[davestewart]

Hey @lbogdan

Thanks for looking at this!

Hmm, that's reassuring it works for you, but perplexing it doesn't work for me.

Here's a temp branch with the originally-named svg files:

https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/temp/svg/demo?initialpath=api/properties

Check src/assets/svg/weather/index.js for the requires.

It doesn't work for me.

Perhaps this is something to do with my webpack setup?

TBH, I don't really understand how CS works with webpack - some things seem to work, some things don't (is it documented anywhere?).

Perhaps my setup isn't working properly with CS?

[lbogdan]

CS uses some kind of internal webpack configs, defined for each template (create-react-app, vue-cli etc.). This configs are called presets in CS slang and can be found at https://github.com/CompuIves/codesandbox-client/tree/master/packages/app/src/sandbox/eval/presets . For example, the vue-cli preset is at https://github.com/CompuIves/codesandbox-client/blob/master/packages/app/src/sandbox/eval/presets/vue-cli/index.js .

Also, regarding #733, you can also see the aliases there, at lines 41-44.

[davestewart]

Ah! So that's why my webpack config wasn't running! Thanks for explaining that one :)

[lbogdan]

After a bit more digging around, it seems that .svg files are imported as binary from github (as they're basically considered images), meaning that they actually contain the URL (e.g. https://rawgit.com/davestewart/vuex-pathify/c0cb454cb7dc341727ad562c5227fcda7158d4b5/demo/src/assets/svg/travel/balloon.svg ) instead of the actual SVG text contents, so require('!raw-loader!./path/to/file.svg') is working, but the file contents is wrong (URL instead of text).

@CompuIves Should we maybe import SVGs as not binary? Or should we make RawTranspiler to actually load the URL for binary modules?

[lbogdan]

Made a naive approach to fix this here #770 . You can test your branch with the originally named svg files here http://pr770.cs.lbogdan.tk/s/github/davestewart/vuex-pathify/tree/temp/svg/demo?initialpath=#/api/properties .

[CompuIves]

Oii sorry I let this slip. Your solution is good @lbogdan, however I think it would be nice to send the isBinary info to the compiler someday and download based on that. Let's merge your PR in and keep this open until the isBinary check is added.

[lbogdan]

Yeah, the PR was more to illustrate the idea, not necessarily to be merged. Reopened.

[davestewart]

Hey @lbogdan @CompuIves - did this get deployed?

I'm getting the original behaviour still:

• https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/master/demo?initialpath=api/properties

[lbogdan]

Hey @davestewart ,

Unfortunately the PR was merged and then reverted, because it broke backwards compatibility - in vue-cli webpack template (and even other webpack templates, like create-react-app) importing image assets should return a string containing their URL (they're using url-loader). So I don't really see how we could do this now, without having configurable loaders.

[davestewart]

That's a shame, thanks for the info though.

One for the feature list!

[lbogdan]

But instead of using a webpack loader, knowing that when you import an .svg you get its URL, can't you load its contents on the application side?

[davestewart]

I could load it async, but I think the extra code added to the demo would begin to overshadow the original point. It's on the edge as it is!

Thanks though :)

[AWolf81]

I'm working on an export feature for Guppy and at the default CRA app the spinning svg is not loading - see this sandbox

Changing the file to a text file ending .txt or using import logo from "!raw-loader!./logo.svg" will fix the problem. I think that's OK for a work-around but it would be great if Codesandbox would support it.

[CompuIves]

Hey @AWolf81, that's so cool!

I'm deploying a fix for this in a minute, it seems like the wrong URL was returned.

[glen-84]

Is it supposed to be possible to use the file-loader in the create-react-app template?

I just get Error: Loader 'file-loader' could not be found.

[lbogdan]

Hey @glen-84 ,

I just get Error: Loader 'file-loader' could not be found.

Can you please point us to a sandbox experiencing that issue?

[glen-84]

@lbogdan I think it was this one, but there's some other sandbox error there now.

[kentcdodds]

I just got hit by this as well for some of my workshops. Here's a small example of something that works locally, but not in codesandbox: https://codesandbox.io/s/sharp-satoshi-f6iz2

[SaraVieira]

Better late than never 🚀

This has been fixed

[kentcdodds]

Good news! Hooray!