I'm making a React ponent library to abstract out some ponents I use in multiple projects. Some projects are made with CRA, some with Gatsby, some might be something else, etc. I used the Neutrino.js framework/toolchain as it was linked on the React docs site, but the issue I ran into is that by default the output files of the build all use the window object, which causes gatsby build to break as window doesn't exist in Node/SSR. Is there a way to make Neutrino/webpack output a bundle that doesn't use window? While searching for a solution and paring to other libraries it seems that ESM is the best but I'm not sure how to get webpack to use it, I think it's currently not supported. Is there another tool I should be using for this?

I'm making a React ponent library to abstract out some ponents I use in multiple projects. Some projects are made with CRA, some with Gatsby, some might be something else, etc. I used the Neutrino.js framework/toolchain as it was linked on the React docs site, but the issue I ran into is that by default the output files of the build all use the window object, which causes gatsby build to break as window doesn't exist in Node/SSR. Is there a way to make Neutrino/webpack output a bundle that doesn't use window? While searching for a solution and paring to other libraries it seems that ESM is the best but I'm not sure how to get webpack to use it, I think it's currently not supported. Is there another tool I should be using for this?

• javascript
• reactjs
• webpack
• module

Share Improve this question Follow asked Aug 6, 2020 at 0:23 ROODAYROODAY 83211 gold badge99 silver badges2727 bronze badges 1

• Where would I put the ` import window from 'window';` statement? If I put it in my ponent that gets built in the library, I get a cannot resolve window, and the same happens when I put it inside the app that imports my ponent. (and if I ignore it I get react error 321) – ROODAY Commented Aug 6, 2020 at 2:19

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

Add globalObject configuration to your webpack configuration:

output: {
    globalObject: "this",
  },

The default is window

For example:

To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this'.

module.exports = {
  // ...
  output: {
    library: 'myLib',
    libraryTarget: 'umd',
    filename: 'myLib.js',
    globalObject: 'this'
  }
};

-From docs