Не удалось скомпилировать. Модуль не найден: не удается разрешить 'response-router-dom'

После 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-dom resolved the error.

убедитесь, что вы устанавливаете response-router-dom, используя yarn add react-router-dom или npm install -S react-router-dom

Shubham Khatri 24.12.2018 14:20

Либо запустите yarn, либо npm install в папке проекта.

Paul Fitzgerald 24.12.2018 14:24
react-dom и react-router-dom - разные библиотеки, вам нужно добавить react-router-dom в список пакетов.
Andrew 24.12.2018 14:26

@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]. Почему эти строки не работают? Также спасибо :)

Dokme 24.12.2018 14:47

@PaulFitzgerald Я пробовал обе эти команды. Я думаю, что использование npm install -S react-router-dom разрешило ошибку

Dokme 24.12.2018 14:48

@Andrew Я сделал это, обновив package.json, и даже после этого мою ошибку не устранил. Установка response-router-dom с использованием npm install -S react-router-dom устранила мою ошибку, я думаю

Dokme 24.12.2018 14:48

Просто из любопытства, можете ли вы попробовать создать свое приложение с помощью npx для выполнения последней версии create-response-app? например npx create-react-app myapp. Мне интересно, есть ли у вас более старая версия CRA

DMcCallum83 24.12.2018 14:49

@ DMcCallum83 Перед тем, как я сделал свой проект, я установил последнюю версию create-response-app. Чтобы ответить на ваш вопрос, я использовал npx create-react-app myapp, и он работал правильно.

Dokme 24.12.2018 15:00

@Dokme, вы должны либо принять ответ, либо создать свой собственный, чтобы закрыть вопрос.

Dave Kanter 14.10.2020 22:25
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
61
9
164 242
16

Ответы 16

Чтобы исправить эту ошибку, выполните следующие действия. Шаг 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 делать не нужно.

Sasika Miyuran 19.08.2019 14:19

Я столкнулся с той же проблемой. Следующая команда разрешит это:

npm install react-router-dom --save

Исправил для меня.

Hammad Khan 18.06.2021 22:19

Проблема в том, что в вашем проекте React нет модуля response-router-dom. Вы можете установить и сохранить его с помощью следующей команды. Просто запустите эту команду в корне вашего проекта, и все будет работать нормально.

npm install --save react-router-dom

В моем случае я использую Typescript, и мне нужно было установить

npm i react-router-dom

И

npm i @types/react-router-dom

После обеих установок ошибки пропали.

Ни один из перечисленных ответов мне не помог. На этот случай вышло мое решение. Не сердись так.

Happy Family 04.06.2020 22:49

Нет, я имел ввиду посмотри на вопрос, там написано: UPDATE: ... resolved the error

Learn for Fun 04.06.2020 22:50

Единственный ответ, который мне помог

Assen Kolov 09.10.2020 18:14
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 02.12.2020 04:50

@Shimi Я впервые отвечаю на вопрос :)

Aldomy 03.12.2020 00:01

Поздравляю дружище, удачи. Код теперь структурирован с большей читабельностью.

Shimi 03.12.2020 00:02

Спасибо, Шими, и спасибо @Vasim Shaikh

Aldomy 03.12.2020 00:07

Обязательно используйте 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 как том или иным образом не обновляет его, то этот ответ не будет работать для вашего проекта. Шаги:

  1. docker-compose down в корне проекта или остановите демон в Docker Desktop
  2. yarn remove react-router-dom
  3. yarn add --dev react-router-dom добавляет response-router-dom как зависимость dev
  4. docker-compose build для восстановления образа Docker
  5. docker-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

Это будет работать

Другие вопросы по теме