javascript - Ufanget TypeError: Klarte ikke å løse modulspesifikatoren "react-dom/client". --- Bruker Express-server og TypeScript-klient

Full feil:

Ser denne feilen på klientsiden, i nettleserkonsollen, når jeg prøver å importere react-modulene fra serverens node_modules-mappe.

Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".

Rediger: Jeg ser denne feilen i klienten/i nettleserkonsollen, når jeg prøver å importere en modul fra node_modules-mappen min på serveren, ved å bruke en ikke-relativ sti. Mesteparten av React-eksemplene jeg har sett bruker denne ikke-relative referansen, så jeg forstår ikke hvorfor det ikke fungerer for meg siden jeg trodde React er ment å kjøre på klienten for klient-side rendering, så jeg antar at dette er et vanlig brukstilfelle.

Jeg lager mitt første nettsted for å lære ulike webteknologier, og nå lærer jeg React. Jeg vil legge til React i mitt eksisterende prosjekt ved å lage noen komponenter som kan brukes på sidene mine. Derfor har jeg ikke brukt "Create React App" siden jeg vil legge det til i min eksisterende oppsett.

Jeg har:

  • En Express-server skrevet i JavaScript/NodeJS
  • Klient-side kode er skrevet i TypeScript
  • Jeg bruker Pug for å generere HTML på serveren, men det er sannsynligvis ikke relevant.
  • Jeg bruker npm for å administrere react-, express- osv. pakker
  • Jeg bruker ingenting til sammenkobling

Jeg har sett mange lignende spørsmål, men kan ikke finne løsninger som hjelper meg. Folk ser ut til å bruke webpack eller snakker om bundling, noe jeg har ignorert så langt siden jeg ikke har hatt behov for det.

Jeg har laget en enkel side i prosjektet mitt som etterligner oppsettet mitt for å forenkle undersøkelsen - en statisk HTML-fil, som inkluderer en .ts-fil som et modul, som importerer en .tsx-fil. Jeg får fortsatt feilen her.

Mappestruktur:

BudgetV1
  |- node_modules
  | |- @types
  | | |- react
  | | |- react-dom
  | |- react  
  | |- react-dom
  |
  |- public
  | |- reactPractice.html
  |
  |- scripts
  | |- practicingReact.ts
  | |- helpInsertReact.tsx
  |
  |- app.js
  |- package.json
  |- tsconfig.json

package.json

{
  "name": "budgetv1pug",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "devstart": "nodemon ./bin/www",
    "serverstart": "SET DEBUG=budgetv1pug:* & npm run devstart"
  },
  "dependencies": {
    "async": "^3.2.4",
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "express-validator": "^6.14.2",
    "http-errors": "~1.6.3",
    "mongoose": "^6.6.2",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "nodemon": "^2.0.20"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2015",
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./public/out",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "watch": true,
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "allowSyntheticDefaultImports": true,
  },
  "include": ["./scripts/*"]
}

app.js

const express = require('express');
const path = require('path');

const app = express();

// Set up mongoose connection
.....

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(express.static(path.join(__dirname, 'node_modules'))); // Tried adding this but didn't help.

app.use('/', catalogRouter)

// ...
// More unrelated app.use() setup calls
// ...

module.exports = app;

reactØvelse.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>React</title>
</head>

<body>
    <h1>Hi</h1>
    <script src="./out/practicingReact.js" type="module"></script>
    <div id="root"></div>
</body>
</html>

practicingReact.ts

import insertReact from "./reactComponents/helpInsertReact.js";

window.addEventListener("DOMContentLoaded", function (e) {
    console.log("DOMContentLoaded");
    insertReact();
});

helpInsertReact.tsx

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client"; // Problem line

export default function insertReact() {
    console.log("insertReact");
    let rootDiv: HTMLElement = document.getElementById("root")!;
    const root = createRoot(rootDiv);
}

Og til slutt i nettleserens utviklerverktøy Console, feilen ved innlasting av siden:

Uncaught TypeError: Failed to resolve module specifier "react-dom/client". Relative references must start with either "/", "./", or "../".

i reactPractice.html:1

Merk at hvis jeg legger til en linje i helpInsertReact.tsx som bruker noe fra "react", får jeg en lignende feil for 'modulspesifikator "react"'.

Jeg kan se GET-forespørselen for helpInsertReact.js komme inn på serveren min, men jeg kan ikke se filen i Kilder-fanen i nettleserens utviklerverktøy. Jeg antar at den ikke engang begynner å kjøre på grunn av 'klarte ikke å løse...' feilen

Relaterte artikler