React server-side rendering vs webpack

Question

I'm new in server-side React rendering, and I can make simple isomorphic React applications with webpack for client side and Express for server side (through React of course). But now I have some trouble - I decided to use images in my project:

export default class JustImage extends Component {
  render() {
    return (
      <div>
        <img src={require("just_image.png")} />
      </div>
    );
  }
}

It code works like a charm for client, but my server side code when I try to render tell me this error:

just_image.png: Unexpected character '�'

As I understand, Node.js doesn't know anything about webpack loaders, so can't load image right. Because I'm new in React and server-side rendering at all I want to know if there are any standard ways to fix this problem - not images only, I use images(PNG/JPEG/JPG/ICO), SVG, SASS/LESS/CSS. Thanks in advance.

Community · Accepted Answer · 2017-05-23 10:31:06Z

3

There are two ways to solve the problem, AFAIK:

Use the webpack for your server code as well. In your webpack configuration for server, you can use the same loader you did for your client. For example, you can use url-loader or file-loader for image files.
```
{
  test: /\.(jpe?g|png|gif|svg)$/i,
  loader: 'url-loader',
  options: {
    limit: 8192,
  },
}
```

You can hack the require.extensions at the top of your server code.

if (process.env === 'development') {
  require.extensions['.png'] = () => {}
}

I posted a similar question here not getting an answer :)

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Feb 20, 2017 at 18:28

Ming Soon

1,0182 gold badges12 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

malcoauri Over a year ago

Thanks for answer. But I don't understand how I can use webpack for server code as well. Please, give me some example.

Ming Soon Over a year ago

The start script can be webpack --watch --config config/your-server-config.js && babel-node dist/server.js. For my personal project, I opted to go with the second option, because re-bundling the server code every time code changes takes some time and not suitable for development, I think. For sample code/configuration: github.com/ming-soon/mern-starter

malcoauri Over a year ago

But if you will use 2 option, your server-side code will be broken right?

Ming Soon Over a year ago

No, it has no side effects, besides that you have add the above code at the very beginning of your server code.

Mateusz Over a year ago

Try googling for a react starter kit that uses SSR, and investigate the webpack configs, it's usually done this way.

|

Faris · Accepted Answer · 2017-04-17 08:04:41Z

0

I learned a lot about this by reading the react-starter-kit code, it is basically what Ming Soon told you, you have to compile your server side code with webpack, you will need multiple webpack configs.

answered Apr 17, 2017 at 8:04

Faris

5432 silver badges8 bronze badges

Collectives™ on Stack Overflow

React server-side rendering vs webpack

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related