Related
I using Jest 27.5.1 with TypeScript.
When I try to test, I got these error:
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'extend')
2 | <div>Hello</div>
3 | </template>
> 4 |
| ^
5 | <script lang="ts">
6 | import Vue from 'vue'
7 | export default Vue.extend({
at src/pages/test.vue:4:1
at Object.<anonymous> (src/pages/test.vue:347:3)
at Object.<anonymous> (test/test.spec.ts:4:1)
at TestScheduler.scheduleTests (node_modules/#jest/core/build/TestScheduler.js:333:13)
at runJest (node_modules/#jest/core/build/runJest.js:404:19)
at _run10000 (node_modules/#jest/core/build/cli/index.js:320:7)
at runCLI (node_modules/#jest/core/build/cli/index.js:173:3)
files
test file(TypeScript):
import Vuetify from 'vuetify'
import { mount, createLocalVue } from '#vue/test-utils'
import test from '~/src/pages/test.vue'
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
beforeEach(() => {
vuetify = new Vuetify()
})
test('is a Vue instance', () => {
const wrapper = mount(test, {
vuetify,
localVue,
})
expect(wrapper.vm).toBeTruthy()
})
})
jest.config.js:
module.exports = {
moduleNameMapper: {
'^#/(.*)$': '<rootDir>/$1',
'^~/(.*)$': '<rootDir>/$1',
'^vue$': 'vue/dist/vue.common.js',
},
moduleFileExtensions: ['ts', 'js', 'vue', 'json'],
transform: {
'^.+\\.ts$': 'ts-jest',
'^.+\\.js$': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
},
collectCoverage: true,
collectCoverageFrom: [
'<rootDir>/src/components/**/*.vue',
'<rootDir>/src/pages/**/*.vue',
],
testEnvironment: 'jsdom',
setupFilesAfterEnv: ['./test/setup.js'],
moduleDirectories: [__dirname, 'node_modules']
}
setup.js:
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
package.json:
"dependencies": {
"#babel/core": "^7.19.3",
"#nuxtjs/axios": "^5.13.6",
"consola": "^2.15.3",
"core-js": "^3.19.3",
"dotenv": "^16.0.2",
"eslint": "^8.22.0",
"eslint-plugin-import": "^2.26.0",
"nuxt": "^2.15.8",
"nuxt-typed-vuex": "^0.3.1",
"ts-loader": "8.2.0",
"typed-vuex": "^0.3.1",
"typescript": "^4.8.4",
"vue": "^2.7.10",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.10",
"vuex": "3.6.2",
"webpack": "^4.46.0"
},
"devDependencies": {
"#babel/eslint-parser": "^7.16.5",
"#nuxt/types": "^2.15.8",
"#nuxt/typescript-build": "^2.1.0",
"#nuxtjs/eslint-config-typescript": "^8.0.0",
"#nuxtjs/eslint-module": "^3.0.2",
"#nuxtjs/stylelint-module": "^4.1.0",
"#nuxtjs/vuetify": "^1.12.3",
"#types/jest": "^27.5.2",
"#types/node": "^18.7.18",
"#typescript-eslint/eslint-plugin": "^5.35.1",
"#typescript-eslint/parser": "^5.35.1",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/test-utils": "^1.3.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.5.1",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-nuxt": "^3.1.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^8.2.0",
"husky": "^8.0.1",
"jest": "^27.5.1",
"lint-staged": "^12.1.7",
"postcss-html": "^1.3.1",
"prettier": "^2.7.1",
"stylelint": "^14.1.0",
"stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended-vue": "^1.1.0",
"stylelint-config-standard": "^24.0.0",
"ts-jest": "^27.1.5",
"vue-jest": "^3.0.7"
}
What do I have to do to run the test correctly?
I don't know how to solve this problem myself, as it worked fine when I ran the same code in other environments.
Thank you for your help.
Mh seems the Vue instance cannot be reached. I'm also using vuetify with jest test and it look quite same. Also same as in the documentation by vuetify here https://vuetifyjs.com/en/getting-started/unit-testing/#spec-tests
The only difference I see is that the createLocalVue() initialization is outside of describe() in your case.
Try it like
describe('Index', () => {
let vuetify: Vuetify
const localVue = createLocalVue()
...
Instead of
const localVue = createLocalVue()
describe('Index', () => {
let vuetify: Vuetify
...
I'm using vue-template-loader to load html files in .ts files using decorators, before I use it vuetify was working fine, but after I installed it I got these error messages
[Vue warn]: Unknown custom element: <v-img> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-spacer> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <v-btn> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Basically: it says that vuetify is not in your app
vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
// Locals
import ar from 'vuetify/src/locale/ar';
import en from 'vuetify/src/locale/en';
Vue.use(Vuetify);
export default new Vuetify({
rtl: true,
lang: {
locales: { ar, en },
current: 'ar',
}
});
vue.config.js
const { defineConfig } = require('#vue/cli-service');
module.exports = defineConfig({
transpileDependencies: ['vuetify'],
configureWebpack: {
module: {
rules: [
{
test: /.html$/,
loader: 'vue-template-loader',
exclude: /index.html/,
},
],
}
},
});
package.json
{
"dependencies": {
"core-js": "^3.8.3",
"moment": "^2.29.3",
"register-service-worker": "^1.7.2",
"vue": "^2.6.14",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.27.1",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuetify": "^2.6.0",
},
"devDependencies": {
"#vue/cli-plugin-babel": "~5.0.0",
"#vue/cli-plugin-e2e-cypress": "~5.0.0",
"#vue/cli-plugin-pwa": "~5.0.0",
"#vue/cli-plugin-router": "~5.0.0",
"#vue/cli-plugin-typescript": "~5.0.0",
"#vue/cli-service": "~5.0.0",
"jest": "^27.0.5",
"sass": "^1.32.7",
"sass-loader": "^12.0.0",
"typescript": "~4.5.5",
"vue-cli-plugin-vuetify": "~2.5.0",
"vue-template-loader": "^1.1.0",
"vuetify-loader": "^1.7.0"
}
}
Production build fails with the following error:
ValidationError: Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'minimize'. These properties are valid:
object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals? }
at validate (/Users/username/Sites/projectname/node_modules/css-loader/node_modules/schema-utils/dist/validate.js:85:11)
at Object.loader (/Users/username/Sites/projectname/node_modules/css-loader/dist/index.js:34:28)
Using this webpack template: http://vuejs-templates.github.io/webpack/, updated to Webpack 4 and faced build issues, package.json:
{
"name": "projectname",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config webpack.config.js --port 3000 --hot",
"start": "npm run dev",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"#vue/cli-service": "^3.2.0",
"axios": "^0.18.0",
"babel-polyfill": "^6.26.0",
"cross-env": "^5.2.0",
"css-loader": "^3.2.1",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"style-loader": "^1.0.1",
"swiper": "^4.5.0",
"v-tabs-router": "^1.4.0",
"vee-validate": "^2.1.0-beta.9",
"vue": "^2.5.2",
"vue-awesome-swiper": "^3.1.3",
"vue-backtotop": "^1.6.1",
"vue-carousel": "^0.18.0",
"vue-cleave-component": "^2.1.2",
"vue-instant": "^1.0.2",
"vue-jsonp": "^0.1.8",
"vue-magic-line": "^0.2.1",
"vue-masked-input": "^0.5.2",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.2",
"vue-select": "^2.5.1",
"vue-slider-component": "^2.8.0",
"vue-smooth-scroll": "^1.0.13",
"vuejs-datepicker": "^1.5.3",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^5.0.2",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^3.2.0",
"node-notifier": "^5.1.2",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"rimraf": "^2.6.0",
"sass-loader": "^8.0.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^1.1.2",
"vue-loader": "^14.2.2",
"vue-resource": "^1.5.1",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.2",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
I've checked with grep -rl 'minimize' . in a project root, but didn't found any related options. Wth..
This has to do with a breaking change in the module. According to semver rules, a major change (first digit x of version x.y.z) is a breaking change.
In this case the old version syntax uses
{
loader: 'postcss-loader',
options: {
plugins: postCSSPlugins
}
}
whereas the new version in options uses nested postcssOptions before plugins
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: postCSSPlugins
}
}
}
I also encountered this error when updating to webpack 4 and using MiniCssExtractPlugin
I was able to eliminate the error and get a successful build by using an older version of ccs-loader
These versions worked for me
"devDependencies": {
"css-loader": "1.0.1",
OR
"css-loader": "^0.28.0",
css-loader 2* and 3* gave me the error.
UPDATE after testing publish: using the old version of the css-loader causes the css to fail to load when rendering the web site in a browser. So this appears to not be a solution.
I was having the same issue after I ran yarn upgrade --latest command.
It changed sass-loader version from 7.1.0 to 8.0.0. After that getting the same error.
There might be change in sass-loader options and due to that, this error occurred. You can check release: https://github.com/webpack-contrib/sass-loader/releases and updated options https://github.com/webpack-contrib/sass-loader
Try to remove/change sass-loader options, that can help you to resolve it.
Hope this can help, it would be great if can you share webpack.config.js file.
Cheers~
I had a similar problem upgrading to webpack 4. I used Vue.js CLI which generated a build/utils.js file that effectively has a configurable webpack based on whether I am in a development or a production environment.
Pertinent utils.js lines in auto generated (failing after upgrading) code:
var ExtractTextPlugin = require('extract-text-webpack-plugin')
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.loader({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
I tried the simple, "Let's just update the module.":
var ExtractTextPlugin = require('mini-css-extract-plugin')
Which gave me the error that you had. After much messing around with the files, I used the "Easter Egg Troubleshooting Strategy", and found that I could do the following and get it to work. What worked was the following:
npm i extract-loader --save-dev
then modify build/utils.js:
exports.cssLoaders = function (options) {
options = options || {}
var cssLoader = {
loader: 'css-loader',
options: {
// minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ['extract-loader'].concat(loaders)
// return ExtractTextPlugin.loader({
// use: loaders,
// fallback: 'vue-style-loader'
// })
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
Notice, I commented out line 9, which is the source of my error. I also removed my sole dependency to the mini-css-extract-plugin with the extract-loader module.
// minimize: process.env.NODE_ENV === 'production',
Now I have to figure out why eslint is not liking my Vue syntax.
I use the latest versions of vue-cli3 webpack4 and vue-loader v15.
I want to configure vue-loader, but there is an error:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
vue.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
productionSourceMap: false,
baseUrl: "./",
configureWebpack: {
module: {
rules: [{
test: /\.vue$/,
loader: "vue-loader"
}]
},
plugins: [
new VueLoaderPlugin()
]
}
}
package.js
"dependencies": {
"awe-dnd": "^0.3.1",
"axios": "^0.18.0",
"iview": "^3.1.5",
"lodash": "^4.17.11",
"vue": "^2.5.17",
"vue-router": "^3.0.2"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/core": "^7.1.6",
"#babel/polyfill": "^7.0.0",
"#babel/preset-env": "^7.1.6",
"#vue/cli-plugin-babel": "^3.2.0",
"#vue/cli-plugin-eslint": "^3.2.1",
"#vue/cli-service": "^3.2.0",
"css-loader": "^1.0.1",
"eslint": "^5.9.0",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"iview-loader": "^1.2.2",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"vue-cli-plugin-iview": "^1.0.6",
"vue-hot-reload-api": "^2.3.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.4.2",
"vue-style-loader": "^4.1.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.26.1",
"webpack-chain": "^5.0.1",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
I called console.log on vue-loader/plugin.js.
rawRules (line-number 27)
There are 20+ rules.
/\.vue$/ matched the second rule.
But the second rule is url-loader?
What do I do?
I think you should put vue-loader on dependencies. Recently i updated my project: vue, vue-loader, webpack...
this is my package.json
{
"name": "pack",
"private": true,
"version": "0.0.0",
"scripts": {
"build": "webpack --env.prod --config webpack.config.js"
},
"devDependencies": {
"#babel/preset-env": "^7.0.0-rc.2",
"#types/webpack-env": "^1.13.5",
"aspnet-webpack": "^2.0.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"css-loader": "^0.25.0",
"event-source-polyfill": "^0.0.7",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^2.0.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.3.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^4.23.1",
"webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-3": "^6.24.1",
"chart.js": "^2.7.3",
"downloadjs": "^1.4.7",
"idle-vue": "^2.0.5",
"jwt-decode": "^2.2.0",
"material-design-icons-iconfont": "^3.0.3",
"v-offline": "^1.0.10",
"vue": "^2.5.21",
"vue-analytics": "^5.12.2",
"vue-chartjs": "^3.4.0",
"vue-chartkick": "^0.5.0",
"vue-config": "^1.0.0",
"vue-embed": "^1.0.0",
"vue-google-charts": "^0.3.2",
"vue-json-excel": "^0.2.5",
"vue-loader": "^15.4.2",
"vue-moment": "^4.0.0",
"vue-popperjs": "^1.6.1",
"vue-router": "^3.0.1",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.3.14"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Your webpack.config it seems fine... but just in case, this is my code:
var path = require('path')
var webpack = require('webpack')
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
context: __dirname,
entry: {
main: ['babel-polyfill', './App/index.js']
},
plugins:[
new VueLoaderPlugin()
],
module: {
rules: [{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
'scss': [
'vue-style-loader',
'css-loader',
'sass-loader'
],
'sass': [
'vue-style-loader',
'css-loader',
'sass-loader?indentedSyntax'
]
}
}
},
...
I was having this same problem and found this thread solved my problem.
Essentially, you do not need to specify the module rules or the loader for vue-loader when using vue-cli to build your app because vue-cli provides vue-loader out of the box.
I do not know why we get the error when we try to specify the module rules, and it is unfortunate that it gives this unhelpful error, but regardless, I hope this helps!
babel-loader transpiles same code in windows successfully but can not turn vue-router in es5 in mac .
I rebuilt all the code without using vue-router and everything goes well.
So i just wonder if there has anybody encountered this ?
mac: 10.12.4 (16E195)
node: v8.1.3
package.json:
{
"engines": {
"node": "7.5.0"
},
"dependencies": {
"vue": "^2.3.4",
"vue-router": "^2.6.0",
"vue-template-compiler": "^2.3.4"
},
"devDependencies": {
"autoprefixer": "^6.7.6",
"babel-core": "^6.25.0",
"babel-eslint": "^7.2.1",
"babel-helper-vue-jsx-merge-props": "^2.0.2",
"babel-loader": "^7.1.0",
"babel-plugin-component": "^0.9.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.4.2",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-stage-1": "^6.22.0",
"babel-preset-stage-2": "^6.22.0",
"babel-preset-stage-3": "^6.22.0",
"css-loader": "^0.27.3",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.1.0",
"exports-loader": "^0.6.4",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.10.1",
"gulp": "3.9.1",
"gulp-cssnano": "2.1.2",
"gulp-delete-lines": "0.0.7",
"gulp-eslint": "3.0.1",
"gulp-less": "^3.3.0",
"gulp-nodemon": "^2.2.1",
"gulp-replace": "^0.5.4",
"gulp-util": "^3.0.8",
"gulp-watch": "^4.3.11",
"html-webpack-plugin": "^2.28.0",
"imports-loader": "^0.7.1",
"json-loader": "0.5.4",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"node-sass": "^4.5.1",
"postcss-loader": "^1.3.3",
"raw-loader": "0.5.1",
"run-sequence": "1.2.2",
"sass-loader": "^6.0.6",
"script-loader": "^0.7.0",
"style-loader": "^0.15.0",
"url-loader": "^0.5.8",
"vue-loader": "^12.2.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1"
}
}
.babelrc:
{
"presets": [
["es2015", { "modules": false }], "stage-1", "stage-2", "stage-3"
],
"plugins": [
["transform-vue-jsx"],
["transform-object-assign"],
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}]]
]
}
webpack:
module.exports = {
entry: {
app: `./client/app.js`
},
output: {
path: path.resolve(__dirname, `../../`, config.destination),
filename: `[name].js`
},
module: {
rules: [{
test: /\.vue$/,
loader: `vue-loader`,
options: {
loaders: {
js: 'babel-loader'
}
}
}, {
test: /\.js$/,
loader: `babel-loader`,
exclude: /(node_modules)/
}],
noParse: [/\/dist\/.+/]
},
resolve: {
modules: [rootPath, `node_modules`],
extensions: [`.js`, `.jsx`, `.vue`, `.json`, `less`, `scss`, `css`, `html`],
alias: {
vue: `node_modules/vue/dist/vue.js`,
client: clientPath
}
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
mangle: false,
comments: false,
warnings: false,
sourceMap: !!argv.test
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
],
devtool: `cheap-source-map`
};
Got error: [ 'app.js from UglifyJs\nUnexpected token: keyword (default) [app.js:35217,7]' ]
Edition(2017-07-10 11:38:19)
app.js: import VueRouter from 'vue-router';
package.json of vue-router in node_modules has this:
"main": "dist/vue-router.common.js",
"module": "dist/vue-router.esm.js",
"name": "vue-router",
So how to make babel use the main field rather than the module field ?