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

chrisirhc · 2022-01-16T16:30:05Z

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.

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

jordaaash · 2022-01-16T17:00:27Z

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 · 2022-01-17T03:43:41Z

This looks like mui/material-ui#30510 might fix it.

zrus · 2022-01-17T03:46:47Z

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 · 2022-01-17T04:02:14Z

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 16fb5cc) 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 · 2022-01-17T05:39:41Z

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 · 2022-01-17T06:21:14Z

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

steveluscher · 2022-01-17T06:29:13Z

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

HRK44 · 2022-01-17T17:25:27Z

@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 · 2022-01-19T00:26:59Z

@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 · 2022-01-19T02:50:56Z

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 · 2022-01-19T03:59:43Z

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 · 2022-01-19T06:36:20Z

@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 · 2022-01-19T06:52:17Z

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 · 2022-01-19T14:39:02Z

git archive master | gzip > latest.tgz

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

latest.zip

steveluscher · 2022-01-20T01:48:07Z

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 · 2022-01-22T04:33:10Z

@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 · 2022-01-22T22:53:41Z

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 · 2022-01-25T05:55:01Z

@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 · 2022-01-25T06:21:16Z

@steveluscher that's for me :

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

lillichoung · 2022-01-26T03:39:25Z

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 · 2022-01-31T01:04:57Z

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 #241

Try that, and let me know if it worked!

jordaaash · 2022-01-31T04:01:11Z

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 · 2022-02-02T00:58:25Z

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 · 2022-02-02T01:16:37Z

It works for me. Thank you.

steveluscher · 2022-02-02T04:12:18Z

Awesome! Glad to hear it, @gaolingxiao.

akutruff · 2022-02-02T19:48:46Z

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

jordaaash · 2022-02-02T19:50:13Z

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 · 2022-03-08T21:12:29Z

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

jordaaash · 2022-03-08T21:16:21Z

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

Sotatek-HaiPhi · 2022-03-25T06:07:46Z

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

Sotatek-HaiPhi · 2022-03-25T06:13:14Z

@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 · 2022-03-25T07:12:57Z

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 · 2022-06-02T03:12:03Z

it works for me! thanks a lot!!!

GtpsFinance · 2023-01-16T16:30:15Z

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 · 2023-01-19T12:34:33Z

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)

HRK44 referenced this issue Jan 17, 2022

have vite output .mjs file

bf7ce53

sparkydasrath mentioned this issue Jan 18, 2022

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

Closed

ieow mentioned this issue Jan 31, 2022

cra 4.0 with latest Solana-wallet-adapter exiled-apes/candy-machine-v2-mint#2

Open

steveluscher mentioned this issue Jan 31, 2022

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

Closed

jordaaash closed this as completed Feb 2, 2022

dtand mentioned this issue Mar 22, 2022

Can't import the named export 'bool' from non EcmaScript module (only default export is available) - spl-token@0.2.0 solana-labs/solana-program-library#3014

Closed

zaxozhu mentioned this issue Apr 6, 2022

fix: fixed-price-sale broken packages metaplex-foundation/metaplex-program-library#358

Merged

michalko mentioned this issue May 17, 2022

./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) solana-labs/solana#25197

Closed

markgalang mentioned this issue Jun 22, 2022

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

Closed

magicdima mentioned this issue Nov 16, 2022

./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) solana-labs/solana-program-library#3723

Closed

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

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

Comments

chrisirhc commented Jan 16, 2022

jordaaash commented Jan 16, 2022

steveluscher commented Jan 17, 2022

zrus commented Jan 17, 2022

steveluscher commented Jan 17, 2022

HRK44 commented Jan 17, 2022 • edited Loading

zrus commented Jan 17, 2022

steveluscher commented Jan 17, 2022

HRK44 commented Jan 17, 2022

jordaaash commented Jan 19, 2022

nixjs commented Jan 19, 2022

steveluscher commented Jan 19, 2022 • edited Loading

HRK44 commented Jan 19, 2022 • edited Loading

steveluscher commented Jan 19, 2022

khaIilnafis commented Jan 19, 2022

steveluscher commented Jan 20, 2022

BladeRunner713 commented Jan 22, 2022

lillichoung commented Jan 22, 2022

steveluscher commented Jan 25, 2022

HRK44 commented Jan 25, 2022

lillichoung commented Jan 26, 2022

steveluscher commented Jan 31, 2022

jordaaash commented Jan 31, 2022

jordaaash commented Feb 2, 2022

BladeRunner713 commented Feb 2, 2022

steveluscher commented Feb 2, 2022

akutruff commented Feb 2, 2022

jordaaash commented Feb 2, 2022

RieserStern commented Mar 8, 2022

jordaaash commented Mar 8, 2022

Sotatek-HaiPhi commented Mar 25, 2022

Sotatek-HaiPhi commented Mar 25, 2022

steveluscher commented Mar 25, 2022

17307149504 commented Jun 2, 2022

GtpsFinance commented Jan 16, 2023

asifmuhammad commented Jan 19, 2023 • edited Loading

HRK44 commented Jan 17, 2022 •

edited

Loading

steveluscher commented Jan 19, 2022 •

edited

Loading

HRK44 commented Jan 19, 2022 •

edited

Loading

asifmuhammad commented Jan 19, 2023 •

edited

Loading