Is it possible to deactivate this error in eslint?
Parsing error: 'import' and 'export' may only appear at the top level
ESLint natively doesnt support this because this is against the spec. But if you use babel-eslint parser then inside your eslint config file you can do this:
{
"parser": "babel-eslint",
"parserOptions": {
"sourceType": "module",
"allowImportExportEverywhere": true
}
}
Doc ref: https://github.com/babel/babel-eslint#configuration
my solution incase other dont work
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module"
}
Support for dynamic import has been added in eslint 6.2.
You need to set ecmaVersion to 11 (or 2020) though.
"parserOptions": {
"ecmaVersion": 11
...
}
You can test that in their online demo.
In my case:
Added javascriptreact for a react project. I guess the project type should be added to the plugins.
{
...,
"plugins": [
"prettier",
"javascriptreact"
],
...
}
Related
Not sure what's going on here.
I am working on migrating from tslint to eslint. The basic migration seems to have gone smoothly (well, "smoothly" -- got some kinds in the rules that need to get worked out apparently), but I've run across this and I have no idea how to get past it:
1:1 error Definition for rule '#typescript-eslint/no-shadow' was not
found #typescript-eslint/no-shadow
I've modified the .eslintrc.js file like so (parts snipped for brevity):
module.exports = {
"env": {
"browser": true,
"es6": true,
"node": true
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"plugins": [
"eslint-plugin-import",
"#angular-eslint/eslint-plugin",
"#typescript-eslint",
"#typescript-eslint/tslint"
],
"rules": {
// Many unrelated plugins, all rules, none mentioning no-shadow
"no-shadow": "off",
"#typescript-eslint/no-shadow": ["error", { "hoist": "all" }],
// Many other unrelated plugins, all rules, none mentioning no-shadow. But I thought
// This next one may be helpful.
"#typescript-eslint/tslint/config": [
"error",
{
"rules": {
"import-spacing": true,
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
]
}
};
The versions of the plugins I'm working with are (copied from package.json):
"eslint-plugin-import": "^2.19.1",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
I'm at a loss as to what's going on, and my google searches have turned up nothing aside from "use "no-shadow": "off", which I do.
v2.34.0 of the typescript-eslint packages is 9 months old.
Upgrade to a more recent version of typescript-eslint.
#typescript-eslint/no-shadow was added in v4.0.0
I have a vue.js project with the storybook addon. I am trying to write a story using the Docs addon which allows you to write stories in .mdx, I am having trouble getting linting to work in vs code.
Thanks in advance and any help would be much appreciated!
I am using this sample project found here https://github.com/vueschool/storybook-fundamentals/tree/master.
The sample project has "eslint": "^6.7.2" installed.
I have installed "eslint-plugin-mdx": "^1.8.2"
I have the following extensions installed
My ES lint config looks like this, as suggested by https://github.com/mdx-js/eslint-mdx
{
"extends": ["plugin:mdx/recommended"]
}
It seems like vs code is picking up the mdx file but no linting seems to be happening, I'm I doing something wrong?
Also I have added the following to VS Code settings but it does not seem to be doing much
If this helps anyone. there is a dependency on eslint-plugin-react for eslint-mdx to work.
check https://github.com/mdx-js/eslint-mdx/issues/229
my eslint config looks like this for reference.
"root": true,
"env": {
"node": true
},
"extends": [
"eslint:recommended", "plugin:mdx/recommended", "plugin:react/recommended"
],
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"settings": {
"react": {
"version": "detect"
}
}
I just created a new Vue app through Vue CLI but I can't use either debugger or console.log otherwise I get an error in the browser, why and how can I allow it ?
Unexpected 'debugger' statement (no-debugger) at src/components/SomeComponent.vue:48:7
In my case it was because I went with the default configs when creating my project and it includes eslint:
So in order to allow debugger and console.log statements I modified the rules on my package.json file like this:
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {
"no-console": 1,
"no-debugger": 1
},
"parserOptions": {
"parser": "babel-eslint"
}
}
This way I still get a warning when compiling so I don't forget to remove them before committing but I can run my app and use those statements.
You can use:
//eslint-disable-next-line no-console
only if your really have to use console.log()
otherwise I highly recommend to use a logger like 'vuejs-logger'.
What happens is like in production you still have these console.log lines that I actually don't like a lot... plus the warning during rebuilding prevents you from using the hot reload of your app during development.
unit testing a component, I have to import a mixin ( vue-howler)
import VueHowler from "vue-howler";
I am getting a warning on the import regarding the implicit any ...
[ts]
Could not find a declaration file for module 'vue-howler'. '/Users/yves/Developments/WIP/VUE.JS-cli-3/3-chocha-home-content/chocha/node_modules/vue-howler/dist/vue-howler.common.js' implicitly has an 'any' type.
Try `npm install #types/vue-howler` if it exists or add a new declaration (.d.ts) file containing `declare module 'vue-howler';`
How I can solve this warning ? there is no #types/vue-howler ) ?
here is the related package.json eslint block
package.json
....
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"#vue/prettier"
],
"rules": {
"no-console": 0
},
"parserOptions": {
"parser": "babel-eslint"
}
},
....
thanks for feedback
It looks like you're using typescript. If no typings exist for that particular package, you'll need to create your own definition file:
Name it vue-howlder.d.ts. The contents should be:
declare module `vue-howler`
Make sure your tsconfig file can find this in wherever your typings directory is.
I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.
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.
You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html
Details:
/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
^^^^^^
SyntaxError: Unexpected token import
> 17 | import 'vue-awesome/icons/expand'
.babelrc:
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}]
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
}
}
jest config in package.json:
"jest": {
"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"
],
"moduleDirectories": [
"node_modules",
"src"
]
}
It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.
boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question
How can I resolve this?
You just need to make sure that vue-awesome will be transformed by jest, so add
following to your jest config:
transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],
which means: "Ignore everything in node_modules except for vue-awesome.
Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081
If you are encountering this problem after updating to a newer Jest version, try clearing Jest's internal cache:
jest --clearCache
Adding this in the package.json works for me (replace <package_name> with causing package name)
"jest": {
"transformIgnorePatterns": ["node_modules/(?!<package_name>)/"]
}
We had the same issue with another library. The root cause was that we had a circular dependency in code. But the error text did not refer to it at all. just like in this post: "Jest encountered an unexpected token..."
In my case I needed testEnvironment: "node" in jest.config.js file. The error came out when I started tests against Vue Router.
// jest.config.js
module.exports = {
preset: "#vue/cli-plugin-unit-jest/presets/typescript",
transform: {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
moduleNameMapper: {
"^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"jest-transform-stub",
},
testEnvironment: "node", // It fixes my issue
};