7

I'm making a React component library to abstract out some components 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 comparing 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?

ROODAY
  • 756
  • 1
  • 6
  • 23
  • Where would I put the ` import window from 'window';` statement? If I put it in my component 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 component. (and if I ignore it I get react error 321) – ROODAY Aug 06 '20 at 02:19

1 Answers1

8

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

Raz Ronen
  • 2,418
  • 2
  • 14
  • 26
  • 2
    Thank you so much, you're a lifesaver! – ROODAY Aug 06 '20 at 15:23
  • I'm pulling my hair out right now becuase no matter WHAT I set "globalObject" to it gets overridden somehwere an always compiles to "self" https://stackoverflow.com/questions/67872307/why-would-webpack-output-with-global-self-instead-of-this-when-output-global – Native Coder Jun 07 '21 at 19:43