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

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

Closed ntirinigaSr closed 2 years ago

ntirinigaSr commented 2 years ago

After changing react-scripts from version "5.0.0" to "4.0.3" and installed solana wallets adapters successfully. Then importing this @solana-wallet-react brings this error,

./node_modules/@solana/wallet-adapter-react/lib/esm/WalletProvider.js 27:29 Module parse failed: Unexpected token (27:29) File was processed with these loaders:

Has anyone got this kind of error?

cogoo commented 2 years ago

After changing react-scripts from version "5.0.0" to "4.0.3" and installed solana wallets adapters successfully. Then importing this @solana-wallet-react brings this error,

./node_modules/@solana/wallet-adapter-react/lib/esm/WalletProvider.js 27:29 Module parse failed: Unexpected token (27:29) File was processed with these loaders:

  • ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | connected | }, setState] = useState(initialState);

const readyState = adapter?.readyState || WalletReadyState.Unsupported; | const [connecting, setConnecting] = useState(false); | const [disconnecting, setDisconnecting] = useState(false);

Has anyone got this kind of error?

Would it be possible to share a link to a repository that has this issue or could you share the code that causes this issue?

I've just started a new react app with CRA and couldn't reproduce this issue.

Could you check your package.json to see if you're using the latest version of the wallet related packages.

"@solana/wallet-adapter-base": "^0.9.0",
"@solana/wallet-adapter-react": "^0.15.0",
"@solana/wallet-adapter-wallets": "^0.14.0",
"@solana/web3.js": "^1.31.0",
ntirinigaSr commented 2 years ago

CODES IMPORTS

` PACKAGE.JSON

AFTER IMPORTING EITHER @solana/wallet-adapter-base or @solana/wallet-adapter-wallets I GET THIS ERROR ./node_modules/@solana/wallet-adapter-base/lib/esm/signer.js 16:16 Module parse failed: Unexpected token (16:16) File was processed with these loaders:

AND I IMPORT ONLY @solana/wallet-adapter-react I GET THIS ONE `./node_modules/@solana/wallet-adapter-react/lib/esm/WalletProvider.js 27:29 Module parse failed: Unexpected token (27:29) File was processed with these loaders:

AND THAT'S IT

zhangxiaoshang commented 2 years ago

image

I have the same error

jordaaash commented 2 years ago

These kind of issues are generally caused by something wrong with your project configuration.

First, please check out this starter project which is built using CRA: https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/react-ui-starter

Try to see if anything in your configuration is different.

If you can't figure it out, please post a link to a repository that reproduces your issue -- we'll need the entire thing to be able to see why it's not building.

cogoo commented 2 years ago

@ntirinigaSr @zhangxiaoshang

I've noticed that the default create-react-app ships with some incompatible configurations. 

 "browserslist": {
    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      "defaults"
    ]

Making the above changes in package.json will resolve the above issues. You can check out some browserlist options

CC: @jordansexton

jordaaash commented 2 years ago

@cogoo great find, that's really interesting. Any idea why it is that "last 1 * version" is no good?

ntirinigaSr commented 2 years ago

Errors still exists, It's not about browserlist I think and may be something else which I don't know

cogoo commented 2 years ago

Errors still exists, It's not about browserlist I think and may be something else which I don't know

Could you share your entire package.json or share a link to the repo that has the error?

dranikpg commented 2 years ago

Same issue. I've created a fresh react app with create-react-app 5.0.0 (the latest) and ran into the same issue. Updating the browserlist fixed the issue. However, a lot of babel incompatibilities follow that have to be resolved manually 😞

felixtilli commented 2 years ago

I get this problem when using the latest packages. I have tried the browserlist change without any result.

My project works fine when I use: "@project-serum/anchor": "^0.15.0" "@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.26.0",

ntirinigaSr commented 2 years ago

GITHUB https://github.com/ntirinigaSr/nft-ui

jordaaash commented 2 years ago

I get this problem when using the latest packages. I have tried the browserlist change without any result.

My project works fine when I use: "@project-serum/anchor": "^0.15.0" "@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.26.0",

These are all older versions than the latest. Please follow these instructions: https://github.com/solana-labs/wallet-adapter#build-from-source

This will help you run the react-ui-project, which uses Create React App.

akutruff commented 2 years ago

I pulled the repo and followed the instructions to the letter for the starter. The current version of the code in the repo unfortunately produces this error with zero changes:

Failed to compile.

/workspaces/solana-wallet-adapter/packages/core/base/lib/esm/signer.js 19:16
Module parse failed: Unexpected token (19:16)
File was processed with these loaders:
 * ../../../node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ../../../node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|           ...sendOptions
|         } = options;
>         signers?.length && transaction.partialSign(...signers);
|         transaction = await this.signTransaction(transaction);
|         const rawTransaction = transaction.serialize();
jordaaash commented 2 years ago

Thanks for reporting! I'll try it out.

cogoo commented 2 years ago

GITHUB https://github.com/ntirinigaSr/nft-ui

@ntirinigaSr

Thanks, I looked at this and your error is not related to the wallet adapter packages. It's an unrelated error about react hooks.

akutruff commented 2 years ago

Tried material ui starter as well. Sorry to nudge, but any idea on when a fixed package will be published? I'm 100% blocked by the wallet adapter unfortunately.

Also, any way to add tests to CI to verify packages to avoid this going forward?

jordaaash commented 2 years ago

We're working on a fix now! We'll update the thread when it ships.

jordaaash commented 2 years ago

If you're blocked and need a workaround now, I recommend the Next.js starter project and example which don't have the issues that CRA does right now.

akutruff commented 2 years ago

We're working on a fix now! We'll update the thread when it ships.

Thanks so much!

jordaaash commented 2 years ago

This is fixed! Huge thanks to @cogoo for working all day on this. All the Next.js and Create React App 4-based starter projects build and run now.

However, CRA 5 is not supported yet. See https://github.com/solana-labs/wallet-adapter/issues/241#issuecomment-1006239019 for context.

akutruff commented 2 years ago

Wooo! Thanks!

On Wed, Jan 5, 2022 at 9:44 PM Jordan Sexton @.***> wrote:

This is fixed! Huge thanks to @cogoo https://github.com/cogoo for working all day on this. All the Next.js and Create React App 4-based starter projects build and run now.

However, CRA 5 is not supported yet. See #241 (comment) https://github.com/solana-labs/wallet-adapter/issues/241#issuecomment-1006239019 for context.

— Reply to this email directly, view it on GitHub https://github.com/solana-labs/wallet-adapter/issues/236#issuecomment-1006239952, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGVMQJGIVJWLNWMGV62FYDUUT6XHANCNFSM5LCRIDRA . You are receiving this because you commented.Message ID: @.***>

akutruff commented 2 years ago

Is this going to get reflected in the main NPM soon, or does this only fix the starters? I see the change is basically a yarn.lock and tsconfig change.

jordaaash commented 2 years ago

Yeah, I'll need to publish all the packages today. It fixes the starters when run from source, but only because their deps are resolved locally

jordaaash commented 2 years ago

@akutruff

Published:

akutruff commented 2 years ago

Worked like a charm! Thanks so much to both of you. =D

zhangxiaoshang commented 2 years ago

It still has some problems

That's what I do:

Step 1:

yarn create next-app --typescript

Step 2:

yarn add @solana/wallet-adapter-base \
         @solana/wallet-adapter-react \
         @solana/wallet-adapter-react-ui \
         @solana/wallet-adapter-wallets \
         @solana/web3.js \
         react

Step 3: Update index.tsx

Then I get: image

Here is the simple repo: https://github.com/zhangxiaoshang/nextjs-solana-wallet-example

jordaaash commented 2 years ago

@zhangxiaoshang this is probably because yarn create next-app is using the latest version of Next (v12) which isn't supported yet. See #246

zhangxiaoshang commented 2 years ago

@zhangxiaoshang this is probably because yarn create next-app is using the latest version of Next (v12) which isn't supported yet. See #246

yes, when I use "next": "11.0.0", It works.