Не могу запустить webpack в VS code
Привет начал изучение React по скаченному курсу Skillbox. В VS code выпадает ошибка при вводе webpack во встроенный терминал. Думаю проблема в том что в моем VS code нет React-dom. Подумал из за этого ошибка, в расширениях React-dom не нашел. Преподаватель все манипуляции делает с webstorm, при этом говоря что то по типу тайпскрипт у вас должен быть установлен глобально, нпм должен установлен глобально. Я скачал расширения для VSCODE следующие: ESLint, HTMLintm, JavaScript (ES6) code snippets, Javascript and TypeScript Nightly, Live Server, npm, Path Intellisense, Prettier - Code formatter, React Native Tools, webpack. Файл Package.json выглядит так:
{
"name": "2",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"react": "^17.0.2",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.49.0",
"webpack-cli": "^4.7.2"
},
"dependencies": {},
"description": ""
}
index.jsx выглядит так:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Header } from "./Header";
window.addEventListener('load', () => {
ReactDOM.render(<Header />, document.getElementById('react_root'));
});
Header.jsx выглядит так:
import * as React from 'react';
export function Header() {
return (
<header>
<h1>Reddit for our own</h1>
</header>
);
}
В index.html помимо основной разметки div с id react_root.
Ошибка в терминале:
asset index.js 106 KiB [compared for emit] (name: main)
modules by path ./node_modules/react/ 94.6 KiB
./node_modules/react/index.js 200 bytes [built] [code generated]
./node_modules/react/cjs/react.development.js 94.4 KiB [built] [code generated]
./src/index.jsx 1.22 KiB [built] [code generated]
./node_modules/object-assign/index.js 2.5 KiB [built] [code generated]
ERROR in ./src/index.jsx 23:28-48
Module not found: Error: Can't resolve 'react-dom' in 'K:\work\react\2\src'
resolve 'react-dom' in 'K:\work\react\2\src'
Parsed request is a module
using description file: K:\work\react\2\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
K:\work\react\2\src\node_modules doesn't exist or is not a directory
looking for modules in K:\work\react\2\node_modules
single file module
using description file: K:\work\react\2\package.json (relative path: ./node_modules/react-dom)
no extension
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\node_modules\react-dom doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\node_modules\react-dom.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\node_modules\react-dom.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\node_modules\react-dom.wasm doesn't exist
K:\work\react\2\node_modules\react-dom doesn't exist
looking for modules in K:\work\react\node_modules
single file module
No description file found in K:\work\react\node_modules or above
no extension
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\node_modules\react-dom doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\node_modules\react-dom.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\node_modules\react-dom.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\node_modules\react-dom.wasm doesn't exist
K:\work\react\node_modules\react-dom doesn't exist
K:\work\node_modules doesn't exist or is not a directory
K:\node_modules doesn't exist or is not a directory
ERROR in ./src/index.jsx 24:15-34
Module not found: Error: Can't resolve './Header' in 'K:\work\react\2\src'
resolve './Header' in 'K:\work\react\2\src'
using description file: K:\work\react\2\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
using description file: K:\work\react\2\package.json (relative path: ./src/Header)
no extension
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\src\Header doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\src\Header.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\src\Header.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
K:\work\react\2\src\Header.wasm doesn't exist
as directory
K:\work\react\2\src\Header doesn't exist
webpack 5.49.0 compiled with 2 errors in 3377 ms
Подскажите в чем проблема, если знаете.
Ответы (1 шт):
Перед тем как использовать библиотеку react её нужно установить пропиши в терминале
npm install react react-dom
и в дальнейшем придерживайся этой логики