无法设置未定义的属性“引导程序”答案

【问题标题】：Cannot set property 'bootstrap' of undefined无法设置未定义的属性“引导程序”
【发布时间】：2019-04-10 16:23:31
【问题描述】：

当我使用 npm 安装引导程序时，我运行了以下命令：

npm install bootstrap
npm install popper.js --save

然后我得到以下目录树：

-node_module
|__引导
|__jquery
|__popper

我使用它：

<script type="module" src="<?php echo asset('node_modules/jquery/dist/jquery.min.js') ?>"></script>
<script type="module" src="<?php echo asset('node_modules/popper/dist/popper.min.js') ?>"></script>
<script type="module" src="<?php echo asset('node_modules/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<link rel="stylesheet" href="<?php echo asset('node_modules/bootstrap/dist/css/bootstrap.min.css') ?>">

但是当我运行它时，它会导出一个错误：

未捕获的类型错误：无法设置属性“引导程序” 未定义的
at bootstrap.min.js:6
at bootstrap.min.js:6

我不知道为什么，求救！！我的 package.json：

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.16.2",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^5.0.1",
    "jquery": "^3.3.1",
    "laravel-mix": "^1.0",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  },
  "dependencies": {
    "bootstrap": "^4.1.3",
    "popper.js": "^1.14.4"
  }
}

【问题讨论】：

请显示您的 package.json 文件
我添加了它@KrzysztofRaciniewski

标签： jquery bootstrap-4 popper.js

【解决方案1】：

删除属性type="module"，它会起作用 - 缩小版本中的 jQuery 和 Bootstrap 只是普通的 ES5 文件

【讨论】：

【解决方案2】：

并从node_modules/popper.js/dist/umd 目录安装popper.min.js 以避免出现以下错误：

`Uncaught SyntaxError: Unexpected token export`

据我所知，popper.min.js 文件的位置也不好。该文件位于

node_modules/popper.js/dist

你有

node_modules/popper/dist

工作示例：

<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <meta http-equiv="x-ua-compatible" content="ie=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">

	  <title>Examplel Bootstrap page</title>

	  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

	  <script src="node_modules/jquery/dist/jquery.min.js"></script>
	  <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
	  <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	</head>
	<body>
	 <nav class="navbar navbar-dark bg-dark">
		  <a class="navbar-brand" href="#">Never expand</a>
		  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		  </button>

		  <div class="collapse navbar-collapse" id="navbarsExample01">
			<ul class="navbar-nav mr-auto">
			  <li class="nav-item active">
				<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link" href="#">Link</a>
			  </li>
			  <li class="nav-item">
				<a class="nav-link disabled" href="#">Disabled</a>
			  </li>
			  <li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
				<div class="dropdown-menu" aria-labelledby="dropdown01">
				  <a class="dropdown-item" href="#">Action</a>
				  <a class="dropdown-item" href="#">Another action</a>
				  <a class="dropdown-item" href="#">Something else here</a>
				</div>
			  </li>
			</ul>
			<form class="form-inline my-2 my-md-0">
			  <input class="form-control" type="text" placeholder="Search" aria-label="Search">
			</form>
		  </div>
		</nav>
	</body>

</html>

【讨论】：

这意味着我必须将 popper 文件夹重命名为 popper.js 文件夹，对吧？
删除你的 node_modules 目录并运行npm update 命令。我已经在 1.14.4 版本中安装了 popper.js :) 这个包在 node_modules 目录中的位置：/popper.js/dist
并将 "jquery": "^3.3.1" 从 devDependencies 移动到“dependencies” :)
当我将 src 更改为 node_modules/popper.js/dist/umd/popper.min.js 时，它起作用了。非常感谢！
很高兴能帮上忙