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

The

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()

CodePudding user response：

Delete your node modules with rm -rf node modules and try re-installing. I hope it helps you out.

CodePudding user response：

The error message "s is not a function" suggests that there may be a problem with the code in your Vue components, specifically a reference to a function that does not exist or has been misnamed.

To debug this issue, you can start by checking the specific line number and file mentioned in the error message (vue.common.prod.js:11) to see if there is any suspicious code there.

You can also try running your application in development mode (using npm run dev or npm run watch) and then using browser development tools (such as the browser's JavaScript console) to inspect the code and see if there are any errors or warnings being thrown. This will give you a better idea of where the problem is coming from.

Additionally, you can try to use the source maps feature of webpack to map the compiled code to the original source code. This way, you will be able to see the original source code in the browser's developer tools.

You can enable source maps by adding the following line to your webpack.mix.js file:

mix.sourceMaps();

You can also try to use the Vue DevTools browser extension to inspect your Vue components and see if there are any errors or warnings being thrown.

You can also try to add the following to your webpack.mix.js file

mix.webpackConfig({ devtool: 'inline-source-map' });

This will enable the source maps which will allow you to see the error in the original source code that is being transpiled by webpack. This will help you to identify the specific line of code that is causing the issue.

Additionally, you can also try to use a transpiler like Babel to convert your code to a more compatible version for different browsers. This can help to avoid issues caused by browser-specific code.

Finally, you can try to look for similar issues that other developers have faced on forums like Stack Overflow and GitHub, as well as consulting the documentation for any libraries or frameworks you are using in your application.

It is also important to ensure that you have the latest version of all the dependencies, and that there are no conflicts between different versions.

It is also important to note that this error message is being caused by a production build, which means that it is not being caught by the development error handling and it is being caught by the browser. This is likely because the code that is causing the issue is only being executed in the production environment.

So, you can try to reproduce the error in your development environment by simulating the production environment, by running the app with the NODE_ENV=production environment variable and see if the error still exists.