I've just generated a fresh project with npx react-native init and ESLint is complaining in one of my test files:
9:1 error 'describe' is not defined no-undef
12:5 error 'beforeEach' is not defined no-undef
16:5 error 'afterEach' is not defined no-undef
20:5 error 'test' is not defined no-undef
28:17 error 'fail' is not defined no-undef
30:13 error 'expect' is not defined no-undef
Based on the docs and this thread, I've added:
env: {
jest: true,
},
to my .eslintrc.js file. However, ESLint is still complaining with:
28:17 error 'fail' is not defined no-undef
Has anyone already experienced and solved this issue ?
Here are the jest dependencies versions in package.json:
"babel-jest": "^26.5.2",
"jest": "^26.5.3",
Ok so it turns out Jest uses Jasmine's fail().
Updated .eslintrc.js by adding Jasmine and it works. No more errors.
env: {
jasmine: true,
jest: true,
},
The former runner, jest-jasmine2, is deprecated in Jest since 27.0.0
and jest-circus is getting used instead.
Update .eslintrc.js
env: {
jest: true,
circus: true,
}
Related
I got this error when I wanted to test my component by jest
below you is my .babelrc config
{
"presets": [["#babel/preset-env", { "modules": "commonjs" }], "#babel/preset-react"]
}
here is my github repository
https://github.com/shayanzd20/movie
You may have named your test file something.js instead of something.jsx. .js files do not support component bracket syntax and will throw this error.
I'm having issues with npm run build, which effectively calls vue-cli-service build. My goal is to remove console statements in production builds. However, the first time it fails. If I run it again immediately (without code changes), it succeeds.
For reproducibility and isolation, I'm running code in a node docker:
docker run --rm -it -v "$(pwd):/usr/src/app" node:14.4.0 /bin/bash
In the docker I setup the environment
npm ci
In the clean environment, running the build fails:
root#bd366b5873ca:/usr/src/app# npm run build
> my-app#0.1.0 build /usr/src/app
> vue-cli-service build
PRODUCTION babel setup
production eslint setup.
⠦ Building for production...production eslint setup.
⠇ Building for production...PRODUCTION babel setup
⠼ Building for production...production eslint setup.
⠙ Building for production...
ERROR Failed to compile with 8 errors
The errors are all eslint errors on occurrences of console. commands:
Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at XXXX
Immediately running the build again, results in a successful build:
root#bd366b5873ca:/usr/src/app# npm run build
> my-app#0.1.0 build /usr/src/app
> vue-cli-service build
PRODUCTION babel setup
production eslint setup.
⠏ Building for production...
WARNING Compiled with 2 warnings
The PRODUCTION babel setup and production eslint setup originate from my babel.config.js and .eslint.rc.
I've configured eslint as follows, to fail on console. statements in production:
# .eslintrc.js
if (process.env.NODE_ENV === 'production') {
console.info('production eslint setup.')
}
module.exports = {
root: true,
env: {
node: true
},
'plugins': ['jest'],
'extends': [
'eslint:recommended',
'plugin:vue/recommended',
'#vue/standard',
'plugin:jest/recommended',
'plugin:jest/style'
],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
},
parserOptions: {
parser: 'babel-eslint',
parserOptions: {
babelOptions: {
configFile: "babel.config.js"
}
}
}
}
I've configured babel to remove the console. statements:
# babel.config.js
/* eslint-disable no-var */
module.exports = (api) => {
var isProd = api.cache.invalidate(() => process.env.NODE_ENV === 'production')
var plugins = []
if (isProd) {
console.info('PRODUCTION babel setup')
plugins.push(['transform-remove-console', { exclude: [] }])
}
return {
presets: ['#vue/cli-plugin-babel/preset'],
plugins
}
}
In attempts to get it fixed, I've also configured terser to remove console. statements:
# vue.config.js
module.exports = {
'transpileDependencies': [
'vuetify'
],
publicPath: process.env.PUBLIC_SUB_PATH === ''
? '/' : '/' + process.env.PUBLIC_SUB_PATH + '/',
runtimeCompiler: true,
css: {
extract: { ignoreOrder: true }
},
chainWebpack: config => {
config.optimization.minimize = true
config.optimization.minimizer('terser').tap((args) => {
args[0].terserOptions.compress.drop_console = true
return args
})
}
}
Versions (from package.json). In attempt to fix it, upgraded to vue-cli 4, also happened in vue-cli 3:
....
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.3.4",
"vuetify": "^2.3.1",
"vuex": "^3.4.0"
},
....
"devDependencies": {
"#babel/core": "^7.10.3",
"#babel/preset-env": "^7.10.3",
"#vue/cli-service": "^4.4.4",
"babel-eslint": "^10.1.0"
"babel-loader": "^8.1.0",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^5.16.0",
...
}
Question:
The console prints of PRODUCTION babel setup and production eslint setup show that in a clean build, the configuration is loaded multiple times. Then it fails somehow. Running it again seems more straightforward, configs are loaded once and then it succeeds.
How can I configure vue to successfully build the first time, removing the console statements?
Is it the cache?
After the successsful build, removing the cache:
rm -Rf ./node_modules/.cache
and then building it again (npm run build) is equal to the first run: fails
Modern build?
When creating a modern build (after a npm run build to populate the cache):
npm run build -- --modern
Successfully builds the legacy build, but fails the modern build:
> my-app#0.1.0 build /usr/src/app
> vue-cli-service build "--modern"
PRODUCTION babel setup
production eslint setup.
⠏ Building legacy bundle for production...
WARNING Compiled with 2 warnings
....
PRODUCTION babel setup
production eslint setup.
⠹ Building modern bundle for production...PRODUCTION babel setup
⠧ Building modern bundle for production...PRODUCTION babel setup
⠋ Building modern bundle for production...PRODUCTION babel setup
⠏ Building modern bundle for production...PRODUCTION babel setup
PRODUCTION babel setup
⠹ Building modern bundle for production...PRODUCTION babel setup
⠧ Building modern bundle for production...PRODUCTION babel setup
⠦ Building modern bundle for production...
ERROR Failed to compile with 3 errors
Module Error (from ./node_modules/thread-loader/dist/cjs.js):
/usr/src/app/src/axios.js
7:3 error Unexpected console statement no-console
Running the modern build again immediately after it succeeds successfully. So I need in total 3 runs for the modern build to succeed (first time legacy bundle fails, second time legacy bundle succeeds but modern build fails, third time legacy and modern build succeed).
Vue issue
There is a related vue issue at https://github.com/vuejs/vue-cli/issues/5399
I met the same err and i fixed it through adding lintOnSave: process.env.NODE_ENV === 'development' in vue.config.js. The following is the checklist to help u fix ur problem:
npx vue-cli-service inspect --mode production >> webpack.config.production.js generate webpack configuration file in production
then you can see lint is before terser. It makes the first time yarn build failure and the next time is successful
so in this case, you can turn off the lintOnSave in production
About lintOnsave
I have started a new vue-cli project with
vue create -n tailwind-demo
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Vuex, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
I have also add the following postcss.config.js:
module.exports = {
plugins: [
require("postcss-preset-env")({ stage: 0 }),
require("tailwindcss")(),
require("autoprefixer")()
]
};
When i run the yarn lint command it got the follow errors
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:3:5:
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:4:5:
error: Require statement not part of import statement (#typescript-eslint/no-var-requires) at postcss.config.js:5:5:
How can i import the plugins or how should i configure the eslint in Vue CLI for the postcss.config.js?
I have tried something like
import tailwindCss from "tailwindcss";
But i got a SyntaxError: Unexpected identifier while building.
It seems to work with the following postcss.config.js
module.exports = {
plugins: {
"postcss-preset-env": {
stage: 0
},
tailwindcss: {}
}
};
at running npm test i get the following error for every existing typescript class.
im using vue, jest
STACK: ReferenceError: [BABEL] ... Unknown option: base.cwd. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
`{ presets: [{option: value}] }`
Valid:
`{ presets: [['presetName', {option: value}]] }`
Running grunt - I get this error message:
Running "sass:all" (sass) task
Fatal error: The implementation option must be passed to the Sass task
I've tried re-installing grunt, node, npm, dependencies - but I always come back to this error I can't get past.
Should I post my Gruntfile.js? Frankly, this was set up by a third-party and we don't use it often - I'm thinking maybe we should start from the ground up because it is from about 4 years ago originally... but wondering if anyone has seen this error before and knows of a fix/workaround.
With the update to grunt-sass 3, you have to choose whether you want to use node-sass or dart-sass to compile
For node-sass you need to install the module with:
$ npm install --save-dev node-sass
In you gruntfile, you than need to add node-sass as requirement and add the define constant as implementation option:
const sass = require('node-sass');
require('load-grunt-tasks')(grunt);
grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});
See also official page for more details: https://www.npmjs.com/package/grunt-sass
use this
**const sass = require("node-sass");**
**grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true,
},
dist: {
files: {
"css/styles.css": "css/styles.css",
},
},
},
});
This will help you solve the problem
UPDATE: Only works for grunt-sass 2.x
I had this problem when upgrading from grunt-sass 1.x to 2.x. This solved it for me:
Add implementation: 'sass' to your sass.options object in Gruntfile.js like so:
options: {
implementation: 'sass',
outputStyle: 'expanded',
sourceMap: true,
quiet: true // stop depreciation errors
},