Question

我一直在更新js程序中的所有依赖关系，但未对我的任何组件或index.js进行任何更改。但是，当我运行

npm run build

我遇到与bootstrap-theme.css相关的index.js错误：

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.log("hi " + oauthData.userName + "! :-)")
  console.log("profile " +  JSON.stringify(oauthData.profile) + "! :-)")
  console.log("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:"henf@microsoft.com",profile :{given_name : "braun"} };
ReactDOM.render(<App userName={oauthData.userName} fisrtName={name} token={oauthData.token} tid={oauthData.profile.tid}/>, document.getElementById('root')
    );

Answer 1

您看到一个错误，因为没有 bootstrap-theme.css
，而且您输入了错误的路径！您可以从现在开始使用该路径
bootstrap/dist/css/bootstrap.css
如果您想在react中使用bootstrap
react-bootstrap/dist/react-bootstrap.js

npm编译错误-找不到模块：bootstrap-theme.css

1 个答案: