Create React App is broken by lack of default polyfills in Webpack 5

[cogoo]

Edit by @jordansexton:

To anyone looking for a very good workaround right now, don't use Create React App. Just use the react-ui-starter or material-ui-starter projects with Parcel, or the nextjs-starter project with Next.js, save yourself a huge hassle, and get much faster builds with SWC instead of Babel.

---

Describe the bug
Broken build with CRA v5, unable to resolve modules.

To Reproduce
Steps to reproduce the behavior:

1. Initialize a new CRA project. npx create-react-app my-app-test
2. Install and use any wallet-adapter packages
3. See error

BREAKING CHANGE: The request './adapter' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Solution
Relative imports must include a file extension to follow ESM strict mode requirements introduced in Webpack 5. It's valid typescript to include .js extensions as part of the import path 🤯 :

example.ts

import { Example } from './example.js';

compiles to

example.js

import { Example } from './example.js';

[jordaaash]

It's worth noting that yarn lint is also currently broken.

[jordaaash]

I discovered this when I started working on adding check for import extensions to eslint: 7b44365

[cogoo]

Recommended solution seems to be:

You must use a .js extension in relative imports even though you're importing .ts files.

Full breakdown: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[cogoo]

It's worth noting that yarn lint is also currently broken.

🧐 this is unrelated. Fixed this by adding the missing transient dependencies

yarn add eslint-config-react-app babel-eslint -W --dev

or by removing react-app/jest from material-ui-starter/package.json and react-ui-starter/package.json

 "eslintConfig": {
        "extends": [
             "react-app",
-            "react-app/jest"
        ]
    },

[Eliascm17]

I'm experiencing this in a CRA v5 app as well.

[Malai237]

I am facing the same issues and I am using node

[nicechute]

Need to fix this asap

[jordaaash]

Linting and the starter projects are fixed thanks to @cogoo in #245.

This issue is otherwise blocked until Craco fully supports CRA 5 / Webpack 5 and we can configure Webpack to build with ESM modules that don't use .mjs extensions.

Until then, please use one of the starter projects that use Next.js or CRA 4. They work right now and don't require additional configuration.

Instructions to run the React UI + CRA4 starter project are here:
https://github.com/solana-labs/wallet-adapter#build-from-source

[kevinforrestconnors]

Any recommendation to those who have already started a project? I'd rather not remake my project and just want to fix this to continue working

[jordaaash]

Nope, there's no good workaround at this time, sorry. CRA 5 is not supported.