Building a fresh project with create react app gives a module error.

Question

Building a fresh project with create react app gives a module error.

akutruff opened this issue 2 years ago · comments

Describe the bug
Building a fresh project with create react app gives an error. Note, that this is with create react app v5.

node ➜ /workspaces/dapwords/dapwords/app (main ✗) $ yarn build
yarn run v1.22.15
warning ../package.json: No license field
$ react-scripts build
Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve './ConnectionProvider' in '/workspaces/dapwords/dapwords/app/node_modules/@solana/wallet-adapter-react/lib'
Did you mean 'ConnectionProvider.js'?
BREAKING CHANGE: The request './ConnectionProvider' 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.


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

To Reproduce
Steps to reproduce the behavior:

yarn create react-app app --template typescript
cd app
yarn add @solana/wallet-adapter-wallets  @solana/wallet-adapter-base @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/web3.js

Then copy your example code into the project.

yarn build

Expected behavior
builds

Jordan · Answer 1 · Wed Dec 15 2021 08:23:00 GMT+0800 (China Standard Time)

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.

Jordan · Answer 2 · Wed Dec 15 2021 08:26:23 GMT+0800 (China Standard Time)

A potential workaround is described here: reduxjs/redux#4174

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

Andy Kutruff · Answer 3 · Wed Dec 15 2021 09:24:37 GMT+0800 (China Standard Time)

Thanks for the reply. I'm not expert, so forgive me if I'm mistaken, but I think doing webpack config modifications requires the create-react-app project to eject, right?

I verified that it works fine in CRA v4.

Jordan · Answer 4 · Wed Dec 15 2021 09:25:48 GMT+0800 (China Standard Time)

I'm also not an expert on CRA. But I think you can customize your config without ejecting using https://github.com/gsoft-inc/craco

Andy Kutruff · Answer 5 · Wed Dec 15 2021 09:28:21 GMT+0800 (China Standard Time)

I saw that project in the react-ui starter and thought it would help but Craco only supports CRA v4 according to their current readme. :(

Jordan · Answer 6 · Wed Dec 15 2021 09:38:53 GMT+0800 (China Standard Time)

Let me know if you find anything about the issue!

Nick · Answer 7 · Tue Dec 21 2021 07:47:39 GMT+0800 (China Standard Time)

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.

Jordan · Answer 8 · Tue Dec 21 2021 07:51:10 GMT+0800 (China Standard Time)

Yeah, I would recommend to anyone reading this to not use CRA v5 until dilanx/craco#353 is resolved and we can upgrade the starter packages here with an updated version of Craco.

Diego · Answer 9 · Wed Dec 22 2021 04:01:37 GMT+0800 (China Standard Time)

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

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

Kevin Connors · Answer 10 · Wed Dec 22 2021 07:10:33 GMT+0800 (China Standard Time)

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.

Worked for me beautifully. Thanks

edit: doesn't work for tests, unfortunately. only for building

Krzysztof Zawisła · Answer 11 · Thu Dec 23 2021 00:58:04 GMT+0800 (China Standard Time)

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

Kevin Connors · Answer 12 · Thu Dec 23 2021 04:15:41 GMT+0800 (China Standard Time)

Is there any fix to this? "react-scripts": "^4.0.3" does not fix the issue with react-scripts test

Jordan · Answer 13 · Thu Dec 23 2021 04:24:25 GMT+0800 (China Standard Time)

@kevinforrestconnors did you try running the code in the CRA-based starter projects?

Kevin Connors · Answer 14 · Thu Dec 23 2021 10:38:44 GMT+0800 (China Standard Time)

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

Which config file does this code need to be in?

Jordan · Answer 15 · Thu Dec 23 2021 10:39:42 GMT+0800 (China Standard Time)

@kevinforrestconnors see reduxjs/redux#4174 for that

Kevin Connors · Answer 16 · Thu Dec 23 2021 11:57:11 GMT+0800 (China Standard Time)

@kevinforrestconnors see reduxjs/redux#4174 for that

I installed craco and ran the tests using this config:

craco.config.js

module.exports = {
  webpack: {
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
  },
};

Same issue,

 ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from './useWalletModal';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token 'export'

Jordan · Answer 17 · Thu Dec 23 2021 12:01:38 GMT+0800 (China Standard Time)

@kevinforrestconnors there isn't enough context to know what the issue is from an error like that. I'm happy to take a look, but please provide a link to a repository that reproduces the issue for you and steps on how to reproduce it.

Kevin Connors · Answer 18 · Sat Dec 25 2021 03:55:44 GMT+0800 (China Standard Time)

@kevinforrestconnors there isn't enough context to know what the issue is from an error like that. I'm happy to take a look, but please provide a link to a repository that reproduces the issue for you and steps on how to reproduce it.

thanks for taking a look, here is a reproducible repo https://github.com/kevinforrestconnors/reproducible-issue

to reproduce, npm i && npm test

GRE Development Ltd. · Answer 19 · Sat Jan 01 2022 23:48:46 GMT+0800 (China Standard Time)

@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

Krzysztof Zawisła · Answer 20 · Sun Jan 02 2022 00:01:44 GMT+0800 (China Standard Time)

@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.

C.OG · Answer 21 · Sun Jan 02 2022 00:23:58 GMT+0800 (China Standard Time)

@kevinforrestconnors there isn't enough context to know what the issue is from an error like that. I'm happy to take a look, but please provide a link to a repository that reproduces the issue for you and steps on how to reproduce it.

thanks for taking a look, here is a reproducible repo https://github.com/kevinforrestconnors/reproducible-issue

to reproduce, npm i && npm test

Updating to the latest version of these packages fixes the issue

    "@solana/wallet-adapter-base": "^0.9.0",
    "@solana/wallet-adapter-react": "^0.15.0",
    "@solana/wallet-adapter-react-ui": "^0.8.0",
    "@solana/wallet-adapter-wallets": "^0.14.0",

C.OG · Answer 22 · Sun Jan 02 2022 00:26:16 GMT+0800 (China Standard Time)

@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

Could you share what you're trying to import?

From the error it looks like you're trying to do a deep import, consider importing from the root of the package:

import {Adapter} from '@solana/wallet-adapter-wallets';

GRE Development Ltd. · Answer 23 · Sun Jan 02 2022 00:30:35 GMT+0800 (China Standard Time)

@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 <3

Jordan · Answer 24 · Sun Jan 02 2022 01:44:15 GMT+0800 (China Standard Time)

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.