I'm trying to lint JavaScript code with optional chaining syntax like:
let foo = bar?.property;
When parsing my JS files with eslint explicitly, it passes.
When parsing with gulp-eslint using the same configuration, linting fails with:
Parsing error: Unexpected token .
My .eslintrc.json file contains:
{
"parserOptions": {
"ecmaVersion": 2020
}
}
My Gulp task looks like:
const eslint = require('gulp-eslint');
return gulp.src(['src/**/*.js'])
.pipe(eslint({ configFile: '.eslintrc.json' }))
.pipe(eslint.formatEach('compact', process.stderr))
.pipe(eslint.failAfterError());
I'm using the following packages:
"devDependencies": {
"eslint": "^8.2.0",
"gulp": "4.0.2",
"gulp-eslint": "^6.0.0",
}
Am I missing something, or is there a viable workaround?
The ecmaVersion parser option can't be used like that, see https://eslint.org/docs/user-guide/configuring/language-options#specifying-environments.
Changing it from 2020 to 11 or 12 or "latest" should work.
Related
I installed jest with the following command on my next js project
npm i --save-dev jest #testing-library/react #testing-library/jest-dom jest-environment-jsdom
then added jest.config.json file with the below code
const nextJest = require("next/jest");
const createJestConfig = nextJest({
dir: "./",
});
const customJestConfig = {
moduleDirectories: ["node_modules", "<rootDir>/"],
testEnvironment: "jest-environment-jsdom",
};
module.exports = createJestConfig(customJestConfig);
Now, when I run 'npm test', I get the following error
Test suite failed to run
D:\my-project\node_modules\#jest\reporters\build\GitHubActionsReporter.js:67
#getMessageDetails(failureMessage, config) {
^
SyntaxError: Unexpected token '('
at Object. (node_modules/#jest/reporters/build/index.js:75:3)
I've tried a lot of solutions, updating the config file, adding babel plugins, none worked. And I haven't found any mention of this error online. What is the issue here?
My dev-dependencies versions -
"devDependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"eslint": "8.14.0",
"eslint-config-next": "12.1.5",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3"
}
As mentioned by jonrsharpe, the fix is to make sure you have an updated version of node installed.
This issue isn't limited to using Jest with a Next.js solution, but also applies to Jest being used with React/VanillaJs/etc
I have a vue application with single file components and i want to add unit tests to test the components. I'm trying to use jest like described here but i keep getting the error "Jest encountered an unexpected token" with the following details:
/some_path/MyRecipe.vue:1
<template>
^
SyntaxError: Unexpected token <
1 | import { shallowMount } from "#vue/test-utils"
> 2 | import MyRecipe from "../src/components/MyRecipe.vue"
| ^
3 |
4 | describe('MyRecipe', () => {
5 | test('is a Vue instance', () => {
at Runtime._execModule (node_modules/jest-runtime/build/index.js:1166:56)
at Object.<anonymous> (__tests__/MyRecipe.test.js:2:1)
After some research (e.g. from here) I gather that this is probably due to jest expecting a .js file, but the .vue single file components have html, javascript and css in them, usually dealt with by webpack and vue-loader. I've tried to follow jest configurations from various tutorials to make jest use vue-jest to transform .vue files, but the error persists. This is my package.json file (unnecessary parts removed):
{
"name": "all-recipes ",
"version": "0.1.0",
"private": true,
"scripts": {
// ...
"test": "jest"
},
"dependencies": {
// ...
"core-js": "^3.4.3",
"vue": "^2.6.10"
// ...
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.1.0",
"#vue/cli-plugin-eslint": "^4.1.0",
"#vue/cli-service": "^4.1.0",
"#vue/test-utils": "^1.0.3",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^26.0.1",
// ...
"jest": "^26.0.1",
"jest-serializer-vue": "^2.0.2",
"vue-jest": "^3.0.5",
"vue-template-compiler": "^2.6.10",
"vue-test-utils": "^1.0.0-beta.11"
},
// ...
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.,(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
"snapshotSerializers": [
"jest-serializer-vue"
]
}
}
Any idea what might be wrong, or some tips on how to debug this?
EDIT: I have looked into this question and I don't believe the answer there would solve my problem since what I am trying to import is a .vue file and not an .html file.
EDIT 2: I have a feeling that jest is somehow just not picking up the transforms, because removing them from package.json doesn't change anything.
EDIT 3: No, jest is correctly using vue-jest for transforming. If I uninstall vue-jest and try running the test again, jest complains that vue-jest is missing.
The solution to my problem turns out to be a bit anti-climatic.
The problem was that my regexp string to recognize .vue files was wrong and didn't pick up my MyRecipe.vue file. Therefore, vue-jest wasn't used to transform it for jest to interpret, hence the trouble understanding that the file in question started with a very non-js line; <template>. The regexp that works is ^[^.]+.vue$, so the transform section of my package.json file becomes
{
// ...
"jest": {
// ...
"transform": {
"^[^.]+.vue$": "vue-jest",
"^.+\\.js$": "babel-jest"
},
// ...
}
}
Met same issuesome time ago. What i found.
The problem was in the short note of template v-slot
template(v-slot:body)
It works to compile, but Jest throws an error
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
There was two ways i fount to solve this:
Edit my jest.config.js, like this
globals: {
'vue-jest': {
pug: {
doctype: 'html',
},
},
},
Write a full note like this
template(v-slot:body="")
What worked for me was changing the transform of the vue-jest to what is shown in the documentation.
https://github.com/vuejs/vue-jest
so try using "^.+\\.vue$": "vue-jest" instead of "^[^.]+.vue$": "vue-jest"
full config might look like this
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}
I faced same issues tried many solution but none of them work ..below is following workaround in my case
Check package json has following dev dependency entries and jest configurations
"devDependencies": {
"babel-jest": "^23.6.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-unit-jest": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-airbnb": "^5.0.2",
"#vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "^6.2.2",
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest"
},
"moduleNameMapper": {
"^#/(.*)$": "<rootDir>/src/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.
(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/"
}
Check babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset',
],
};
check jest.config.js
module.exports = {
preset: '#vue/cli-plugin-unit-jest',
};
You need to install vue-jest (https://github.com/vuejs/vue-jest) with
npm install -D #vue/vue3-jest
Here are the available versions and their corresponding vue and jest versions
Vue version
Jest Version
Package
Vue 2
Jest <= 26
vue-jest#4
Vue 3
Jest <= 26
vue-jest#5
Vue 2
Jest 27
#vue/vue2-jest
Vue 3
Jest 27
#vue/vue3-jest
Then, you'll just have to update your jest configuration (in jest.config.ts for example) and add a transform section
"transform": {
"^.+\\.vue$": "#vue/vue3-jest"
}
Warning: be sure to update the npm install and the jest.config.ts with the vue-jest package that match your need!
We're converting our gulpfile.js in node v13.8.0 to ES6 as following:
import { src, dest, series, parallel, watch } from 'gulp'
import nodemon from 'gulp-nodemon' // normal nodemon does not display an error on app crash
import env from 'gulp-env'
import browser from 'browser-sync'
import sass from 'gulp-sass'
// Tasks
export default {
cssTranspile: cssTranspile,
jsTranspile: jsTranspile,
server: series(startNodemon, startBrowserSync),
default: series(
parallel(
cssTranspile,
jsTranspile
),
startNodemon,
startBrowserSync,
function () {
watch('public/scss/*.scss', cssTranspile)
}
)
}
The error reported, when simply running gulp, is:
internal/modules/cjs/loader.js:1160
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: T:\Node\ICP\gulpfile.js
require() of ES modules is not supported.
I must be doing something wrong. Anyone an idea on what it might be?
CLI version: 2.2.0
Local version: 4.0.2
The flag "type": "module", is set in package.json as described in the note docs. The issue is very much similar to this issue in the geolib library.
And when we rename gulpfile.js to gulpfile.babel.js as described here we get the same error.
The package.json contain these packages:
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/preset-env": "^7.8.4",
"#babel/register": "^7.8.3",
"exports-loader": "^0.7.0",
"gulp": "^4.0.2",
"gulp-env": "^0.4.0",
"gulp-nodemon": "^2.4.2",
"gulp-sass": "^4.0.2",
"nodemon": "^2.0.2"
},
"type": "module",
"babel": {
"presets": [
"#babel/env"
]
In an answer to my own question, when the flag "type": "module" is set in package.json you can't use gulp. More info can be found here.
This seems to be fixed now: https://github.com/gulpjs/gulp-cli/pull/214. Be sure to install the latest version of gulp-cli (2.3.0 as of June 2020).
If your package.json specifies "type": "module" you can name your ES module with Gulp tasks gulpfile.js, otherwise name it gulpfile.mjs. No need to use any transpilers or preloaders like esm, Babel or TypeScript.
I'm attempting to transpile Salesforce Commerce Cloud's .ds files to JavaScript so we can apply standard testing tools (Jest, Mocha, etc.). The SFCC docs indicate that .ds files are "Rhino JavaScript", with a non-standard extension for Flow-like type checking.
So far, stripping out the type annotations has been simple, using the transform-flow-strip-types plugin. But SFCC supports a deprecated "for each...in" statement from JavaScript 1.6 that Babel is choking on.
All code below is available on github.
Here's my source src/index.ds file:
function dump(a: Array) {
for each (var x in a) {
console.log(x);
}
}
module.exports = dump;
And my gulfile.js:
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('test', function () {
gulp.src('src/**/*.ds')
.pipe(babel())
.pipe(gulp.dest('dst'));
});
And this is my package.json:
{
"name": "dspoc",
"version": "1.0.0",
"description": "poc",
"main": "index.ds",
"author": "cjr",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.1"
},
"babel": {
"plugins": [
"transform-flow-strip-types"
]
}
}
When I run gulp test, I get this:
%> gulp test
[11:23:06] Using gulpfile ~/dev/dspoc/gulpfile.js
[11:23:06] Starting 'test'...
[11:23:06] Finished 'test' after 9.15 ms
events.js:163
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/craser/dev/dspoc/src/index.ds: Unexpected token, expected ( (2:5)
1 | function dump(a: Array) {
> 2 | for each (var x in a) {
| ^
3 | console.log(x);
4 | }
5 | }
at Parser.pp$5.raise (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp.expect (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:1749:33)
at Parser.pp$1.parseForStatement (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:2008:8)
at Parser.pp$1.parseStatement (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:1836:19)
at Parser.parseStatement (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:5910:22)
at Parser.pp$1.parseBlockBody (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseBlock (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:2247:8)
at Parser.pp$3.parseFunctionBody (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:4235:22)
at Parser.parseFunctionBody (/Users/craser/dev/dspoc/node_modules/babylon/lib/index.js:5897:20)
I've spent quite a bit of time digging for a plugin that will let Babel transpile this to something like the for...of statement, but I can't seem to find anything.
I'm now at the precipice of digging into the for-of transform was built and creating something similar to transform for each...in, but I really don't want to have to put that work in if I can avoid it.
I feel like I'm missing something obvious here. Anyone know how this can be done?
for each...in was never an official part of the spec and didn't exist by the time Babel came around, so it is not supported by Babel. I'm afraid you've have to update all usage of that syntax before Babel will be able to process it.
I am compress my js files by uglify-js
I want to compress Bootstrap 4 js file but it give me Error like this.
Can I compress all js files by only uglify-js Or how can i do it.
Parse error at src\bootstrap\alert.js:1,7
import $ from 'jquery'
^
ERROR: Unexpected token: name ($)
my package.json
"devDependencies": {
"node-sass": "^4.6.1",
"nodemon": "^1.12.1"
},
"dependencies": {
"autoprefixer": "^7.1.6",
"jquery": "^3.2.1",
"postcss-cli": "^4.1.1",
"uglify-js": "^3.1.9"
}
Try using the ES6 version of uglify-js. Replace with this in your package.json
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony"
or via command line:
npm install --save uglify-js#github:mishoo/UglifyJS2#harmony
uglify-js does not support ES2015 syntax like import statements or arrow functions. Instead, use the uglify-es module:
- "uglify-js": "^3.1.9"
+ "uglify-es": "^3.1.9"