Я обновлял все зависимости в своей программе 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')
);
Я просмотрел это перед тем, как опубликовать этот вопрос. Решение там не помогло.
Вы неправильно написали bootstrap в: import 'bootstrap / dist / css / bootystrap-theme.css';
Если возникнет другая ошибка, вам, вероятно, потребуется настроить загрузчики в вашем webpack.config.js
./ в сообщении об ошибке от webpack указывает путь на том же уровне, что и ваш текущий файл. Но папка начальной загрузки должна находиться в каталоге node_modules.
Виноват. Я не знаю, откуда взялось это «y», отредактировал мой вопрос и исправил его. Не могли бы вы подробнее рассказать о своем последнем комментарии?
Как видно из ошибки, поиск 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



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


вы увидели ошибку, потому что нет
bootstrap-theme.css
, а также вы указали неверный путь! теперь вы можете использовать этот путь на bootstrap/dist/css/bootstrap.css
и если вы хотите использовать bootstrap в reactreact-bootstrap/dist/react-bootstrap.js
Спасибо. Я не уверен, что вы предложили. Раньше мое приложение хорошо работало с двумя импортными операциями, о которых я упоминал выше. Сейчас почему-то нет. Я добавил свой index.js к вопросу, чтобы вы могли еще раз взглянуть и, возможно, увидеть, что не так. Спасибо еще раз.
Но он устанавливает Bootstrap 3. Согласно документации (github.com/twbs/bootstrap/tree/v3.3.6) файл bootstrap-theme.css находится в папке bootstrap.
Я использую bootstrap 4.1.3, файл bootstrap-theme.cs все еще находится в том же месте? Во всяком случае, я до сих пор не могу понять, как это исправить. Мой код не компилируется.
@ I.zvi в bootstrap 4 и новее нет файла темы начальной загрузки
Что ж, в таком случае у вас есть предложение? Я действительно не могу игнорировать эти два импорта
@ I.zvi, возможно, вы используете bootstrap 4! сначала удалите свой пакет yarn remove bootstrap, а затем добавьте его с версией yarn add [email protected]
Возможно дублирование: stackoverflow.com/questions/48847885/…