Fetch: After update to 3.0.0, Webpack build is failing

[belcherj]

Updating from 2.0.4 to 3.0.0 webpack is failing, see error below. I assume I need to use a different loader but wanted to raise the issue since a quick web search and perusing the issues here did not result in any others having the issue. This method of including fetch via webpack is shared a lot in examples so there will probably be others.

In my webpack config I include fetch globally like this:

new webpack.ProvidePlugin( {
    fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
} ),

    ERROR in ./node_modules/whatwg-fetch/fetch.js (./node_modules/imports-loader?this=>global!./node_modules/exports-loader?global.fetch!./node_modules/whatwg-fetch/fetch.js) 72:0
    Module parse failed: 'import' and 'export' may only appear at the top level (72:0)
    You may need an appropriate loader to handle this file type.
    | }
    |
    > export function Headers(headers) {
    |   this.map = {};
    |
     @ ./plugins/wccom-plugins/geo-page-replace/assets/setup.js 1:0-79

[belcherj]

webpack version 4.18.0 works with 2.0.4 but not with 3.0.0

[mislav]

Thank you for reporting. It looks like this webpack setup doesn't seem to respect main as specified in package.json. I'm not familiar with webpack, but is there a way it could be configured to follow main? See discussion around main vs module https://github.com/github/fetch/issues/656#issuecomment-420219378

Note that whatwg-fetch v2 wasn't a module, but v3 is; maybe you can change your webpack configuration to load it like you load other modules?

[belcherj]

On my list to loop back here and figure out a solution.

[andrejpavlovic]

This worked for me:

new webpack.ProvidePlugin({
  fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd',
})

[mbifulco]

@andrejpavlovic can you explain a bit more about your solution? Was it done as a fork to fetch, or in your own project's config? Apologies for my obvious ignorance here - I haven't spent much time configuring webpack at all. Trying to get fetch 3 to work with a create-react-app project, which obfuscates webpack config, for the most part.

[mbifulco]

Sorry to be persistent here - @belcherj any chance you've got an update or workaround for this that might work with create-react-app?

[belcherj]

Sorry, got pulled onto another project and never ended up having time to figure out the solution.

[mbifulco]

Is there someone else who can look at this @belcherj?

[belcherj]

I just fixed it on the that project by using @andrejpavlovic 's solution:

Remove: fetch: 'imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch',
Replace with: fetch: 'exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd',

[mislav]

Would this also work? exports-loader?self.fetch!whatwg-fetch

The problem with the exports-loader?self.fetch!whatwg-fetch/dist/fetch.umd approach is that it specifies the "main" file explicitly and will break again if the "main" file changes in a future major version.

[belcherj]

Tested and that works as well!

[scott-ln]

@mislav: Trying your modification results in TypeError: "exports" is read-only for me.

[nikolas]

@mislav with exports-loader?self.fetch!whatwg-fetch I get the error:

fetch.js?f8ee:520 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at Module.eval (fetch.js?f8ee:520)
    at eval (index.js?self.fetch!./node_modules/whatwg-fetch/fetch.js:527)
    at Module../node_modules/exports-loader/index.js?self.fetch!./node_modules/whatwg-fetch/fetch.js (bundle-k.js:1696)
    at __webpack_require__ (bundle-k.js:20)
    at eval (Xhr.js:181)
    at Module../src/Xhr.js (bundle-k.js:4995)
    at __webpack_require__ (bundle-k.js:20)
    at eval (JuxtaposeApplication.jsx:32)
    at Module../src/JuxtaposeApplication.jsx (bundle-k.js:4779)
    at __webpack_require__ (bundle-k.js:20)

but @belcherj's solution works in my case.