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

akutruff · 2021-12-14T21:16:49Z

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

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

jordaaash · 2021-12-15T00:23:00Z

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.

jordaaash · 2021-12-15T00:26:23Z

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

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

akutruff · 2021-12-15T01:24:37Z

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.

jordaaash · 2021-12-15T01:25:48Z

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

akutruff · 2021-12-15T01:28:21Z

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. :(

jordaaash · 2021-12-15T01:38:53Z

Let me know if you find anything about the issue!

nicholas-ewasiuk · 2021-12-20T23:47:39Z

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.

jordaaash · 2021-12-20T23:51:10Z

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.

dlazares · 2021-12-21T20:01:37Z

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

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

kevinforrestconnors · 2021-12-21T23:10:33Z

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

KrzysztofZawisla · 2021-12-22T16:58:04Z

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

kevinforrestconnors · 2021-12-22T20:15:41Z

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

jordaaash · 2021-12-22T20:24:25Z

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

kevinforrestconnors · 2021-12-23T02:38:44Z

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

Which config file does this code need to be in?

jordaaash · 2021-12-23T02:39:42Z

@kevinforrestconnors see reduxjs/redux#4174 for that

kevinforrestconnors · 2021-12-23T03:57:11Z

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

jordaaash · 2021-12-23T04:01:38Z

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

kevinforrestconnors · 2021-12-24T19:55:44Z

@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-dev · 2022-01-01T15:48:46Z

@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

KrzysztofZawisla · 2022-01-01T16:01:44Z

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

cogoo · 2022-01-01T16:23:58Z

@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",

cogoo · 2022-01-01T16:26:16Z

@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-dev · 2022-01-01T16:30:35Z

@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

jordaaash · 2022-01-01T17:44:15Z

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.

jordaaash added bug Something isn't working help wanted Extra attention is needed labels Dec 15, 2021

jordaaash added the blocked Blocked by another issue or PR label Dec 20, 2021

jordaaash closed this as completed Jan 1, 2022

jeremyckahn mentioned this issue Aug 13, 2022

fix: Use fully qualified module names dmotz/trystero#21

Merged

cjjeon mentioned this issue Nov 10, 2022

Error: Can't resolve 'use-sync-external-store/shim/with-selector' in '/../node_modules/@slate-yjs/react/dist' BitPhinix/slate-yjs#366

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

akutruff commented Dec 14, 2021 •

edited

jordaaash commented Dec 15, 2021

jordaaash commented Dec 15, 2021

akutruff commented Dec 15, 2021

jordaaash commented Dec 15, 2021

akutruff commented Dec 15, 2021

jordaaash commented Dec 15, 2021

nicholas-ewasiuk commented Dec 20, 2021

jordaaash commented Dec 20, 2021

dlazares commented Dec 21, 2021

kevinforrestconnors commented Dec 21, 2021 •

edited

KrzysztofZawisla commented Dec 22, 2021

kevinforrestconnors commented Dec 22, 2021

jordaaash commented Dec 22, 2021

kevinforrestconnors commented Dec 23, 2021

jordaaash commented Dec 23, 2021

kevinforrestconnors commented Dec 23, 2021

jordaaash commented Dec 23, 2021

kevinforrestconnors commented Dec 24, 2021 •

edited

gre-dev commented Jan 1, 2022

KrzysztofZawisla commented Jan 1, 2022

cogoo commented Jan 1, 2022

cogoo commented Jan 1, 2022

gre-dev commented Jan 1, 2022

jordaaash commented Jan 1, 2022

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

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

Comments

akutruff commented Dec 14, 2021 • edited

jordaaash commented Dec 15, 2021

jordaaash commented Dec 15, 2021

akutruff commented Dec 15, 2021

jordaaash commented Dec 15, 2021

akutruff commented Dec 15, 2021

jordaaash commented Dec 15, 2021

nicholas-ewasiuk commented Dec 20, 2021

jordaaash commented Dec 20, 2021

dlazares commented Dec 21, 2021

kevinforrestconnors commented Dec 21, 2021 • edited

KrzysztofZawisla commented Dec 22, 2021

kevinforrestconnors commented Dec 22, 2021

jordaaash commented Dec 22, 2021

kevinforrestconnors commented Dec 23, 2021

jordaaash commented Dec 23, 2021

kevinforrestconnors commented Dec 23, 2021

jordaaash commented Dec 23, 2021

kevinforrestconnors commented Dec 24, 2021 • edited

gre-dev commented Jan 1, 2022

KrzysztofZawisla commented Jan 1, 2022

cogoo commented Jan 1, 2022

cogoo commented Jan 1, 2022

gre-dev commented Jan 1, 2022

jordaaash commented Jan 1, 2022

akutruff commented Dec 14, 2021 •

edited

kevinforrestconnors commented Dec 21, 2021 •

edited

kevinforrestconnors commented Dec 24, 2021 •

edited