Error when upgrading `babel-eslint` to `@babel/eslint-parser`
xg-wang opened this issue · comments
babel-eslint is used in the latest ember new https://github.com/ember-cli/ember-new-output/blob/v3.23.0-beta.2/package.json#L27, however, it has moved:
https://babeljs.io/blog/2020/07/13/the-state-of-babel-eslint
module.exports = {
--- parser: "babel-eslint",
+++ parser: "@babel/eslint-parser"
plugins: [
--- "babel"
+++ "@babel
]
};
When I try to replace the default babel-eslint, this error is thrown:
/home/travis/build/xg-wang/test--babel-eslint-parser/.eslintrc.js
0:0 error Parsing error: No Babel config file detected for /home/travis/build/xg-wang/test--babel-eslint-parser/.eslintrc.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files
You have to set the config flag requireConfigFile:
module.exports = {
parser: '@babel/eslint',
parserOptions: {
requireConfigFile: false,
},
// ...snip...
}I'd love a PR to the ember-cli blueprint to update to latest for folks if you have the time (no worries if not though!).
Hmmm I might have done something silly. Neither
module.exports = {
parser: '@babel/eslint',
parserOptions: {
requireConfigFile: false,
},
// ...snip...
}
nor
module.exports = {
parser: '@babel/eslint-parser',
parserOptions: {
requireConfigFile: false,
},
// ...snip...
}
seem to be working here, both throwing errors
`@babel/eslint`
- xg-wang/test--babel-eslint-parser@61c4100
- https://travis-ci.com/github/xg-wang/test--babel-eslint-parser/builds/202266057
/home/travis/build/xg-wang/test--babel-eslint-parser/.eslintrc.js
0:0 error Parsing error: AST is missing range information
/home/travis/build/xg-wang/test--babel-eslint-parser/.template-lintrc.js
0:0 error Parsing error: AST is missing range information
/home/travis/build/xg-wang/test--babel-eslint-parser/app/app.js
0:0 error Parsing error: This experimental syntax requires enabling the parser plugin: 'classProperties' (7:15)
/home/travis/build/xg-wang/test--babel-eslint-parser/app/router.js
0:0 error Parsing error: This experimental syntax requires enabling the parser plugin: 'classProperties' (5:11)
/home/travis/build/xg-wang/test--babel-eslint-parser/config/environment.js
0:0 error Parsing error: Cannot read property '0' of undefined
/home/travis/build/xg-wang/test--babel-eslint-parser/config/targets.js
0:0 error Parsing error: AST is missing range information
/home/travis/build/xg-wang/test--babel-eslint-parser/ember-cli-build.js
0:0 error Parsing error: Cannot read property '0' of undefined
/home/travis/build/xg-wang/test--babel-eslint-parser/testem.js
0:0 error Parsing error: AST is missing range information
/home/travis/build/xg-wang/test--babel-eslint-parser/tests/test-helper.js
0:0 error Parsing error: AST is missing range information
`@babel/eslint-parser`
- xg-wang/test--babel-eslint-parser@71b11c2
- https://travis-ci.com/github/xg-wang/test--babel-eslint-parser/builds/202266314
/home/travis/build/xg-wang/test--babel-eslint-parser/app/app.js
7:15 error Parsing error: /home/travis/build/xg-wang/test--babel-eslint-parser/app/app.js: Support for the experimental syntax 'classProperties' isn't currently enabled (7:16):
5 |
6 | export default class App extends Application {
> 7 | modulePrefix = config.modulePrefix;
| ^
8 | podModulePrefix = config.podModulePrefix;
9 | Resolver = Resolver;
10 | }
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing
/home/travis/build/xg-wang/test--babel-eslint-parser/app/router.js
5:11 error Parsing error: /home/travis/build/xg-wang/test--babel-eslint-parser/app/router.js: Support for the experimental syntax 'classProperties' isn't currently enabled (5:12):
3 |
4 | export default class Router extends EmberRouter {
> 5 | location = config.locationType;
| ^
6 | rootURL = config.rootURL;
7 | }
8 |
Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing
Hmm. I'll try to poke at your repro tomorrow, but I'm pretty sure I've used a snippet like I pasted above in a few different repos.
Ah sorry I think the issue isn't in ember-cli-babel, which does install the plugin https://github.com/babel/ember-cli-babel/blob/v7.23.0/index.js#L413
The test error in my repo was due to the silly renaming (I forgot to rename vendor assets in test.html). However, the eslint config isn't aware of ember-cli-babel added the plugin, by turning off requireConfigFile, @babel/eslint-parser can't parse correctly.
Hmmm. So maybe we need to set babelOptions in parserOptions as well?
Ultimately the work over in #367 (which starts down the path to unlock actually using .babelrc.js) will make this much nicer.
So (for example) you might be able to do:
module.exports = {
parser: '@babel/eslint-parser',
parserOptions: {
requireConfigFile: false,
babelOptions: {
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
},
// ...snip...
}Can you give that a whirl?
Thanks @rwjblue the snippet is working
I updated https://github.com/xg-wang/test--babel-eslint-parser/blob/master/.eslintrc.js and CI is happy now.
I guess when #367 unlocks sharing .babelrc.js between ember-cli-babel and eslint we won't need to manually tune the config for both.
Ya, that's exactly the goal.
I got it running worked after spending some time trying out different options. Hope this helps anyone else getting stuck.
.eslintrc.json (in root project folder):
{
"env": {
"browser": true,
"es2021": true,
"jest/globals": true
},
"extends": [
"standard",
"plugin:jest/all"
],
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"jest/no-hooks": [
"error",
{
"allow": [
"afterEach",
"beforeEach"
]
}
]
},
"plugins": [
"jest"
]
}Empty .babelrc (in root project folder):
{}.package.json (in root project folder):
{
"scripts": {
"test": "jest",
"lint": "npx eslint --format=table .",
"lintfix": "npx eslint --fix ."
},
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/eslint-parser": "^7.15.0",
"aws-sdk-mock": "^5.2.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jest": "^24.4.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"jest": "^27.0.6"
}
}VS Code settings.xml (editor configuration: enables auto fix on save + babel parser):
"eslint.alwaysShowStatus": true,
"eslint.format.enable": true,
"eslint.lintTask.enable": true,
"eslint.options": {
"parser": "@babel/eslint-parser"
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript"
]