Support requiring images

[svassr]

Having images integrated in some component like follow, I'm frequently receiving errors like the next following

<img src={require('../images/logo.png')} >

2016-11-15T21:22:54.636Z - error: [react-server.core.renderMiddleware] Error with element Unknown's lifecycle methods message=/Users/me/Projects/myProject/dev/images/logo.png: Unexpected character '�' (1:0), stack=SyntaxError: /Users/me/Projects/myProject/dev/images/logo.png: Unexpected character '�' (1:0)
> 1 | �PNG
    | ^
  2 | 
  3 | 
  4 | IHDR�8�h	pHYs

                    ��
    at Parser.pp.raise (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.getTokenFromCode (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/tokenizer/index.js:525:10)
    at Parser.readToken (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/tokenizer/index.js:154:19)
    at Parser.<anonymous> (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/plugins/jsx/index.js:49:20)
    at Parser.readToken (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/plugins/flow.js:179:22)
    at Parser.nextToken (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/tokenizer/index.js:144:19)
    at Parser.parse (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/parser/index.js:95:10)
    at parse (/Users/me/Projects/myProject/dev/node_modules/babylon/lib/index.js:45:47)
    at File.parse (/Users/me/Projects/myProject/dev/node_modules/babel-core/lib/transformation/file/index.js:532:15)
    at File.parseCode (/Users/me/Projects/myProject/dev/node_modules/babel-core/lib/transformation/file/index.js:617:20)
2016-11-15T21:22:54.636Z - fine: [react-server.core.renderMiddleware] renderElement.individual.Unknown ms=200

Looks like babel try to validate the png file content or something. Could it be a preloader? I already checked webpack module loaders and doesn't seem something is wrong there.

I'm using node v6.2.2 and the following modules

└── [email protected]
└── [email protected] 
└─┬ [email protected]
  └── [email protected] 

[jamesphe]

I also meet the problem，any one can help？

[drewpc]

I tracked this down a few weeks ago and concluded that react-server uses Webpack to produce the client side version of an isomorphic app. If you look here you'll see the webpackConfig code that is used to compile the client. Therefore, expecting Webpack to process require statements on the server side is not valid. After I get to a stable point in my app over the next few weeks, I'm going to tackle this because I have the same problems.

My temporary solution was to use nginx as a fronting HTTP server for my static assets and reverse proxy connections to react-server.

[drewpc]

Looks like I should've read through other issues before spending a bunch of time experimenting with this! See the comment here

[doug-wade]

@drewpc lemme know if there is somewhere you think it makes sense to have that explained in the docs -- I'm more than happy to add more formal documentation; users shouldn't have to dig through old issues to get what's going on.

[drewpc]

@doug-wade I appreciate the offer to update the documentation. I think time would be better spent adding Webpack to the server side. With an isomorphic app, the more in sync server/client features are, the easier it is to grasp. In my case, I was trying to use a third party, non-React JS library and spent hours trying to figure out why none of the Webpack loaders were working on the server side.

[kafeltz]

@drewpc did you manage to make it work without nginx? I have the same issue and its so annoying not being able to requiring and image with file-loader!.

I couldn't make it work yet.

[pr1ntr]

Same here, I can't require images through react. I also can't get the svg-loader to work either. I think part of this hardship is due to the fact that react-server gives absolutely no way to just have a folder of static assets without using a fronting-server. Wouldn't it be easier to just allow for express static middleware?