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

cogoo · 2022-01-05T01:42:11Z

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:

Initialize a new CRA project. npx create-react-app my-app-test
Install and use any wallet-adapter packages
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';

The text was updated successfully, but these errors were encountered:

jordaaash · 2022-01-05T03:54:21Z

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

jordaaash · 2022-01-05T03:55:59Z

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

cogoo · 2022-01-05T15:47:35Z

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 · 2022-01-05T16:14:47Z

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 · 2022-01-05T17:43:06Z

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

Malai237 · 2022-01-05T18:01:21Z

I am facing the same issues and I am using node

nicechute · 2022-01-05T20:16:29Z

Need to fix this asap

jordaaash · 2022-01-06T02:40:57Z

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 · 2022-01-06T04:27:25Z

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 · 2022-01-06T04:33:14Z

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

jordaaash · 2022-01-06T04:34:23Z

It's relatively straightforward to take your code from your CRA 5 app and drop it into the CRA 4 based react-ui-starter project though.

kevinforrestconnors · 2022-01-06T06:33:28Z

fair enough, thanks

Malai237 · 2022-01-06T15:10:29Z

Hey guys, I got it to work. I uninstalled the libraries listed below and downloaded them again with these specific versions:
"@solana/wallet-adapter-base": "^0.7.1",
"@solana/wallet-adapter-react": "^0.13.1",
"@solana/wallet-adapter-react-ui": "^0.6.1",
"@solana/wallet-adapter-wallets": "^0.11.3",
"@solana/web3.js": "^1.31.0",
...
"react-scripts": "4.0.3",

jordaaash · 2022-01-06T15:30:40Z

@Malai237 you don't need to downgrade the packages to get this to work with CRA 4. The react-ui-starter project works out of the box with the latest versions of the packages using CRA 4.

jordaaash · 2022-01-06T18:27:27Z

Just published:

These packages include #245 and should work with CRA4 / Craco.

kevinforrestconnors · 2022-01-06T19:27:44Z

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

I was not able to get the starter projects to work.

Since there is a parent directory to the src directory, nothing works if you build the project and then move the src to your other project. I don't want all the other stuff - literally just the front end app is what I want.

For example:

The instructions in https://github.com/solana-labs/wallet-adapter#build-from-source

Clone the project:

git clone https://github.com/solana-labs/wallet-adapter.git

Install dependencies:

cd wallet-adapter
yarn install

Build all packages:

yarn build

Run locally:

cd packages/starter/react-ui-starter
yarn start

Then I moved the react-ui-starter folder to my app, and it does not work, since it is dependent on the parent folder's node_modules

kevinforrestconnors · 2022-01-06T20:51:44Z

@Malai237 you don't need to downgrade the packages to get this to work with CRA 4. The react-ui-starter project works out of the box with the latest versions of the packages using CRA 4.

I can't even get this to work with CRA 4. Jest tests break:

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './useWalletModal';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

kevinforrestconnors · 2022-01-06T21:17:27Z

So I have learned that the issue is specifically with WalletModalProvider breaking jest tests, even with CRA 4. I have decided to just not use it and make my own UI.

jordaaash · 2022-01-06T21:58:32Z

Then I moved the react-ui-starter folder to my app, and it does not work, since it is dependent on the parent folder's node_modules

This is because of Lerna + Yarn workspaces linking the dependencies locally.

If you move react-ui-starter out of the project directory, run yarn install from the react-ui-starter directory. This should install the dependencies locally in the node_modules of that directory instead of hoisting them.

jordaaash · 2022-01-06T22:01:09Z

Jest tests break

What tests are you running? The only Jest tests that ship with this project right now are in the React package. This shouldn't affect your starter project running, right?

jordaaash · 2022-01-06T22:04:09Z

As for the Jest tests that ship with the React package, they run and pass:

