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

[skipperklifftech]

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]

I have the same problem with you , not solved yet