wallet-adapter: Building a fresh project with create react app gives a module error.

A potential workaround is described here: https://github.com/reduxjs/redux/issues/4174

  {
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  },

Had the exact same issue using CRA v5. Not sure if this is a good solution, but manually changing the package.json to “react-scripts”: “^4.0.3” and running “yarn install” after worked for me.

It looks like this is an issue coming from react-scripts v5, which is what the new app is being initialized with.

The react-ui-starter project builds as expected with react-scripts v4: https://github.com/solana-labs/wallet-adapter/blob/52c5195cb64ed3b8aec00e104b2cafc681818c2c/packages/starter/react-ui-starter/package.json#L43

Looking @ https://github.com/facebook/create-react-app/releases/tag/v5.0.0 it seems like the switch the Webpack 5, or maybe the eslint changes, could be responsible.

Closing since it seems like the issues are fixed in the current release which ships proper ESM and CJS builds. Thanks everyone for your input! If you’re still having issues after upgrading, please open a new issue with a reproduction.

@jordansexton, I’m facing the same issue now. But I’m not using Craco. There’s something should be done with my webpack.config.js (I think). Here’s the error I see:

ERROR in ./node_modules/@solana/wallet-adapter-wallets/lib/esm/index.js 17:0-27
Module not found: Error: Can't resolve './adapters' in '/Users/test/Desktop/swap2/node_modules/@solana/wallet-adapter-wallets/lib/esm'
Did you mean 'adapters.js'?
BREAKING CHANGE: The request './adapters' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.jsx 27:0-177
 @ ./src/index.js 4:0-24 13:33-36 18:33-36 23:33-36 28:33-36 33:33-36

Look at my previous answer. It should resolve your problem.

That was really helpful. Thx ❤️

@jordansexton, I’m facing the same issue now. But I’m not using Craco. There’s something should be done with my webpack.config.js (I think).

Here’s the error I see:

ERROR in ./node_modules/@solana/wallet-adapter-wallets/lib/esm/index.js 17:0-27
Module not found: Error: Can't resolve './adapters' in '/Users/test/Desktop/swap2/node_modules/@solana/wallet-adapter-wallets/lib/esm'
Did you mean 'adapters.js'?
BREAKING CHANGE: The request './adapters' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.jsx 27:0-177
 @ ./src/index.js 4:0-24 13:33-36 18:33-36 23:33-36 28:33-36 33:33-36

Look at my previous answer. It should resolve your problem.

I tried today to build an app with my own webpack configuration. For people that tried to do the same thing and get brought here, check this answer on stack overflow + add .mjs loader as dlazares has shown.

https://stackoverflow.com/questions/69431515/how-to-use-webpack-and-web3-in-react

  {
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  },

This worked for me as well. Thanks for the suggestion! Hopefully they fix soon.