➜  react git:(master) yarn test
yarn run v1.22.17
$ jest
...
Test Suites: 2 passed, 2 total
Tests:       45 passed, 45 total
Snapshots:   0 total
Time:        6.412 s
Ran all test suites.
✨  Done in 7.91s.

jordaaash · 2022-01-06T22:06:48Z

If you move react-ui-starter out of the project directory, run yarn install from the react-ui-starter directory.

I just did this and it works.

jordaaash · 2022-01-06T22:08:52Z

Perhaps we should configure the starter projects to disable hoisting since they are supposed to run standalone. Comes at the expense of initial install time, but maybe worthwhile?

cc @cogoo

gpoole · 2022-01-07T01:26:28Z

Just to add my experience, the packages don't work with the latest Next.js version (12.0.7) in a project I created via CNA. Downgrading to Next.js 11 as used in the starter seems to have worked though. Next.js now uses SWC instead of webpack by default, so might this also be part of the problem? I'm not familiar with the details at all so please forgive me if this is a dumb question, but it seems like using mjs extensions for the esm exports has the broadest compatibility and resolves the issue, so is there a reason not to do that?

jordaaash · 2022-01-07T01:30:26Z

@gpoole #246 is probably related to the Next.js issue. I'm also not familiar with it and haven't tested with Next 12.

it seems like using mjs extensions for the esm exports has the broadest compatibility and resolves the issue, so is there a reason not to do that?

@cogoo you spent a good bit of time trying out different builds, wdyt?

steveluscher · 2022-01-20T02:45:43Z

…or if yarn link doesn't understand how to propagate that package.json dependency down to the main project.

I sort of suspect that's true: yarnpkg/yarn#2914 (comment)

Maybe we should #yolo merge this, publish it, and see?

jordaaash · 2022-01-20T03:41:48Z

Published:

@solana/wallet-adapter-ledger => 0.9.3
@solana/wallet-adapter-torus => 0.11.4

Using these dependencies should fix the polyfill / CRA problems with no additional config required.

Huge thanks to @steveluscher for his heroic effort debugging and fixing this both here and in upstream projects.

jordaaash · 2022-01-20T03:42:34Z

(And if this doesn't fix all the CRA issues, at least we're a bit closer)

jordaaash · 2022-01-20T04:51:57Z

Reopened -- #264 has been reverted by #275. It looks like the polyfills may be breaking the Next and Parcel starters.

jordaaash · 2022-01-20T14:11:49Z

Maybe we should #yolo merge this, publish it, and see?

@steveluscher lol

TomLisankie · 2022-01-24T18:59:38Z

@jordansexton What's holding #276 back from being merged in? I'm trying to do work in a repo where my coworkers and I are using Webpack 5 and this is blocking us from moving forward. There are manual fixes that we've tried that work but those are not satisfactory for shipping of course.

EDIT: I see that PR was only opened on Thursday or something so makes sense that it isn't in. Appreciate the work y'all are doing

jordaaash · 2022-01-24T22:27:24Z

@TomLisankie thanks for understanding. #276 just needs to be tested before merging (I rushed to publish its predecessor #264 and broke all the packages) and I haven't had time to test it yet.

TomLisankie · 2022-01-25T14:56:24Z

@TomLisankie thanks for understanding. #276 just needs to be tested before merging (I rushed to publish its predecessor #264 and broke all the packages) and I haven't had time to test it yet.

Got it, thanks.

ieow · 2022-01-28T09:22:51Z

Anyone have issue with latest wallet adapter with cra 4.0 ?
I am trying clone https://github.com/exiled-apes/candy-machine-v2-mint
then replace the wallet adapter with "@solana/wallet-adapter-wallets": "^0.14.2"
and hit error below when run npm start

./node_modules/@solana/wallet-adapter-wallets/lib/esm/adapters.mjs
Can't import the named export 'BitKeepWalletAdapter' from non EcmaScript module (only default export is available)

nicechute · 2022-01-30T17:25:44Z

