Why is this reading as undefined for ReactDOM?-CodePudding

I'm trying to just set up a basic react script like this

const subTable = document.getElementById("sub-table");
import React from "react";
import ReactDOM from "react-dom";

 console.log (subTable);
  const App = () => {
    return <div>Hello World!</div>;
  };

  ReactDOM.render(<App />, subTable);

I was originally just using @wordpress/scripts which contained both react and react-dom, but I then also tried installing them directly so now my package shows:


    "@wordpress/scripts": "^25.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",

But, I didn't want to have two copies, so I uninstalled react react-dom and now just have this as my current json

  "devDependencies": {
    "@tailwindcss/typography": "^0.5.7",
    "@wordpress/scripts": "^25.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.0",
    "prettier-plugin-tailwindcss": "^0.2.0",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "axios": "^1.2.0",
    "flowbite": "^1.5.4",
    "tw-elements": "^1.0.0-alpha13"
  }

Reading the ID, this is what the console.log shows

<div id="sub-table"></div>

So I'm at a loss. Any suggestions why I'm getting this error

Cannot read properties of undefined (reading 'render')

Update:

Uninstalled flowbite and tw-elements to make sure their JS isn't interfering. Current json:

  "devDependencies": {
    "@tailwindcss/typography": "^0.5.7",
    "@wordpress/scripts": "^25.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.8.0",
    "prettier-plugin-tailwindcss": "^0.2.0",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "axios": "^1.2.0"
  }

Still getting the undefined render

Update 2:

I noticed that react and react-dom were loading before my JS so I set the priority in the enqueue and now my JS loads after.

This appears to have fixed the problem!

CodePudding user response：

It looks like react-dom does not have a default import, but only named ones. Try it with this:

import * as ReactDOM from 'react-dom';

CodePudding user response：

The react and react-dom files were loading before my JS file. I just had to change the order of load