Different main entry point in package.json for node and browser

Question

In isomorphic react app I have myModule which should behave differently on node and browser environments. I would like configure this split point i

Answer 1

The behavior is standardized here: https://github.com/defunctzombie/package-browser-field-spec

Although this specification is unofficial, many Javascript bundlers follow it, including Webpack, Browserify, and the React Native packager. The browser field not only allows you to change your module entry point, but to also replace or ignore individual files within your module. It's quite powerful.

Since Webpack bundles code for the web by default, you need to manually disable the browser field if you want to use Webpack for your server build. You can do that using the target config option to do this: https://webpack.js.org/concepts/targets/

Answer 2

To have a different entry point for client and server in a Node Module, you can use process.browser flag and handle the same

if (process.browser) {
  // load client entry point
} else {
  // load server entry point
}

Answer 3

If you look at tools/webpack.config.js in React Starter Kit you will see that it exports two Webpack configurations that slightly differ, e.g. module.exports = [clientConfig, sererConfig]. The server-side bundle config has this field target set to node (by default it's web).

https://webpack.github.io/docs/configuration.html#target

The approach that you described works great for modules that have exactly the same API but different implementations, like in the case with HTTP client utility that uses XMLHttpRequest in its browser-specific implementation and Node's http module in its server implementation:

https://github.com/kriasoft/react-starter-kit/tree/master/src/core/fetch

Answer 4

It has been a long time since this question was asked. I just want to clarify the previous answer.

If you look at tools/webpack.config.js in React Starter Kit you will see that it exports two Webpack configurations that slightly differ, e.g. module.exports = [clientConfig, sererConfig]. The server-side bundle config has this field target set to node (by default it's web).

It seems this webpack beheavior is not documented, but webpack automatically takes 'main' entry when target is 'node' and takes 'browser' entry when target is 'web'.