Recently, I integrated the FlipClockJs vue component into my project and it was functioning properly during development when I executed
yarn encore dev
However, upon running
yarn encore production
An error cropped up as follows:
ERROR Failed to compile with 1 errors12:30:24 PM
error
app.bc30a410.js from UglifyJs Unexpected token: operator (>) [app.bc30a410.js:12470,21]
I attempted to troubleshoot this issue by incorporating the following snippet into my webpack file:
.addLoader({
test: /\.js$/,
loader: "babel-loader",
include: ['node_modules/@mvpleung/flipclock']
})
Regrettably, this adjustment yielded the same outcome. Below is a snippet of my entire webpack configuration:
var Encore = require("@symfony/webpack-encore");
const { VueLoaderPlugin } = require("vue-loader");
const MinifyPlugin = require('babel-minify-webpack-plugin');
Encore.setOutputPath("public/build/")
.setPublicPath("/build")
.addEntry("app", "./resources/assets/js/app.js")
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.addLoader({
test: /\.vue$/,
loader: "vue-loader"
})
.addLoader({
test: /\.js$/,
loader: 'babel-loader',
include: ['/node_modules/@mvpleung/flipclock']
})
.addLoader({
test: /\.(js|vue)$/,
enforce: "pre",
loader: "eslint-loader",
exclude: /node_modules/,
options: {
fix: true
}
})
.addPlugin(new VueLoaderPlugin())
.addPlugin(new MinifyPlugin())
.addAliases({
vue: "vue/dist/vue.js"
})
.enableSassLoader()
.enablePostCssLoader()
;
module.exports = Encore.getWebpackConfig();Can anyone pinpoint where the issue might lie? The component functions perfectly during yarn encore dev execution.
Environment: Vue 2.5.17