Related
I have a Rails application with Vue and when I installed Jest and tried to run my Menu_Filter.test.js test, I got this error. I tried many solutions, but nothing worked.
Error:
My package.json in which I configured Jest:
{
"name": "immomapper-frontend",
"version": "0.1.0",
"dependencies": {
"#rails/actioncable": "^6.0.0",
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "5.4.3",
"#vue/composition-api": "^1.2.4",
"#vueform/multiselect": "^2.2.0",
"#vueform/slider": "^2.0.5",
"babel": "^6.23.0",
"babel-jest": "^27.2.5",
"jest": "^27.2.5",
"leaflet": "^1.7.1",
"turbolinks": "^5.2.0",
"vue": "^2.6.14",
"vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14",
"vue2-leaflet": "^2.7.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#vue/babel-preset-app": "^4.5.14",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/test-utils": "^1.2.2",
"babel-core": "^7.0.0-bridge.0",
"vue-jest": "^3.0.7",
"webpack-dev-server": "^3"
},
"scripts": {
"test": "jest"
},
"jest": {
"roots": [
"app/javascript/spec"
],
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$'": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"testEnvironment": "jsdom"
}
}
My test file:
import { mount, shallowMount } from '#vue/test-utils'
import Filter from '../components/Menu_filter'
test('Filter exists', () => {
const wrapper = mount(Filter);
expect(wrapper.is(Filter)).toBe(true)
})
Lastly, my babel.config.js:
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'#babel/preset-env',
{
targets: {
node: 'current'
}
}
],
(isProductionEnv || isDevelopmentEnv) && [
'#babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: auto,
exclude: ['transform-typeof-symbol']
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'#babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'#babel/plugin-transform-destructuring',
[
'#babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'#babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'#babel/plugin-proposal-private-methods',
{
loose: true
}
],
[
'#babel/plugin-proposal-private-property-in-object',
{
loose: true
}
],
[
'#babel/plugin-transform-runtime',
{
helpers: false
}
],
[
'#babel/plugin-transform-regenerator',
{
async: false
}
]
].filter(Boolean)
}
}
I don't use Typescript, I did add the yarn add babel-core#bridge --dev, I used transform, I also tried to change the jest version to 26.x.x, I added type="module" to my vue component... I don't know what the problem is.
We are switching our vue application over to use vue.config.js instead of webpack.config.js, and I am encountering some issues when trying to do a vue-cli-service build. The main error I am seeing is:
Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.
For reference, here are our package.json, vue.config.js, and babel.config.js
I'm sure there are some things in the vue.config.js that could be cleaned up, but ignoring some of those things, I believe our VueLoaderPlugin should be set up correctly, and it was working in the webpack.config.js before getting moved over to vue.config.js
package.json
{
"name": "project-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "vue-cli-service serve",
"start-dev": "vue-cli-service serve --mode development",
"build-dev": "vue-cli-service build --mode development",
"build-stg": "vue-cli-service build --mode stage --dest dist-stage",
"build-prod": "vue-cli-service build --mode production --dest dist-prod",
"lint": "vue-cli-service lint",
"test": "jest"
},
"dependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
"axios": "^0.18.0",
"bootstrap": "^4.3.1",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.0.0-rc.1",
"#babel/preset-env": "^7.0.0-rc.1",
"#vue/cli-plugin-babel": "^3.5.0",
"#vue/cli-plugin-eslint": "^3.5.0",
"#vue/cli-service": "^3.5.0",
"#vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"cross-env": "^5.2.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"file-loader": "^3.0.1",
"jest": "^24.5.0",
"jest-serializer-vue": "^2.0.2",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue-jest": "^3.0.4",
"vue-template-compiler": "^2.5.21",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"webpack-merge": "^4.2.1",
"webpack-serve": "^3.0.0-beta.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"jest": {
"verbose": true,
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
]
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"description": "## Project setup ``` npm install ```",
"main": "babel.config.js",
"keywords": [],
"author": "",
"license": "ISC"
}
vue.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const env = require(process.env.VUE_APP_NODE_ENV === '' ? './.env' : './.env.' + process.env.VUE_APP_NODE_ENV);
const setPath = function(folderName) {
return path.join(__dirname, folderName);
}
const buildingForLocal = process.env.VUE_APP_NODE_ENV === 'local';
const extractHTML = new HtmlWebpackPlugin({
title: 'Project',
filename: 'index.html',
template: 'public/index.html',
inject: true,
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
html5: true,
minifyCSS: true,
removeComments: true,
removeEmptyAttributes: true
},
environment: process.env.VUE_APP_NODE_ENV,
isLocalBuild: buildingForLocal,
imgPath: (!buildingForLocal) ? 'assets' : 'src/assets'
});
module.exports = {
publicPath: '/',
outputDir: buildingForLocal ? path.resolve(__dirname) : setPath(process.env.VUE_APP_DROP_LOCATION),
configureWebpack: {
entry: [
'./src/main.js'
],
output: {
filename: buildingForLocal ? '[name].js' : '[name].[hash].js'
},
resolve: {
extensions: ['.js', '.vue'],
alias: {
vue: buildingForLocal ? 'vue/dist/vue.js' : 'vue/dist/vue.min.js'
}
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
js: 'babel-loader'
}
}
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: "babel-loader",
options: { presets: ['#babel/preset-env'] }
}]
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.svg$/,
loader: 'svg-sprite-loader'
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]',
useRelativePath: buildingForLocal
}
}
]
},
plugins: [
extractHTML,
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
//filename: "css/styles.[hash].css",
//chunkFilename: "[id].css"
}),
new webpack.DefinePlugin({
'process.env': env
}),
new CleanWebpackPlugin(),
new VueLoaderPlugin()
],
optimization: {
splitChunks: false
},
mode: buildingForLocal ? 'development' : 'production'
},
devServer: {
historyApiFallback: true,
noInfo: false
}
};
babel.config.js
module.exports = {
"presets": [
["#babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"plugins": ["#babel/plugin-syntax-dynamic-import"],
"env": {
"test": {
"presets": [
["#babel/preset-env", { "targets": { "node": "current" }}]
]
}
}
}
I've initialized a new react-native project with RN Version 0.59.
I've setup eslint (with airbnb-ruleset), babel and flow:
package.json:
"devDependencies": {
"#babel/core": "^7.4.0",
"#babel/runtime": "^7.4.2",
"#react-native-community/eslint-config": "^0.0.3",
"babel-eslint": "^10.0.1",
"babel-jest": "^24.5.0",
"babel-preset-flow": "^6.23.0",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"flow-bin": "^0.96.0",
"jest": "^24.5.0",
"metro-react-native-babel-preset": "^0.53.1",
"react-test-renderer": "^16.8.5"
},
babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset", "flow"]
};
eslintrc.json
{
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
}
Issue:
If I run eslint, I got the following errors:
8:17 error Parse errors in imported module '../app/App': Unexpected token Props (19:6) import/no-named-as-default
8:17 error Parse errors in imported module '../app/App': Unexpected token Props (19:6) import/no-named-as-default-member
How can I configure eslint in right way to recognize that this is a flow-type declaration?
I've figured it out.
First I've installed eslint-plugin-flowtype
After that, I've edited .eslintrc.json like this:
add parser: "babel-eslint",
add to extends"plugin:flowtype/recommended"`
add to plugins : "flowtype"
After that, it works.
File looks like this now:
{
"parser": "babel-eslint",
"env": {
"es6": true,
"node": true,
"jest": true
},
"extends": "plugin:flowtype/recommended",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"flowtype"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }]
}
}
I'm using the VueJS Webpack template found here: https://github.com/vuejs-templates/webpack
Example Route:
const AuthRoute = () => import(/* webpackChunkName: "authroute" */ './AuthRoute.vue')
Example Error:
[eslint] Parsing error: Unexpected token import
I've followed the steps provided in Webpack's Dynamic import section, as well as Anthony Gore's blog post on how to accomplish code splitting with VueJS at the router level. More specifically, here is my setup:
Package.json
...
"babel-core": "^6.22.1",
"babel-eslint": "^8.0.3",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",
"babel-plugin-dynamic-import-webpack": "^1.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^4.13.1"
...
.babelrc
{
"presets": [
["env", {
"modules": false
}],
"stage-2"
],
"plugins": [
"dynamic-import-webpack",
"syntax-dynamic-import",
"transform-runtime"
],
"env": {
"test": {
"presets": ["env", "stage-2"] }
}
}
.eslintrc.js
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
allowImportExportEverywhere: true
}
I'm at a bit of a loss as to why I'm still seeing this error. My code runs and works as expected when using npm run dev and npm run build, but this parsing error prevents the rest of the file from being linted, and I am unable to suppress it.
Any/all help is appreciated!
.eslintrc.js
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
allowImportExportEverywhere: true
}
Should Be:
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module',
allowImportExportEverywhere: true
}
Source: https://eslint.org/docs/user-guide/configuring#specifying-parser
With (#vue/cli)
.eslintrc.json
{
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 8,
"sourceType": "module"
}
}
This StackOverflow question and answer did help me solve this issue, but currently in April 2020, the parser key seems to be required inside parserOptions, or at least for my combination of settings.
I will show my current day config that I use with Laravel 7/Laravel Mix and Vue 2.6~.
.eslintrc.json
{
"env": {
"browser": true,
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"airbnb-base",
"plugin:vue/essential"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 2019,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
// dat ruleset
},
"settings": {
"import/resolver": {
"alias": {
"map": [
["#", "./resources"]
],
"extensions": [".vue"]
}
}
}
}
You'll only need that settings key if you are using Webpack aliases.
package.json
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
"laravel-mix": "^5.0.1",
}
.babelrc
{
"plugins": ["#babel/plugin-syntax-dynamic-import"]
}
webpack.config.js
If you are using Webpack "normally" without Laravel Mix, you will find your syntax is a little different here, but if you are using Webpack aliases, you will find this useful:
// use named JS bundles
mix.config.webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/',
};
// alias the ~/resources folder
mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#': `${__dirname}/resources`,
},
},
});
Final note: I always recommend usage of airbnb-base config and to rely on it to form the basis of your lint rules because it was created for multi-developer environments running die hard Functional Programming techniques for immutable, unidirectional data flow--and thus, Functional Reactive Programming while avoiding the pitfalls of JavaScript... and to focus on declarative code while avoiding reasonably bad kinds of imperative code.
I wrote a couple more words about that in my article about setting up ES Lint in Vue for Airbnb: https://medium.com/#agm1984/how-to-set-up-es-lint-for-airbnb-vue-js-and-vs-code-a5ef5ac671e8
Put the below code into .eslintrc. It expects parser options; by default it will be 2013:
"parserOptions": {
"ecmaVersion":"latest"
},
Clearly I'm missing something incredibly simple here, so I apologize in advance for the dumb question. I have no errors so it's difficult to Google.
I'm trying to export something, anything, from an npm package written in ES6, compiled with babel and webpack.
I followed this http://jamesknelson.com/using-es6-in-the-browser-with-babel-6-and-webpack/ for my webpack setup, leaving it mostly-identical, but find it below for reference. I made a test export repo just to make sure it wasn't anything in the code of the module I was trying to export; find that below as well. Any help would be greatly appreciated; at this point I feel like I'm taking crazy pills.
src/index.js
const test = "test";
export default test;
webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: [
"babel-polyfill",
"./src/index"
],
output: {
//path: path.join(__dirname, "lib"),
//filename: "[name].js"
filename: "./lib/index.js"
},
// import bare, .js, and .jsx files
resolve: {
extensions: ["", ".js", ".jsx"]
},
devtool: "source-map",
module: {
loaders: [
{
loader: "babel-loader",
// only load src
include: [
path.resolve(__dirname, "src")
],
// only compile .js and .jsx files
test: /\.jsx?$/,
query: {
plugins: ["transform-runtime", "transform-decorators-legacy"],
//plugins: ["transform-decorators-legacy"],
presets: ["es2015", "stage-0", "react"]
}
},
]
},
debug: true
};
package.json
{
"name": "test-package",
"version": "0.0.1",
"description": "test",
"main": "lib/index.js",
"repository": {
"type": "git",
"url": "git+https://github.com/xxx/xxx.git"
},
"scripts": {
"start": "webpack-dev-server"
},
"keywords": [
"es6"
],
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/xxx/xxx/issues"
},
"homepage": "https://github.com/xxx/xxx#readme",
"dependencies": {
"babel-polyfill": "^6.5.0",
"babel-runtime": "^6.5.0"
},
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.5.2",
"babel-preset-es2015": "^6.5.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
}
}
webpack -p
other project
npm i ../test-package
(verify actually installed, search for "test" in lib/index.js and find what should be the export)
import test from "test-package";
console.log(test);
console.log(Object.keys(test));
output: empty object, empty array
Why not trying
import * as test from "test-package";
And then
console.log(test);