Question

16

Import moment.js in js file in webpack

rated 0 times [ 23] [ 7] / answers: 1 / hits: 16136 / 7 Years ago, thu, february 2, 2017, 12:00:00

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..

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalias

Add To Favorites

Follow

Total Points: 79

Total Questions: 116

Total Answers: 116

Location: Malaysia

Member since Wed, May 11, 2022

2 Years ago

answered 7 Years ago shylaelisan · Accepted Answer

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.