Missing Module When Building JavaScript - laravel

Question

I'm building an internal tool in Laravel and I need a datetime picker for part of the interface. My research has suggested that Tempus Dominus is the solution most people use to solve this.
I've installed Tempus Dominus and Moment (through Node) and added them both to my app.js file. However when I try to compile the JS I get the following warning:
WARNING in ./node_modules/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in 'C:\inetpub\wwwroot\salesdb\node_modules\moment\min'
# ./node_modules/moment/min/moment.min.js
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/sass/app.scss
This is how I'm importing them in the app.js file:
require('moment/min/moment.min.js');
require( 'tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js');
What am I missing?

Answer 1

The official Tempus Dominus Bootstrap plugin is unmaintained and is kinda buggy when it comes to ES6 and module bundlers.
I strongly advise you to install these two forks instead:
https://www.npmjs.com/package/tempusdominus
https://www.npmjs.com/package/tempusdominus-bootstrap
npm i tempusdominus tempusdominus-bootstrap
If you wanna make it work, you should inject/provide moment and jquery imports in the final build of your application (1st option), or make them globally available (2nd option).
1st option
What is your module bundler?
E.g., if you are using Rollup, you can configure the build like this using the Rollup's #rollup/plugin-inject plugin:
// Your imported plugins...
import inject from "#rollup/plugin-inject";
export default {
input: "src/index.js",
output: [
// You outputs...
],
plugins: [
inject({
$: "jquery",
jQuery: "jquery",
moment: "moment",
exclude: "src/**",
}),
// Your other Rollup plugins here...
],
};
For Webpack, you'd need to use the ProvidePlugin:
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
moment: 'moment'
})
]
};
2nd option
The other option would be to make moment and jQuery globally available in your app by adding the following lines to your index.js main entry point file:
import moment from "moment";
import $ from "jquery";
window.$ = window.jQuery = $;
window.moment = moment;
// Your other imports (tempusdominus-bootstrap as well) go here...
Though I didn't test, both options should work (let me know if not).
Of course, the preferred one would be to use a module bundler (1st option) and not to expose jQuery and/or moment to window.
And if you are using React, I advise you to use this library here instead (demo here). But that's another story.