Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Importing Moment.js makes webpack build fail

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
                        },
                    },
                },
            ],
        },
    ],
}
like image 548
Martyn Ball Avatar asked Dec 06 '25 15:12

Martyn Ball


1 Answers

I had a similar issue with moment. try

import * as moment from 'moment';
like image 164
THE AMAZING Avatar answered Dec 08 '25 05:12

THE AMAZING



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!