Reputation: 465
When i install bootstrap with npm, i ran folowing command:
then i got the following directory tree:
-node_module
|__bootstrap
|__jquery
|__popper
and i use it:
<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') ?>">
but when i run it, it export an error:
Uncaught TypeError: Cannot set property 'bootstrap' of undefined
at bootstrap.min.js:6 at bootstrap.min.js:6
I dont know why, phease help!! My packeage.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"
}
}
Upvotes: 1
Views: 8390
Reputation: 4924
And install popper.min.js from node_modules/popper.js/dist/umd
directory to avoid error below:
`Uncaught SyntaxError: Unexpected token export`
from what I see, you also have a bad location for popper.min.js
file. This file is located in
node_modules/popper.js/dist
you have
node_modules/popper/dist
Working example:
<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>
Upvotes: 1
Reputation: 2127
Remove attribute type="module"
and it will work - jQuery and Bootstrap in minified versions are just regular ES5 files
Upvotes: 5