Importing Moment.js makes webpack build fail

user_2630509 0
Viewed 410

been getting this weird error when trying to run npm run prod within my Laravel project.

92% chunk asset optimization OptimizeCssAssetsWebpackPluginCssSyntaxError: /css/app.css:3032:19: Missed semicolon

It appears to work fine if I remove this following import within on of my components:

import moment from 'moment';
export default {
    filters: {
        humanTimestamp: function(timestamp) {
            return moment.unix(timestamp).fromNow();
        }
    },

This is my webpack.mix.js

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/assets/js/app.js', 'public/js')
   .less('resources/assets/less/app.less', 'public/css')
   .less('resources/assets/less/documentation.less', 'public/css').version();

mix.webpackConfig({
    output: {
        filename: '[name].js',
        chunkFilename: 'js/chunks/[contenthash].js',
    },
    resolve: {
        alias: {
            '@': __dirname + '/resources/assets/js/'
        }
    },
});

And this is my webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

module.exports = {
    plugins: [
        new VuetifyLoaderPlugin()
    ],
    rules: [
        {
            test: /\.s(c|a)ss$/,
            use: [
                'vue-style-loader',
                'css-loader',
                {
                    loader: 'sass-loader',
                    options: {
                        implementation: require('sass'),
                        sassOptions: {
                            fiber: require('fibers'),
                            indentedSyntax: true // optional
                        },
                    },
                },
            ],
        },
    ],
}
momentjs webpack javascript
4 Answers

I had a similar issue with moment. try

import * as moment from 'moment';
user_27019740

Try to ignore the locale. This could be caused by the locales

 import * as moment from "moment";  
 console.log(moment().format("YYYY"));

 plugins: [
 new webpack.IgnorePlugin(/^./locale$/, /moment$/)
  ]
user_117328110

Previously I faced the same issue. I resolved by importing it in different way as follows.

Instead of

import moment from 'moment';

Try this

import * as moment from 'moment';
user_67019840

check the /css/app.css file its probably missing a semicolon

user_68720090
Related