Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Failed to resolve 'react-dom/client' from './index.tsx' #1189

Open
skipperklifftech opened this issue May 4, 2024 · 1 comment
Open

Failed to resolve 'react-dom/client' from './index.tsx' #1189

skipperklifftech opened this issue May 4, 2024 · 1 comment

Comments

@skipperklifftech
Copy link

skipperklifftech commented May 4, 2024

Current Behavior

package.json file of example folder.
NOTE: I have upgraded all the libraries here.

{
  "name": "example",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "react": "^18.3.1",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^18.3.1"
  },
  "alias": {
    "react": "../node_modules/react",
    "react-dom": "../node_modules/react-dom/profiling",
    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
  },
  "devDependencies": {
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.0",
    "buffer": "^6.0.3",
    "parcel": "2.12.0",
    "process": "^0.11.10",
    "typescript": "^5.4.5"
  }
}

and the code of <tsdx project>/example/index.tsx file is as following

// the code of <tsdx project>/example/index.tsx
import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { abc } from '../.';

const App = () => {
  return (
    <div>
      <abc />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

I was trying to create an NPM library and finished the code. when I npm run build it compiles the code. I switched to the example folder and ran the npm install && npm run start command. initially, the code is compiled and a server is started on http://127.0.0.1:1234. When I opened the browser it says

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

I checked everything including manually in the node_module folder of both the main project and the example folder but all my versions of react and react-dom were the latest i.e. 18.3.1

as per recommendation, I updated the code of <tsdx project>/example/index.tsx file as follows

// the code of <tsdx project>/example/index.tsx
import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { abc } from '../.';

const App = () => {
  return (
    <div>
      <abc />
    </div>
  );
};

const container = document.getElementById('root') as HTMLElement;
const root = ReactDOM.createRoot(container!);
root.render(<App/>);

but now when I am running npm run start I am getting a terminal console error that says

npm run start

> [email protected] start
> parcel index.html

Server running at http://localhost:1234
🚨 Build failed.

@parcel/core: Failed to resolve 'react-dom/client' from './index.tsx'

  /Users/hitesh/Workspace/<project>/example/index.tsx:4:27
    3 | // import * as ReactDOM from 'react-dom';
  > 4 | import * as ReactDOM from 'react-dom/client';
  >   |                           ^^^^^^^^^^^^^^^^^^
    5 | // import { createRoot } from 'react-dom/client';

@parcel/resolver-default: Cannot load file '../node_modules/react-dom/profiling/client' in './'.
💡 Did you mean '_./node_modules/react-dom/profiling_'?
💡 Did you mean '_./node_modules/react-dom/client_'?

Expected behaviour

Basically, I have tried both ways but neither way is success for me. so I have updated all the libraries as shown above in the package.json file of example folder. Yes, it's an updated one and the behaviour is the same. I have even cleared the cache, removed .cached, node_module or both project root and example folder andpackage-lock.json file as well several times

Suggested solution(s)

I don't have a solution and seeking it as of now

Additional context

npm -v
10.5.0

node -v
v20.12.2

Your environment

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 305.48 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
  Browsers:
    Brave Browser: 119.1.60.110
    Chrome: 124.0.6367.119
    Edge: 114.0.1823.55
    Safari: 17.4.1
  npmPackages:
    tsdx: ^0.14.1 => 0.14.1 
    typescript: ^3.9.10 => 3.9.10
@mask2012
Copy link

I have the same problem with you , not solved yet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants