Webpack 4 + bootstrap [TypeError: Cannot read property 'jquery' of undefined]

Question

我最近開始使用 webpack，構建工作正常

在使用 webpack 運行我的應用程序時，我遇到了下面提到的錯誤 - 這發生在內部的 Bootstrap package 中：

var version = $.fn.jquery.split(' ')[0].split('.'); ^

TypeError: Cannot read property 'jquery' of undefined
at Object.jQueryDetection

我正在使用暴露加載器。 我的 webpack 文件：

const path = require('path');
const nodeExternals = require('webpack-node-externals');
var webpack = require('webpack');

module.exports = {
  entry: './server/index.js',
  target: 'node',
  externals: [nodeExternals()],

  output: {
    path: path.resolve('server-build'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['.js', '.json', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'
      },
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
      {
        test: require.resolve('jquery'),
        loader: 'expose-loader',
        options: {
          exposes: ['$', 'jQuery'],
        },
      },
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

這是我的 Package.json

{
  "name": "xxxxxxxxx",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.0.1",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-stage-0": "^7.8.3",
    "@babel/preset-typescript": "^7.10.1",
    "@microsoft/applicationinsights-react-js": "^2.4.4",
    "@microsoft/applicationinsights-web": "^2.4.4",
    "@reach/router": "^1.3.1",
    "@testing-library/jest-dom": "^5.0.2",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.5",
    "@types/node": "^13.5.1",
    "@types/react-helmet": "^6.0.0",
    "amd-loader": "0.0.8",
    "axios": "^0.19.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-app": "^9.0.0",
    "babel-register": "^6.26.0",
    "bootstrap": "^4.5.0",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.8.0",
    "css-loader": "^3.6.0",
    "env-cmd": "^10.1.0",
    "esm": "^3.2.25",
    "express": "^4.17.1",
    "file-loader": "^6.0.0",
    "global": "^4.4.0",
    "ignore-styles": "^5.0.1",
    "immutable": "^4.0.0-rc.12",
    "install": "^0.13.0",
    "jquery": "^3.5.1",
    "pm2": "^4.2.3",
    "popper.js": "^1.16.1",
    "primeicons": "^2.0.0",
    "primereact": "^3.4.0",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.0.0",
    "react-notifications-component": "^2.4.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "serve": "^11.3.0",
    "sharethis-reactjs": "^1.5.0",
    "style-loader": "^1.2.1",
    "ts-loader": "^7.0.5",
    "typescript": "^3.9.5",
    "universal-cookie": "^4.0.3",
    "url-loader": "^4.1.0",
    "webpack": "^4.43.0"
  },
  "scripts": {
    "start": "env-cmd -f .env react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "start:dev": "env-cmd -f .env.development react-scripts start",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "start:prod": "env-cmd -f .env.production react-scripts start",
    "build:dev": "env-cmd -f .env.development react-scripts build",
    "build:qa": "env-cmd -f .env.qa react-scripts build",
    "build:prod": "env-cmd -f .env.production react-scripts build",
    "ssr": "node -r esm server/server.js",
    "new-build": "webpack --config webpack.server.js --mode=development -w",
    "dev-start": "nodemon ./server-build/index.js"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.10.3",
    "@babel/core": "^7.10.3",
    "@babel/plugin-proposal-class-properties": "^7.10.1",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@babel/preset-flow": "^7.10.1",
    "@babel/preset-react": "^7.10.1",
    "@babel/register": "^7.10.3",
    "@types/jest": "^25.2.3",
    "@types/react": "^16.9.38",
    "@types/react-dom": "^16.9.8",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "colibrio-reader-framework": "file:framework",
    "expose-loader": "^1.0.0",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "^1.7.2"
  }
}

請協助處理這種特殊情況

Answer 1

如果您使用html-loader評估 HTML 模板，則不應添加<script src="app.js">標記（或您選擇命名應用程序入口點的任何名稱）。
Webpack 在最后自己添加它，如果加載器找到它就會進入評估 JS，從而導致各種 Bootstrap 錯誤。