CRA bundling error for extract-files

[kulakowka]

I tried to update and got an error.

"react-scripts": "^2.0.0",
"apollo-upload-client": "^9.0.0",

[dirkdevriendt]

Same here, upon upgrading to the new react-scripts v2.0.0 (Babel 7, webpack 4, Jest 23):
More info: facebook/create-react-app#5103

The build works, but the website fails with:

ReferenceError: module is not defined
Module../node_modules/extract-files/lib/index.mjs
.../node_modules/extract-files/lib/index.mjs:1
> 1 | module.exports = __webpack_public_path__ + "static/media/index.99316ed4.mjs";

Let me know if there is more info I can provide. And thanks for your efforts on these libraries that keep us on the right side of sanity in the crazy JS world ;-)

[jaydenseric]

This is a CRA bug, not an issue with apollo-upload-client. They need to support the same file extensions Node.js and Webpack does. .mjs should be resolved before .js. This is not about supporting .mjs in project files, but allowing npm dependencies to bundle correctly with Webpack.

https://github.com/facebook/create-react-app/blob/3ae3cf3678725f86fe34234e59088a65a9458b8b/packages/react-scripts/config/webpack.config.prod.js#L200

Here is an example of what it should look like: https://github.com/zeit/next.js/blob/7.0.1-canary.0/build/webpack.js#L155

This is a similar issue to #117.

Don't worry, I'm sure they will fix it because their flawed config will result in bundling errors for other dependencies too, such as graphql - a popular package maintained by Facebook.

[dirkdevriendt]

Yep, seems to be fixed in react-scripts@2.0.1, apologies for the overhead!

[dirkdevriendt]

FYI, the import works now, but the library still runs into an issue when trying to access functionality from extract-files:

TypeError: extractFiles is not a function
    at ApolloLink.request (index.js:54)
    at ApolloLink.request (link.js:33)
    at link.js:55
...

Which points to line 54 in node_modules/apollo-upload-client/lib/index.js:

    var files = extractFiles(body);

I assume after failing to fullfill the require in line 16:

var _require3 = require('extract-files'),
    extractFiles = _require3.extractFiles,
    ReactNativeFile = _require3.ReactNativeFile;

I'm guessing this is still an incompatibility between the latest CRA tooling and the require / import statements or is something else happening here?
Side question: am I understanding the documentation correctly that the link provided by createUploadLink should replace the one given by createHttpLink, with the same endpoint?

Final note: I am also using graphql (@14.0.1) in this same project and it did keep on working through these upgrades. Which does't prove anything, but I thought you might want to know.

Thanks again!

[jaydenseric]

Config still looks wrong to me: https://github.com/facebook/create-react-app/blob/react-scripts%402.0.1/packages/react-scripts/config/webpack.config.prod.js#L200

[karensg]

Here is the discussion about the final version of react-scripts:
facebook/create-react-app#5103
I believe that they require dependencies to build themselves.

[jaydenseric]

Not sure what you mean, the dependency is precompiled: https://registry.npmjs.org/extract-files/-/extract-files-4.0.0.tgz

[karensg]

Having the same issue as @dirkdevriendt.
In that CRA issue, they say that .mjs support is dropped.

[dirkdevriendt]

Indeed, I think, as @jaydenseric indicates, it's really about the .mjs extension. I "fixed" it by renaming all *.mjs files to *.js in my local version of the extract-files repo.

:-) This may again have caused other issues down the line, but where would the fun be if that didn't happen...

[dirkdevriendt]

FYI: my current understanding is that CRA is waiting on Jest support which is waiting on esm support...
ref:
facebook/create-react-app#4317 (comment)
jestjs/jest#4842 (comment)
jestjs/jest#7018 (comment)

[jaydenseric]

Next.js does not support .mjs for project files, but it must, and does, support it for node_modules dependencies. CRA has apparently thrown the baby out with the bath water, they should add .mjs to the list of resolve extensions (before .js).

[karensg]

Yes, very unfortunate that it does not work now any more.
Could you maybe open an issue at CRA to point that out?
And maybe reopen this issue as well so that people with the same problem find this thread easier.

[karensg]

They fixed it in 2.0.4
https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md