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
> example@1.0.0 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
Current Behavior
package.json
file of example folder. NOTE: I have upgraded all the libraries here.and the code of
<tsdx project>/example/index.tsx
file is as followingI 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 thenpm install && npm run start
command. initially, the code is compiled and a server is started onhttp://127.0.0.1:1234
. When I opened the browser it saysI checked everything including manually in the node_module folder of both the main project and the example folder but all my versions of
react
andreact-dom
were the latest i.e. 18.3.1as per recommendation, I updated the code of
<tsdx project>/example/index.tsx
file as followsbut now when I am running
npm run start
I am getting a terminal console error that saysExpected 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 timesSuggested 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