Pardon my lack of knowledge as I'm very new to web development.
I'm trying to bundle up all 3rd party packages, which includes select2 among others.
The bundle works for the other packages like jquery, bootstrap, popper etc, but select2 is not initialized or something. Perhaps some loading order issue?
Calling $('select').select2() results in uncaught type error.
Loading it separately via cdn or manual download works, so it seems parcel is not doing something right?
This is pretty much a very "boilerplatey" setup, so it's easy to replicate, but this is what I'm currently trying it on:
File structure:
- node_modules
- index.html
- .sassrc # sass configuration
- assets/ # front end assets root
- scss/ # Place for all styles
- site.scss
- js/ # Place for all scripts
- site.js
- bundle.js # Entry point for output bundle
// bundle.js
import './scss/site.scss';
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'bootstrap';
import 'select2';
/* site.css */
@import "bootstrap/scss/bootstrap";
@import "select2/dist/css/select2";
@import "@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4";
<!-- index.html -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="wwwroot/dist/bundle.css">
<script src="wwwroot/dist/bundle.js"></script>
</head>
And lastly
// package.js to show dependencies and the build script
{
"name": "SideNav",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "parcel build assets/bundle.js --out-dir wwwroot/dist/"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@ttskch/select2-bootstrap4-theme": "^1.3.5",
"bootstrap": "^4.6.0",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"select2": "^4.0.13"
},
"devDependencies": {
"parcel-bundler": "^1.12.4",
"sass": "^1.32.5"
}
}
Thanks in advance to everyone helping out.