search

anza-xyz / wallet-adapter

Modular TypeScript wallet adapters and components for Solana applications.
https://anza-xyz.github.io/wallet-adapter/
Apache License 2.0
1.59k stars 960 forks source link

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

Closed cogoo closed 2 years ago

cogoo commented 2 years ago

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 commented 2 years ago

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

@steveluscher lol

TomLisankie commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

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

steveluscher commented 2 years ago

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 commented 2 years ago

Published:

mwrites commented 2 years ago

Amazing! Thanks

jordaaash commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 1 year ago

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 commented 5 months ago

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