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

[chrisirhc]

Describe the bug I'm seeing the following issue now from the latest version likely due to .mjs version .

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

To Reproduce Use @solana/wallet-adapter-material-ui@0.16.3.

Expected behavior Expected it to run successfully.

Additional context I'm guessing this is due to a restriction of .mjs files need to import from EcmaScript modules / esm files, but material-ui exports plain .js files despite them using es import styles.

[jordaaash]

The starter example and material-ui-starter projects both work. I'm guessing the issue is a build tool being used. Can you post a link to a reproduction repo?

[steveluscher]

This looks like https://github.com/mui-org/material-ui/pull/30510 might fix it.

[zrus]

Hi @jordansexton,

I got the same error but my module that cannot be imported was BitKeepWalletAdapter. Here is the error:

lerna info run Ran npm script 'build' in '@solana/wallet-adapter-wallets' in 35.5s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna ERR! yarn run build exited 1 in '@solana/wallet-adapter-react-ui-starter'
lerna ERR! yarn run build stdout:
$ yarn clean && craco build
$ shx rm -rf build/*
Creating an optimized production build...
Failed to compile.

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

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build stderr:
error Command failed with exit code 1.
lerna ERR! yarn run build exited 1 in '@solana/wallet-adapter-react-ui-starter'
lerna WARN complete Waiting for 3 child processes to exit. CTRL-C to exit immediately.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I believe he followed the build from source in README.md as the same with me.

[steveluscher]

Oh, interesting, @zrus. I see craco in your terminal output there, which leads me to believe that you're sitting on an older commit. craco has been removed since.

On a fresh checkout of this repo (at 16fb5cc395e9974a91297549feaf7694191c7093) I have success building from source:

 % yarn nuke
 % yarn build
yarn run v1.22.17
$ lerna run build
lerna notice cli v4.0.0
lerna info versioning independent
lerna info Executing command in 31 packages: "yarn run build"
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-angular' in 8.9s:
$ yarn clean && ng build angular --configuration=production
$ shx rm -rf lib/*
Building Angular Package

------------------------------------------------------------------------------
Building entry point '@solana/wallet-adapter-angular'
------------------------------------------------------------------------------
Compiling @angular/core : es2015 as esm2015
Compiling @ngrx/component-store : es2015 as esm2015

------------------------------------------------------------------------------
Built Angular Package
 - from: ~/wallet-adapter/packages/core/angular
 - to:   ~/wallet-adapter/packages/core/angular/lib
------------------------------------------------------------------------------

Build at: 2022-01-17T03:53:08.229Z - Time: 5981ms

lerna info run Ran npm script 'build' in '@solana/wallet-adapter-svelte' in 12.7s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-vue' in 12.7s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-base' in 12.8s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-vue-ui' in 16.7s:
$ yarn clean && vite build --config vite.config.ts && vite build --config vite.config.cjs.ts
$ shx rm -rf lib/*
vite v2.7.12 building for production...
transforming...
✓ 12 modules transformed.
rendering chunks...
lib/esm/index.mjs   19.95 KiB / gzip: 4.15 KiB
lib/esm/index.mjs.map 24.42 KiB

[vite:dts] Start generate declaration files...
[vite:dts] Declaration files built in 4332ms.

vite v2.7.12 building for production...
transforming...
✓ 12 modules transformed.
rendering chunks...
lib/cjs/index.js   21.24 KiB / gzip: 4.38 KiB
lib/cjs/index.js.map 24.55 KiB

[vite:dts] Start generate declaration files...
[vite:dts] Declaration files built in 4367ms.

$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-bitkeep' in 25.4s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-bitpie' in 25.8s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-react' in 26.2s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-coin98' in 26.4s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-coinhub' in 26.5s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-clover' in 26.6s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-blocto' in 26.7s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-ledger' in 22.8s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-mathwallet' in 22.6s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-phantom' in 23.2s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-safepal' in 23.3s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-slope' in 23.4s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-solong' in 23.2s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-solflare' in 23.5s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-sollet' in 24.0s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-tokenpocket' in 19.5s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-torus' in 17.0s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-walletconnect' in 16.2s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-react-ui' in 16.7s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-ant-design' in 19.1s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-material-ui' in 20.7s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-wallets' in 9.0s:
$ yarn clean && tsc -p tsconfig.json; tsc-esm -p tsconfig.json && tsc -p tsconfig.cjs.json
$ shx rm -rf lib/*
$ echo '{"type":"commonjs"}' | npx json > lib/cjs/package.json && echo '{"type":"module"} ' | npx json > lib/esm/package.json
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-nextjs-starter' in 16.2s:
$ yarn clean && next build
$ shx rm -rf .next
info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/3)
info  - Generating static pages (3/3)
info  - Finalizing page optimization...

Page                                       Size     First Load JS
┌ ○ /                                      5.06 kB         254 kB
├   └ css/979358c674baf34b.css             756 B
├   /_app                                  0 B             249 kB
├ ○ /404                                   194 B           249 kB
└ λ /api/hello                             0 B             249 kB
+ First Load JS shared by all              249 kB
  ├ chunks/framework-d267c6d5d8f99f3f.js   42 kB
  ├ chunks/main-c5369e47b99b3a43.js        28.2 kB
  ├ chunks/pages/_app-437af0fe59124716.js  176 kB
  ├ chunks/webpack-ed7bcfb0a364635a.js     1.89 kB
  └ css/de91fdc06dee0f3c.css               1.67 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

lerna info run Ran npm script 'build' in '@solana/wallet-adapter-react-ui-starter' in 22.7s:
$ yarn clean && parcel build src/index.html
$ shx rm -rf dist .parcel-cache
Building...
Bundling...
Packaging & Optimizing...
✨ Built in 21.90s

dist/index.html                         355 B    4.92s
dist/index.cc9b0257.css                 794 B    1.26s
dist/index.e768852c.js              659.28 KB    8.58s
dist/TransportWebHID.85d426b6.js      41.4 KB    1.00s
dist/esm.17be2d5a.js                  5.02 KB    754ms
dist/torus.esm.1d6f4af9.js          447.17 KB    8.58s
dist/blocto-sdk.umd.c90eb96d.js     365.45 KB    4.57s
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-material-ui-starter' in 26.4s:
$ yarn clean && parcel build src/index.html
$ shx rm -rf dist .parcel-cache
Building...
Bundling...
Packaging & Optimizing...
✨ Built in 25.38s

dist/index.html                         355 B    386ms
dist/index.8b2bc831.css                 803 B    1.57s
dist/index.5d59e13d.js              795.94 KB    8.25s
dist/TransportWebHID.7b6ccd88.js      41.4 KB    1.16s
dist/esm.21430433.js                  5.02 KB    4.01s
dist/torus.esm.33e06836.js          447.17 KB    8.25s
dist/blocto-sdk.umd.82e0992b.js     365.45 KB    4.01s
lerna info run Ran npm script 'build' in '@solana/wallet-adapter-example' in 40.8s:
$ yarn clean && next build && next export
$ shx rm -rf .next out
info  - Checking validity of types...
info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
info  - Generating static pages (0/3)
info  - Generating static pages (3/3)
info  - Finalizing page optimization...

Page                                       Size     First Load JS
┌ ○ / (1988 ms)                            29 kB           409 kB
├   /_app                                  0 B             380 kB
└ ○ /404                                   195 B           380 kB
+ First Load JS shared by all              380 kB
  ├ chunks/framework-99ad8a302b65e5ba.js   42 kB
  ├ chunks/main-84d5159d107d4fde.js        28.3 kB
  ├ chunks/pages/_app-7a309d10548c939f.js  307 kB
  ├ chunks/webpack-604a06a37d2a9a53.js     1.89 kB
  └ css/0c3017a37792edb4.css               73.4 kB

○  (Static)  automatically rendered as static HTML (uses no initial props)

info  - using build directory: ~/wallet-adapter/packages/starter/example/.next
info  - Copying "static build" directory
info  - No "exportPathMap" found in "~/wallet-adapter/packages/starter/example/next.config.js". Generating map from "./pages"
info  - Launching 7 workers
info  - Exporting (0/2)
info  - Copying "public" directory
info  - Exporting (2/2)
Export successful. Files written to ~/wallet-adapter/packages/starter/example/out
lerna success run Ran npm script 'build' in 31 packages in 127.5s:
lerna success - @solana/wallet-adapter-angular
lerna success - @solana/wallet-adapter-base
lerna success - @solana/wallet-adapter-react
lerna success - @solana/wallet-adapter-svelte
lerna success - @solana/wallet-adapter-vue
lerna success - @solana/wallet-adapter-example
lerna success - @solana/wallet-adapter-material-ui-starter
lerna success - @solana/wallet-adapter-nextjs-starter
lerna success - @solana/wallet-adapter-react-ui-starter
lerna success - @solana/wallet-adapter-ant-design
lerna success - @solana/wallet-adapter-material-ui
lerna success - @solana/wallet-adapter-react-ui
lerna success - @solana/wallet-adapter-vue-ui
lerna success - @solana/wallet-adapter-bitkeep
lerna success - @solana/wallet-adapter-bitpie
lerna success - @solana/wallet-adapter-blocto
lerna success - @solana/wallet-adapter-clover
lerna success - @solana/wallet-adapter-coin98
lerna success - @solana/wallet-adapter-coinhub
lerna success - @solana/wallet-adapter-ledger
lerna success - @solana/wallet-adapter-mathwallet
lerna success - @solana/wallet-adapter-phantom
lerna success - @solana/wallet-adapter-safepal
lerna success - @solana/wallet-adapter-slope
lerna success - @solana/wallet-adapter-solflare
lerna success - @solana/wallet-adapter-sollet
lerna success - @solana/wallet-adapter-solong
lerna success - @solana/wallet-adapter-tokenpocket
lerna success - @solana/wallet-adapter-torus
lerna success - @solana/wallet-adapter-walletconnect
lerna success - @solana/wallet-adapter-wallets
✨  Done in 127.89s.

[HRK44]

Having same issue:

Failed to compile.

./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)

Using :

    "@solana/spl-token": "^0.1.8",
    "@solana/wallet-adapter-base": "^0.9.1",
    "@solana/wallet-adapter-material-ui": "^0.16.3",
    "@solana/wallet-adapter-react": "^0.15.1",
    "@solana/wallet-adapter-react-ui": "^0.9.2",
    "@solana/wallet-adapter-wallets": "^0.14.1",
    "@solana/web3.js": "^1.31.0"

[zrus]

@steveluscher Oh, thank you so much. I did it. Last time I was at commit 79ca99a5f6228be8324b211b9361d9da07a02517 so I failed.

[steveluscher]

Those look like old versions, @HRK44. Try to update like @zrus did and let me know if that fixes it!

[HRK44]

@steveluscher I updated the packages to latest, still having same issue, what else do you recommend to do?

current packages:

    "@solana/spl-token": "^0.1.8",
    "@solana/wallet-adapter-base": "^0.9.2",
    "@solana/wallet-adapter-material-ui": "^0.16.3",
    "@solana/wallet-adapter-react": "^0.15.2",
    "@solana/wallet-adapter-react-ui": "^0.9.2",
    "@solana/wallet-adapter-wallets": "^0.14.2",
    "@solana/web3.js": "^1.31.0",

[jordaaash]

@HRK44 can you post a link to a repo that reproduces the issue for you? The material-ui-starter and example projects that use the latest @solana/wallet-adapter-material-ui both work, so it's hard to tell what could be going on from just a few lines of the package.json.

[nixjs]

Having same issue:

../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)

[steveluscher]

I updated the packages to latest, still having same issue, what else do you recommend to do?

It looks like your @solana/wallet-adapter-react-ui dependency is still two point versions old, @HRK44. The latest as of right now is 0.9.4.

It could be that some of you folks have yarn.lock or package-lock.json files that have you locked to 0.9.2, despite you hoping to upgrade to a newer version like 0.9.4. Try this:

rm package-lock.json
rm yarn.lock
rm -rf node_modules
yarn remove @solana/spl-token @solana/wallet-adapter-base @solana/wallet-adapter-material-ui @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets @solana/web3.js
yarn add @solana/spl-token @solana/wallet-adapter-base @solana/wallet-adapter-material-ui @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-wallets @solana/web3.js
yarn install

Fun fact: if you're ever curious exactly what versions are targeted by the version spec in package.json, you can use this handy tool to check it out: https://semver.npmjs.com

[HRK44]

@steveluscher I already tried to uninstall everything, clear node_modules, yarn lock/package lock, yarn cache, update to 0.9.4 etc... Also my friend that is using same repo as me, we compared the versions and the differences in the node_modules installed packages.

My node_modules @solana/wallet-adapter-wallets (and all wallets packages) have .mjs files inside, but my friend has .js and it's working fine on his computer. BitWallet is the first imported wallet in the list that's why it's erroring out with bitwallet I'm guessing. Not sure why the packages have .mjs files - was working fine before without me changing any of my packages, then suddenly this error appeared.

For some reason, his packages have lower version cached so it's working fine for him, pretty sure if he re-install everything from scratch he's gonna face same issue.

[steveluscher]

Hunh. Fascinating. I really want to help. Can anyone (@HRK44, @nguyenvannghi) share a broken project with me so that I can debug?

git archive master | gzip > latest.tgz

[khaIilnafis]

git archive master | gzip > latest.tgz

I was able to replicate the issue although its complaining about BitKeepWalletAdapter.

latest.zip

[steveluscher]

Thanks for that @khaIilnafis! Much to my dismay, I downloaded that export and… was able to build it.

npm install
npm run build

> PACKAGE_NAME@0.1.0 build ~/latest
> react-app-rewired build

Creating an optimized production build...
=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.5.0

YOUR TYPESCRIPT VERSION: 4.5.4

Please only submit bug reports when using the officially supported version.

=============
Compiled with warnings.

src/views/footer/index.tsx
  Line 3:10:  'FontAwesomeIcon' is defined but never used  @typescript-eslint/no-unused-vars
  Line 4:10:  'faDiscord' is defined but never used        @typescript-eslint/no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  511.72 KB  build/static/js/2.40cad717.chunk.js
  24.6 KB    build/static/css/2.290eb0e0.chunk.css
  1.02 KB    build/static/js/main.616eb905.chunk.js
  730 B      build/static/js/runtime-main.319157b8.js
  342 B      build/static/css/main.db2670b6.chunk.css

The project was built assuming it is hosted at ./.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

Let's do this. Can you help me get closer to your setup? In particular, give me the versions of these:

node -v
npm -v
ts-node -v
yarn -v

[BladeRunner713]

@steveluscher I already tried to uninstall everything, clear node_modules, yarn lock/package lock, yarn cache, update to 0.9.4 etc... Also my friend that is using same repo as me, we compared the versions and the differences in the node_modules installed packages.

My node_modules @solana/wallet-adapter-wallets (and all wallets packages) have .mjs files inside, but my friend has .js and it's working fine on his computer. BitWallet is the first imported wallet in the list that's why it's erroring out with bitwallet I'm guessing. Not sure why the packages have .mjs files - was working fine before without me changing any of my packages, then suddenly this error appeared.

For some reason, his packages have lower version cached so it's working fine for him, pretty sure if he re-install everything from scratch he's gonna face same issue.

I have the same issue.

[lillichoung]

Same issue here, I have: "@solana/wallet-adapter-base": "^0.9.2", "@solana/wallet-adapter-phantom": "^0.9.2", "@solana/wallet-adapter-react": "^0.15.2", "@solana/wallet-adapter-react-ui": "^0.9.4", "@solana/wallet-adapter-wallets": "^0.14.2", "@solana/web3.js": "^1.32.0",

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

[steveluscher]

@lillichoung and @gaolingxiao, can you do this for me so that I can get closer to your env to test it out?

node -v
npm -v
ts-node -v
yarn -v

[HRK44]

@steveluscher that's for me :

node v16.13.1
npm 8.3.0
ts node v10.4.0
yarn 1.22.15

[lillichoung]

node v16.13.1
npm 8.1.2
ts node v10.4.0
yarn 1.22.17

 "dependencies": {
    "@bundlr-network/client": "^0.5.7",
    "@solana/wallet-adapter-base": "^0.9.2",
    "@solana/wallet-adapter-phantom": "^0.9.2",
    "@solana/wallet-adapter-react": "^0.15.2",
    "@solana/wallet-adapter-react-ui": "^0.9.4",
    "@solana/wallet-adapter-wallets": "^0.14.2",
    "@solana/web3.js": "^1.32.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^2.1.2"

@steveluscher here's mine!

[steveluscher]

Thanks for your patience everyone. I was able to repro this with Create React App version 4.

nvm install 16.13.1 && nvm use 16.13.1
npx create-react-app my_app --scripts-version 4.0.3
cd my_app
npm install --save \
  @bundlr-network/client@0.5.7 \
  @solana/wallet-adapter-base@0.9.2 \
  @solana/wallet-adapter-phantom@0.9.2 \
  @solana/wallet-adapter-react@0.15.2 \
  @solana/wallet-adapter-react-ui@0.9.4 \
  @solana/wallet-adapter-wallets@0.14.2 \
  @solana/web3.js@1.32.0 \
  @testing-library/jest-dom@5.16.1 \
  @testing-library/react@12.1.2 \
  @testing-library/user-event@13.5.0 \
  react@17.0.2 \
  react-dom@17.0.2 \
  react-router-dom@6.2.1 \
  react-scripts@4.0.3 \
  web-vitals@2.1.2

Using that as the preamble, importing anything from @solana/wallet-adapter-wallets failed as you all have described.

Here's what I think is going on:

For folks using Create React App v4: the build system simply doesn't support Ecmascript modules. In order to reconfigure CRA4 to recognize .mjs files, I tried this, which worked:

npm install --save-dev react-app-rewired
sed -i '' 's/react-scripts /react-app-rewired /g' package.json
touch config-overrides.js

Then open config-overrides.js and add the following:

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto",
  });
  return webpackConfig;
};

For folks using Create React App v5: follow along in https://github.com/solana-labs/wallet-adapter/issues/241

Try that, and let me know if it worked!

[jordaaash]

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.

[jordaaash]

Closing this issue as I believe it's been fixed by #241. Please upgrade all your wallet-adapter dependencies and try again. CRA4 won't work, but CRA5 should. If this works (or doesn't work) please let me know and I'll reopen and figure it out!

[BladeRunner713]

It works for me. Thank you.

[steveluscher]

Awesome! Glad to hear it, @gaolingxiao.

[akutruff]

Unfortunately, some of us are stuck on CRA4 until craco upgrades...

[jordaaash]

Unfortunately, some of us are stuck on CRA4 until craco upgrades...

Yeah I would honestly just suggest using Parcel, which is very easy to switch to. We will probably not support CRA4.

[RieserStern]

I don't know how to Integrate @solana/wallet-adapter-base and use Phantom only for wallet connection

[jordaaash]

@RainRiver5014 we don't use Github for general developer support. Please direct questions to Discord rather than unrelated issues.

[Sotatek-HaiPhi]

I tried the second line command and I got this issue, can you please help me out @steveluscher

[Sotatek-HaiPhi]

@gaolingxiao I got the same problems with you and I still dont know how to fix it, can you please leave your email and I'll contact you for my solution.

[steveluscher]

Hey @Sotatek-HaiPhi! Just open up your package.json file and replace every instance of react-scripts with react-app-rewired in the scripts section. That's what that failing command aims to do.

[17307149504]

it works for me! thanks a lot!!!

[GtpsFinance]

Anyone managed to fix this issue? ./node_modules/@solana/buffer-layout-utils/lib/esm/web3.mjs Can't import the named export 'PublicKey' from non EcmaScript module (only default export is available)

[asifmuhammad]

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)