Import moment.js in js file in webpack

Question

In my project I use webpack and npm. I installed moment.js : npm install moment. Then I want to import it in my app.js file: import moment from "moment".

But it doesn't work. I get: Can't resolve moment in ...

I try let moment = require('moment');but I get the same error.

But I can require it in my webpack.config.js file without errors.

My app.js file is located on /myapp/frontend/app.js

My webpack.config.js file on:/myapp/webpack.config.js

So, please explain why I can't require moment in my app.js and how can I do this?

My config file:

const webpack = require("webpack");
const NODE_ENV = process.env.NODE_ENV || "development"
const path = require('path');

//example of successfull importing
let moment = require('moment');
console.log(moment(new Date()));

module.exports = {
    context: __dirname + "/frontend",
    entry: {
        app:"./app"
    },
    output: {
        path: path.resolve(__dirname,"./public/js"),
        publicPath:"/public/js/",//public path in internet
        filename: "build.js"
    },

    watch: NODE_ENV == "development",
    watchOptions:{
        aggregateTimeout:100//default = 300
    },
    devtool: NODE_ENV == "development"?"cheap-inline-module-source-map":"cheap-source-map",
                                      //cheap-inline-module-source-map - to see sources in build.js
                                      //eval - fastest

    resolve:{
        modules: ['node-modules'],
        extensions:['.js']
    },
    module:{
        loaders:[{
            test: /\.js$/,
            loader:"babel-loader?presets[]=es2015",
            exclude: /node_modules/
        }]
    }
};

if(NODE_ENV == "production"){
    module.exports.plugins.push(
        new webpack.optimize.UglifyJsPlugin({
            compress:{
                warnings:false,
                unsafe:true,
                drop_console:true
            }
        })
    );
}

It is my tree structure without node_modules folder:

SOLVING OF PROBLEM: problem was in my configuration:

  resolve:{
            modules: ['node-modules'],
            extensions:['.js']
        },

There is node-modules is wrong, must be node_modules. Simple typo..

Answer 1

For my issue, I have change import {moment} from 'moment' to import * as moment from 'moment'; and it's working now!

Answer 2

Without knowing a bit more about your file structure it's difficult to be certain as to why, but the issue is probably that your webpack config is not finding the moment module in your node_modules.

As a test, ran the following:

//webpack.js
const path = require('path');

module.exports = {
  entry: path.join(__dirname, '..', 'public', 'js', 'index.js'),
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '..', 'public', 'dist'),
  },
};

and then with moment and jquery installed via npm install --save jquery moment, I made a index.js file:

import $ from jquery;
import moment from moment;

const m = moment(); 

No build errors and no runtime errors when included on the HTML page. Try starting simply first and then build up from there on your webpack config. Also, I'm not sure if webpack does anything with package.json but I noticed you didn't signal the --save option. It's a good habit to get into.

Answer 3

In my case, issue was solved when I put window.moment = require('moment');