cant import module from webpack bundle.js in script tag HTML

Question

I use webpack for make bundler my js file for use in my django project. I use moment js which i get from "npm i moment". I make webpack with this configuration.

var path = require('path');

module.exports = {
    "mode" : "development",
    "entry" : "./index.js",
    "output" : {
        "path" : path.resolve(__dirname, "tugas/assets"),
        "filename" : "bundles.js",
        "clean" : true,
    },
};

and this is my index.js for configuration before.

import moment from 'moment';
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
console.log("boma1");

This is my package.json.

{
  "name": "Aplikasi-Database-Django",
  "version": "1.0.0",
  "description": "Tugas UAS Database Semester 7 2020",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/simasona123/Aplikasi-Database-Django.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/simasona123/Aplikasi-Database-Django/issues"
  },
  "homepage": "https://github.com/simasona123/Aplikasi-Database-Django#readme",
  "devDependencies": {
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "chart.js": "^3.1.0",
    "moment": "^2.29.1"
  }
}

as i know, webpack success to make bundle of moment.js because console can make output

but from above picture i cant import moment.js

this is my html code

This is my tree directory.

Thanks for your help... sorry for my bad question....

Answer 1

You should use require for moment.js, so replace what you have for the import with:

const moment = require('moment');

Alternatively, if you want to still use the import statement, this should work as well:

import * as moment from 'moment';

There's a discussion of this already here .