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

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!

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"

It works for me. Thank you.

git archive master | gzip > latest.tgz

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

latest.zip

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

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.

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?

it works for me! thanks a lot!!!

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