Can someone please document what the correct work around would be? As stated above, simply downgrading CRA does not work

steveluscher · 2022-01-31T03:28:28Z

Anyone have issue with latest wallet adapter with cra 4.0 ?

Can someone please document what the correct work around would be?

See #265!

jordaaash · 2022-01-31T04:00:22Z

Published:

@solana/wallet-adapter-react => 0.15.3
@solana/wallet-adapter-example => 0.18.1
@solana/wallet-adapter-material-ui-starter => 0.13.1
@solana/wallet-adapter-nextjs-starter => 0.8.1
@solana/wallet-adapter-react-ui-starter => 0.9.2
@solana/wallet-adapter-ant-design => 0.11.3
@solana/wallet-adapter-material-ui => 0.16.4
@solana/wallet-adapter-react-ui => 0.9.5
@solana/wallet-adapter-bitkeep => 0.3.3
@solana/wallet-adapter-blocto => 0.5.3
@solana/wallet-adapter-clover => 0.4.3
@solana/wallet-adapter-coin98 => 0.5.3
@solana/wallet-adapter-coinhub => 0.3.3
@solana/wallet-adapter-ledger => 0.9.5
@solana/wallet-adapter-mathwallet => 0.9.3
@solana/wallet-adapter-safepal => 0.5.3
@solana/wallet-adapter-slope => 0.5.3
@solana/wallet-adapter-solflare => 0.6.3
@solana/wallet-adapter-solong => 0.9.3
@solana/wallet-adapter-tokenpocket => 0.4.3
@solana/wallet-adapter-torus => 0.11.6
@solana/wallet-adapter-wallets => 0.14.3

Please try these packages using CRA 5! And huge thanks to @steveluscher for your tireless work on this.

mwrites · 2022-02-03T08:03:01Z

Amazing! Thanks

jordaaash · 2022-02-07T00:38:43Z

This is fixed via #299.

The core issue is that the Torus and Ledger JS libraries don't correctly polyfill and incorrectly use globals, and this isn't handled by Webpack 5 without additional configuration, which you can't add with CRA5 alone. We use react-app-rewired to override, as Craco doesn't support CRA5 yet.

See the new create-react-app-starter project. The key parts are the config-overrides.js file and npm:process dependency.

Published:

scottwilson312 · 2022-02-10T20:20:58Z

@jordansexton thanks for all of this. I took my CRA project and just copied over the releveant parts from the package.json (devDependencies) and config.json into my existing project and all is well

Sunnyjson · 2022-02-24T07:09:44Z

I got the error message

./node_modules/@solana/wallet-adapter-wallets/lib/esm/adapters.mjs Can't import the named export 'BitKeepWalletAdapter' from non EcmaScript module (only default export is available)

Sorry I didn't find the right solution，Tried the upgrade version to no avail， Can someone tell me how to fix it， thanks

asifmuhammad · 2023-01-19T12:35:58Z

Did anyone manage to fix this issue?

./node_modules/@netless/window-manager/dist/index.mjs
Can't import the named export 'AnimationMode' from non EcmaScript module (only default export is available)

L-F-Escobar · 2024-05-22T23:11:14Z

working with solana has been the worst experience of my programming life

cogoo mentioned this issue Jan 5, 2022

fix(lint): lint command #242

Merged

jordaaash added the blocked Blocked by another issue or PR label Jan 6, 2022

jordaaash changed the title ~~Error: Broken build with Webpack 5 / or any tooling that requires strict ESM imports~~ Error with Create React App 5, Webpack 5, or any tooling that requires strict ESM imports Jan 6, 2022

This was referenced Jan 6, 2022

Error: @solana/wallet-adapter-react error #236

Closed

export 'WalletAdapterNetwork' (imported as 'WalletAdapterNetwork') was not found in '@solana/wallet-adapter-base' (module has no exports) #231

Closed

steveluscher mentioned this issue Jan 20, 2022

