(Webpack) Fail to load PNG (or any other) images

[sslash]

Not sure what I am doing something wrong, but my webpack config is pretty straight forward:

module:  { loaders: [ {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ]}

in a .js file:

let logo = require('./logo.png');

The error I am getting:

/Users/micgunnu/code/sap/routes/routes-rewrite/react-isomorphic-starterkit/node_modules/babel-core/lib/babel/transformation/file/index.js:604
      throw err;
            ^
SyntaxError: /Users/micgunnu/code/sap/routes/routes-rewrite/react-isomorphic-starterkit/src/shared/pages/logo.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 |
  3 |

[RickWong]

Did you change that config in both webpack files?

[sslash]

yes

[Semigradsky]

Looks like babel/register expects correct js file in require

[RickWong]

Ah... it makes sense. As it currently works, babel/register does not read from the config files. You'll need to configure it in babel.server.js, or use the require("url?...") syntax.

Right now I'm investigating the option to go back to webpack-built server builds with hot-reloading, instead of using babel/register. Should make this problem go away.

[sslash]

I see. That was the reason I wanted to check out this repo in the first place though. So I could avoid building a huge React bundle and running that from Node (babel drops optimisation when files get too big, for instance)

[RickWong]

@sslash I'm using a technique by James Long @jlongster to exclude node_modules from the server build, and let node require them at runtime.

[sslash]

Yes. Still these bundles tend to be quite large. However, using your current setup in this repo, I am still not able to require in png files. I am using require("url?./logo.png") as you propose, but it doesnt seem to locate the file. I am certain it is in the same directory and that I have included the url-loader properly. Are you able to make it work @RickWong?

[RickWong]

Haven't had a lot of time lately to release this. But the basic builds I've got aren't large at all. I'm talking about roughly 20 KB taking 1100 ms to build from a cold cache. Still having some issues with hot-reloading though...

[ericfong]

I try to remove babel/register in my project.
ES6 vs fast-reload
I go for fast-reload

[goldensunliu]

any update on this?

[Traviskn]

the webpack isomorphic tools package may help with loading images, although it will require a bit of setup. It was made to solve the problem of require() 'ing images and css on the server: https://github.com/halt-hammerzeit/webpack-isomorphic-tools

[calvinl]

@sslash: I'm having the same issue with babel-core/register on the server side. Did you ever find a solution?

[sslash]

nah haven't looked into this issue sry

[stkrzysiak]

When I ran into this, I was running tests from the CLI. The solution that I found was to use require.extensions via a custom compiler. Not sure if this is of any help @calvinl or others, but I thought I would share. Here is an issue that outlines the fix in more detail: bruderstein/unexpected-react#1

[RickWong]

It took a while but the server-side now uses Webpack too. That means many webpack loaders should work on the server as well including url-loader and css-loader. (Piping is also gone, the server gets instant code updates from Webpack HMR!)

So please try release ^5.0.0.