Ошибка компиляции npm - модуль не найден: bootstrap-theme.css

Я обновлял все зависимости в своей программе js, но ничего не менял ни в одном из моих компонентов или index.js. Однако когда я бегу

npm run build

Я получаю сообщение об ошибке index.js, связанное с bootstrap-theme.css:

Failed to compile.

Module not found: Error: Can't resolve './bootstrap/dist/css/bootstrap-theme.css' in 'C:\Users\Itay\Documents\Matan - Microsoft\Matan\MatanClient\src'

До того, как я обновил зависимости, все работало нормально.

Решение моей проблемы - удалить эти 2 импорта

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

из index.js, но если я это сделаю, мой сайт будет выглядеть УЖАСНО.

Есть ли какое-то решение для этого?

Вот мой package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-jest": "^23.6.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "enzyme": "^3.6.0",
    "jest": "^23.6.0",
    "react-addons-test-utils": "^15.6.2",
    "react-dom": "^16.5.0",
    "react-scripts": "^0.6.1",
    "react-test-renderer": "^16.5.0"
  },
  "dependencies": {
    "adal-angular": "^1.0.17",
    "axios": "^0.15.3",
    "bootstrap": "^3.3.7",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "prop-types": "^15.6.2",
    "react": "^16.5.0",
    "react-bootstrap": "^0.30.10",
    "react-bootstrap-typeahead": "^1.4.2",
    "react-http-request": "^1.0.4",
    "react-overlays": "^0.8.3",
    "react-router-dom": "^4.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "jest",
    "eject": "react-scripts eject"
  },
  "description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
  "main": "index.js",
  "author": "",
  "license": "ISC",
  "jest": {
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    }
  }
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import App from './App';
import './index.css';
import AuthenticationContext from 'adal-angular/lib/adal.js';

var aadClientId = '9ffee8c0-e926-476a-b3d0-f803e12f0dff';
//var aadTenantId = '49d3d3cf-cde6-4161-8d6d-1789042d7b01';
var aadTenantId = 'common';
var authenticationContext = new AuthenticationContext({clientId: aadClientId, tenant: aadTenantId});
authenticationContext.handleWindowCallback();
var updateDataFromCache = function (resource, authenticationContext) {
// only cache lookup here to not interrupt with events
var token = authenticationContext.getCachedToken(resource);
var oauthData = { isAuthenticated: false, userName: '', loginError: '', profile: '' };
oauthData.isAuthenticated = token !== null && token.length > 0;
var user = authenticationContext.getCachedUser() || { userName: '' };
oauthData.userName = user.userName;
oauthData.profile = user.profile;
oauthData.loginError = authenticationContext.getLoginError();
oauthData.token = token;
return oauthData;
};

var oauthData = updateDataFromCache(aadClientId, authenticationContext);

if (!oauthData.isAuthenticated) {
  authenticationContext.login();
} else {
  console.info("hi " + oauthData.userName + "! :-)")
  console.info("profile " +  JSON.stringify(oauthData.profile) + "! :-)")
  console.info("profile-given_name " +  oauthData.profile.given_name + "! :-)")
}
var name = "";
if (oauthData.profile.hasOwnProperty("given_name")){
    name = oauthData.profile.given_name;
}
else {
    name = oauthData.profile.name;
}
//var oauthData = {userName:"[email protected]",profile :{given_name : "braun"} };
ReactDOM.render(<App userName = {oauthData.userName} fisrtName = {name} token = {oauthData.token} tid = {oauthData.profile.tid}/>, document.getElementById('root')
    );

Возможно дублирование: stackoverflow.com/questions/48847885/…

frontend-trends 17.09.2018 16:46

Я просмотрел это перед тем, как опубликовать этот вопрос. Решение там не помогло.

I.zv 17.09.2018 23:22

Вы неправильно написали bootstrap в: import 'bootstrap / dist / css / bootystrap-theme.css';

frontend-trends 18.09.2018 00:06

Если возникнет другая ошибка, вам, вероятно, потребуется настроить загрузчики в вашем webpack.config.js

frontend-trends 18.09.2018 00:48

./ в сообщении об ошибке от webpack указывает путь на том же уровне, что и ваш текущий файл. Но папка начальной загрузки должна находиться в каталоге node_modules.

frontend-trends 18.09.2018 01:05

Виноват. Я не знаю, откуда взялось это «y», отредактировал мой вопрос и исправил его. Не могли бы вы подробнее рассказать о своем последнем комментарии?

I.zv 18.09.2018 07:35

Как видно из ошибки, поиск bootstrap / dist / css / bootstrap.css выполняется внутри папки src. Попробуйте импортировать '../node_modules/bootstrap/dist/css/bootstrap-theme.css' https://stackoverflow.com/questions/49538124/reactstrap-crea‌ te-react-app-not-fou‌ nd-bootstrap-dist-cs‌ s-bootstrap-css-v-4

frontend-trends 18.09.2018 16:14
Поведение ключевого слова "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) для оценки ваших знаний,...
0
7
1 255
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

вы увидели ошибку, потому что нет bootstrap-theme.css
, а также вы указали неверный путь! теперь вы можете использовать этот путь на
bootstrap/dist/css/bootstrap.css
и если вы хотите использовать bootstrap в react
react-bootstrap/dist/react-bootstrap.js

Спасибо. Я не уверен, что вы предложили. Раньше мое приложение хорошо работало с двумя импортными операциями, о которых я упоминал выше. Сейчас почему-то нет. Я добавил свой index.js к вопросу, чтобы вы могли еще раз взглянуть и, возможно, увидеть, что не так. Спасибо еще раз.

I.zv 17.09.2018 23:16

Но он устанавливает Bootstrap 3. Согласно документации (github.com/twbs/bootstrap/tree/v3.3.6) файл bootstrap-theme.css находится в папке bootstrap.

frontend-trends 18.09.2018 01:03

Я использую bootstrap 4.1.3, файл bootstrap-theme.cs все еще находится в том же месте? Во всяком случае, я до сих пор не могу понять, как это исправить. Мой код не компилируется.

I.zv 18.09.2018 07:34

@ I.zvi в bootstrap 4 и новее нет файла темы начальной загрузки

erwin0maleki 18.09.2018 14:19

Что ж, в таком случае у вас есть предложение? Я действительно не могу игнорировать эти два импорта

I.zv 18.09.2018 14:24

@ I.zvi, возможно, вы используете bootstrap 4! сначала удалите свой пакет yarn remove bootstrap, а затем добавьте его с версией yarn add [email protected]

erwin0maleki 18.09.2018 14:35

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