Polyfill Node APIs for compatibility with Webpack 5 and Create React App 5 #264

Merged

jordaaash closed this as completed in #264 Jan 20, 2022

jordaaash reopened this Jan 20, 2022

steveluscher mentioned this issue Jan 20, 2022

Polyfill Node APIs for compatibility with Webpack 5 and Create React App 5 (second try) #276

Merged

steveluscher mentioned this issue Jan 31, 2022

Can't import the named export 'Button' from non EcmaScript module (only default export is available) #265

Closed

jordaaash closed this as completed in #276 Jan 31, 2022

jordaaash mentioned this issue Feb 7, 2022

CRA 5 Fixes #299

Merged

TomLisankie mentioned this issue Feb 7, 2022

Latest version of wallet-adapter-wallets breaks when trying to compile wallet-adapter-torus #302

Closed

jamland mentioned this issue Feb 14, 2022

Module not found error NftEyez/sol-rayz#19

Closed

jamland mentioned this issue Feb 22, 2022

it seems that an import is missing in utils.ts NftEyez/sol-rayz#16

Closed

Sunnyjson mentioned this issue Feb 24, 2022

'BitKeepWalletAdapter' from non EcmaScript module error #330

Closed

Rkrushanovskij mentioned this issue Oct 25, 2022

Same issue as #236 now with newly added Fractal #625

Closed

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

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

Comments

cogoo commented Jan 5, 2022 • edited by jordaaash Loading

jordaaash commented Jan 5, 2022

jordaaash commented Jan 5, 2022

cogoo commented Jan 5, 2022

cogoo commented Jan 5, 2022 • edited Loading

Eliascm17 commented Jan 5, 2022 • edited Loading

Malai237 commented Jan 5, 2022

nicechute commented Jan 5, 2022

jordaaash commented Jan 6, 2022

kevinforrestconnors commented Jan 6, 2022

jordaaash commented Jan 6, 2022

jordaaash commented Jan 6, 2022

kevinforrestconnors commented Jan 6, 2022

Malai237 commented Jan 6, 2022

jordaaash commented Jan 6, 2022

jordaaash commented Jan 6, 2022

kevinforrestconnors commented Jan 6, 2022

kevinforrestconnors commented Jan 6, 2022

kevinforrestconnors commented Jan 6, 2022

jordaaash commented Jan 6, 2022

jordaaash commented Jan 6, 2022

jordaaash commented Jan 6, 2022

jordaaash commented Jan 6, 2022

jordaaash commented Jan 6, 2022

gpoole commented Jan 7, 2022

jordaaash commented Jan 7, 2022

steveluscher commented Jan 20, 2022

jordaaash commented Jan 20, 2022

jordaaash commented Jan 20, 2022

jordaaash commented Jan 20, 2022

jordaaash commented Jan 20, 2022

TomLisankie commented Jan 24, 2022 • edited Loading

jordaaash commented Jan 24, 2022

TomLisankie commented Jan 25, 2022

ieow commented Jan 28, 2022

nicechute commented Jan 30, 2022 • edited Loading

steveluscher commented Jan 31, 2022 • edited Loading

jordaaash commented Jan 31, 2022

mwrites commented Feb 3, 2022

jordaaash commented Feb 7, 2022 • edited Loading

scottwilson312 commented Feb 10, 2022

Sunnyjson commented Feb 24, 2022

asifmuhammad commented Jan 19, 2023

L-F-Escobar commented May 22, 2024

cogoo commented Jan 5, 2022 •

edited by jordaaash

Loading

cogoo commented Jan 5, 2022 •

edited

Loading

Eliascm17 commented Jan 5, 2022 •

edited

Loading

TomLisankie commented Jan 24, 2022 •

edited

Loading

nicechute commented Jan 30, 2022 •

edited

Loading

steveluscher commented Jan 31, 2022 •

edited

Loading

jordaaash commented Feb 7, 2022 •

edited

Loading