server side rendering switch to preact webpack.config.js issue

I am converting my project from React to Preact. Some React.Component is shared for client side and server side rendering.

The following only solves the client side rendering when the dependencies are bundling together

"resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }

As for the server side, I don’t need the bundling because it will be run by node. How can I config the webpack.config.js to resolve require("react-dom/server"), require("react-dom") and require("react"). I don’t want to change all require statement from react-dom to preact-compat. I dont want the preact-compat bundle with my server side rendering code.

[thangngoc89]

You can transpile your code with babel using module-alias

---

@wood1986 why the downvote? If you dont want to touch your server code, than transpiling with babel is your best bet. No change in the codebase require. Or you can bundle everything with webpack (commonjs mode) and execute the bundle for SSR

[developit]

@thangngoc89 is correct - the best way to properly alias in Node (without webpack) is module-alias:

require('module-alias').addAliases({
  'react'  : 'preact-compat',
  'react-dom': 'preact-compat'
});

or, specify this in your package.json:

"_moduleAliases": {
  "react": "preact-compat",
  "react-dom": "preact-compat"
}

… and install the hook:

require('module-alias/register');