После npm start браузер выдает ошибку:
Failed to compile ./src/components/App/App.js Module not found: Can't resolve 'react-router-dom'.
React-router-dom был добавлен к зависимостям в npm, и поэтому он имеет response-router и response.
Проект был создан с использованием командной строки create-react-app myapp. Это запускается на локальном хосте, сервере узла. У меня есть папка api и app внутри папки моего проекта. Я пробовал разные вещи. Обновил вручную мой package.json внутри папки приложения, переустановил response-router-dom, удалил package-lock.json в папке приложения и повторно инициализировал его. Моя папка api не содержит ничего, кроме node_modules, моего файла api, route.js, config.js, index.js, а также package.json и package-lock.json. Я пробовал команду сборки npm в папке моего приложения. Он просто создает папку «build», которая содержит те же файлы, что и моя общая папка, внутри моей папки приложения. Я также пробовал запустить yarn add react-router-dom.
//=========App.js file=========
//dependencies
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
//components
import Header from '../Header/Header';
import Footer from '../Footer/Footer';
import Home from '../Pages/Home';
import StudentOverview from '../Pages/StudentOverview';
import StudentDetails from '../Pages/StudentDetails';
import Management from '../Pages/Management';
import StudentAdd from '../Pages/StudentAdd';
import Exercise from '../Exercise/Exercise';
//includes
import '../../../public/css/kdg-fonts.css';
import '../../../public/css/normalize.css';
import '../../../public/css/responsive.css';
import '../../../public/css/say-my-name.css';
import '../../../public/css/style.css';
//Run
class App extends Component {
render() {
return (
<Router>
<div className = "App">
<Route path='*' component = {Header} />
<Route path='*' component = {Footer} />
<Route exact path='/' component = {Home} />
<Route exact path='/studenten' component = {StudentOverview} />
<Route exact path='/studenten/:id' component = {StudentDetails} />
<Route exact path='/beheer' component = {Management} />
<Route exact path='/beheer/add' component = {StudentAdd} />
<Route exact path='/oefenen' component = {Exercise} />
</div>
</Router>
);
}
}
export default App;
//=========appfolder/package.json file=========
{
"name": "saymyname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"gulp": "^4.0.0",
"gulp-changed": "^3.2.0",
"gulp-clean-css": "^4.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.1"
}
}
UPDATE:
npm install -S react-router-domresolved the error.
Либо запустите yarn, либо npm install в папке проекта.
react-dom и react-router-dom - разные библиотеки, вам нужно добавить react-router-dom в список пакетов.
@ShubhamKhatri Я тоже пробовал yarn add react-router-dom. Я просто попробовал npm install -S react-router-dom, и он устранил ошибку. Раньше я пробовал npm i react-router-dom, npm install --save react-router-dom и npm install [email protected]. Почему эти строки не работают? Также спасибо :)
@PaulFitzgerald Я пробовал обе эти команды. Я думаю, что использование npm install -S react-router-dom разрешило ошибку
@Andrew Я сделал это, обновив package.json, и даже после этого мою ошибку не устранил. Установка response-router-dom с использованием npm install -S react-router-dom устранила мою ошибку, я думаю
Просто из любопытства, можете ли вы попробовать создать свое приложение с помощью npx для выполнения последней версии create-response-app? например npx create-react-app myapp. Мне интересно, есть ли у вас более старая версия CRA
@ DMcCallum83 Перед тем, как я сделал свой проект, я установил последнюю версию create-response-app. Чтобы ответить на ваш вопрос, я использовал npx create-react-app myapp, и он работал правильно.
@Dokme, вы должны либо принять ответ, либо создать свой собственный, чтобы закрыть вопрос.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Чтобы исправить эту ошибку, выполните следующие действия.
Шаг 1: npm install --save react-router-dom
Шаг 2:<script src = "https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
тег скрипта помещаем в общедоступный / index.js
Работает, когда делается только Шаг 1. Шаг 2 делать не нужно.
Я столкнулся с той же проблемой. Следующая команда разрешит это:
npm install react-router-dom --save
Исправил для меня.
Проблема в том, что в вашем проекте React нет модуля response-router-dom. Вы можете установить и сохранить его с помощью следующей команды. Просто запустите эту команду в корне вашего проекта, и все будет работать нормально.
npm install --save react-router-dom
В моем случае я использую Typescript, и мне нужно было установить
npm i react-router-dom
И
npm i @types/react-router-dom
После обеих установок ошибки пропали.
Ни один из перечисленных ответов мне не помог. На этот случай вышло мое решение. Не сердись так.
Нет, я имел ввиду посмотри на вопрос, там написано: UPDATE: ... resolved the error
Единственный ответ, который мне помог
npm i react-router-dom
или
npm install react-router-dom --save
Эта ошибка возникает из-за отсутствия пакета npm реагировать-маршрутизатор-дом. установите их, используя приведенный выше cmd.
Вам необходимо использовать --save при установке «response-router-dom». Это гарантирует, что пакет будет храниться в файле package.json как зависимость, и когда вы попытаетесь собрать решение на любом другом компьютере или на сервере сборки, он возьмет все зависимости из файла package.json и установит их.
Если вы хотите установить все зависимости на новую машину, выполните команду - npm install
For this problem "Module not found: Can't resolve 'react-router-dom' in"
//I found the following solving
// using ES6 modules
import { BrowserRouter, Route, Link } from "react-router-dom";
если он не работает, вы должны использовать следующее, что я использовал с модулями CommonJS
const BrowserRouter = require("react-router-dom").BrowserRouter;
const Route = require("react-router-dom").Route;
const Link = require("react-router-dom").Link;
Попробуйте использовать кнопку редактора кода, чтобы вставить читаемый код.
@Shimi Я впервые отвечаю на вопрос :)
Поздравляю дружище, удачи. Код теперь структурирован с большей читабельностью.
Спасибо, Шими, и спасибо @Vasim Shaikh
Обязательно используйте npm install --save response-router-dom not npm install --save response-router
npm install react-router-dom
Эта команда решает ту же проблему, с которой я столкнулся.
Если вы уже установили зависимости, проверьте файл package.Json на наличие зависимости response-router-dom, и он по-прежнему не работает ... В этом случае убедитесь, что вы импортируете пакеты из response-router-dom в файл index.js.
импортировать {BrowserRouter as Router, Switch, Route} из "response-router-dom"
Я решил проблему, когда Docker и yarn были связаны с ошибкой.
Ключ заключался в том, чтобы перестроить образ Docker после установки response-router-dom в качестве зависимости разработчика, как и многие ответы здесь подробно. Папка node_modules внутри контейнера докеров нуждается в обновлении! Если ваш файл параметров docker-compose.yaml не перемонтирует node_modules как том или иным образом не обновляет его, то этот ответ не будет работать для вашего проекта. Шаги:
docker-compose down в корне проекта или остановите демон в Docker Desktopyarn remove react-router-domyarn add --dev react-router-dom добавляет response-router-dom как зависимость devdocker-compose build для восстановления образа Dockerdocker-compose up -d для запуска devserver с демономВ моем случае я использовал Docker, а create-react-app использовал шаблон Typescript.
Я использую docker-compose для подъема и опускания контейнеров с помощью демона Docker. Если вы не используете docker-compose, вам необходимо соответствующим образом изменить команды запуска / остановки контейнера.
React Router уже установлен и работает правильно (yarn start вне контейнера Docker не сообщал об ошибках). Докер, содержащий интерфейсный сервер, работал некорректно.
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
},
Это зависимости, которые вы используете в своем проекте, не забудьте установить react-router-dom в свой проект реакции.
Использовать
npm i react-router-dom или yarn add react-router-dom для установки response-router-dom в ваш проект.
Если вы используете машинописный текст в своем проекте, вам также необходимо установить @types/react-router-dom.
Используйте npm i @types/react-router-dom или yarn add @types/react-router-dom для их установки.
Наконец, если вы успешно установили эти библиотеки в свой проект, ваш package.json может выглядеть так:
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
......
"react-router-dom": "^x.x.x",
.....
"@types/react-router-dom": "^x.x.x",
},
Используйте npm install react-router-dom --save для его установки.
если вы используете пряжу вместо npm, это поможет, это решило ту же проблему для меня.
пряжа добавить реагировать-маршрутизатор-дом - сохранить
просто установите response-router-dom, используя
yarn add react-router-dom
или
npm install --save react-router-dom
npm установить response-router-dom --save
Это будет работать
убедитесь, что вы устанавливаете response-router-dom, используя
yarn add react-router-domилиnpm install -S react-router-dom