Error when compiling in production mode "is not a function" Vue Laravel Mix

Question

I have a Laravel, VueJs, VueRouter, Vuex application using Webpack to compile my assets.

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@fortawesome/fontawesome-free": "^5.14.0",
        "axios": "^0.18",
        "bootstrap": "^4.0.0",
        "laravel-mix": "^3.0.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "@fullcalendar/core": "^5.11.3",
        "@fullcalendar/daygrid": "^5.11.3",
        "@fullcalendar/interaction": "^5.11.3",
        "@fullcalendar/list": "^5.11.3",
        "@fullcalendar/timegrid": "^5.11.3",
        "@fullcalendar/vue": "^5.11.3",
        "ajv": "^6.12.3",
        "animate.css": "^3.7.2",
        "aos": "^2.3.4",
        "apexcharts": "^3.33.0",
        "chart.js": "^2.7.3",
        "element-ui": "^2.4.8",
        "imagemin": "^6.0.0",
        "jquery": "^3.4.1",
        "moment": "^2.27.0",
        "node-sass": "^4.14.1",
        "numeral": "^2.0.6",
        "simple-keyboard": "^2.29.72",
        "toastr": "^2.1.4",
        "vue-apexcharts": "^1.6.2",
        "vue-chartjs": "^3.4.0",
        "vue-data-tables": "^3.4.5",
        "vue-router": "^3.5.2",
        "vue-touch-keyboard": "^0.3.2",
        "vuedraggable": "^2.24.3",
        "vuex": "^3.5.1",
        "xml-js": "^1.6.11"
    }
}

when i build in production mode npm run prod i get the error s is not a function

but if i build in dev like npm run watch or npm run dev i don't get the error.

How can I debug where the error is in the code so I can fix it? It only shows me in the vue.common.prod line.

vue.common.prod.js:11 TypeError: s is not a function at e (vue.common.prod.js:11:68600)

my file webpack.mix.js

const 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/js/front/app.js', 'public/js')
    .extract(['vue','vuex', 'jquery', 'bootstrap', 'axios', 'element-ui', 'lodash', 'moment', 'popper.js'])
    .version();


mix.webpackConfig({
    resolve: {
        extensions: ['.js', '.json', '.vue'],
        alias: {
            '@': path.join(__dirname, './resources/js'),
            '~': path.join(__dirname, './resources/js/front'),
            '@@': path.join(__dirname, './modules'),
            '@components': path.join(__dirname, './resources/js/components')

        }
    },
    output: {
         filename:'[name].js',
         chunkFilename: 'js/[name].js',
    },
}).sourceMaps()    

Ihs

reinstall NPM in that folder and try again, see what happens – Shoring

@KGG If you reinstall everything, clear cache npm cache clear --force – Ihs

Alright alright alright, could you firstly build with minify off? Beneath the line output: {}, in your webpack.config.js add a new section called optimization: { minimize: false } so we know what function s even is? – Prochoras

Answer 1

I ended up fixing this exact same issue by installing terser-webpack plugin version 4.

npm install terser-webpack-plugin@4 --save-dev

You may need to install a different version depending on your webpack version.

Webpack v5 comes with the latest terser-webpack-plugin out of the box. If you are using Webpack v5 or above and wish to customize the options, you will still need to install terser-webpack-plugin. Using Webpack v4, you have to install terser-webpack-plugin v4.

Source: https://github.com/webpack-contrib/terser-webpack-plugin#getting-started

Monzonite

Answer 2

• option 01) : check the function you wrote

This is a standard JavaScript error when trying to call a function before it is defined. This error occurs if you try to execute s function that is not initialized or is not initialized correctly. This means that the expression did not return s function object. So you need to understand that what you are trying to achieve is not s feature.

• option 02) : remove node_module and clear cache npm cache clear --force. after that reinstall node_module by using npm install.

• option 03) : check your imported thing forgot the curly braces in an import statement.

Hierophant