I'm having trouble getting my eslint atom package to work with jsx. My eslint package references a global .eslintrc in my home directory. Following the eslint docs I have my .eslintrc file set up as follows:
{
"parser": "babel-eslint",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
}
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
"semi": 2,
"strict": 0
}
}
My package.json dependencies:
"devDependencies": {
"babel-core": "^6.2.1",
"babel-eslint": "^8.2.6",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.10.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "16.3.2",
"react-dom": "16.3.2",
"react-redux": "5.0.7",
"redux": "4.0.0",
"youtube-api-search": "0.0.5"
}
I have installed the babel parser and eslint-plugin-react but am still not able to read the jsx. I'd really appreciate any help with this, thanks in advance.
What you mean by saying cant read jsx? If i get you right, i assume Atom is not showing any Error?
If so, it would be great to show us the list of installed Atom packages.
I guess you missed to include some packages e.g language-javascript-jsx
Related
Good day!
The project uses webpack 5, the tests themselves were written before the transition.
There is clearly a problem with babel, although the config was written according to jest documentation
I tried everything and looked up a lot over the forums and Github, but i couldnt find a solution. everything i try doesnt seem to work. I need help please!
Thank you!
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { shallowMount, mount, createLocalVue } from '#vue/test-utils';
^
SyntaxError: Unexpected token {
at Runtime.createScriptFromCode (../../node_modules/jest-runtime/build/index.js:1350:14)
package.json
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/plugin-transform-regenerator": "^7.12.13",
"#babel/preset-env": "^7.13.12",
"#babel/runtime": "^7.13.10",
"#mdi/js": "^5.9.55",
"#mdi/svg": "^5.9.55",
"#vue/babel-preset-app": "^4.5.12",
"#vue/test-utils": "^1.1.4",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^8.1.1",
"css-loader": "^5.2.0",
"eslint-plugin-jest": "^24.3.6",
"husky": "^6.0.0",
"jest": "^26.6.3",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"vue-inline-svg": "^2.0.0",
"vue-jest": "^3.0.7",
"vue-loader": "^15.9.6",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.2",
"webpack": "^5.30.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.10.0",
"izitoast": "^1.4.0",
"regenerator-runtime": "^0.13.7",
"vue": "^2.6.12",
"vue-axios": "^3.2.4",
"vue-click-outside": "^1.1.0",
"vue-select": "^3.11.2",
"vuelidate": "^0.7.6",
"vuetify": "^2.4.8",
"vuex": "^3.6.2"
},
"jest": {
"transform": {
"\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transformIgnorePatterns": [
"/node_modules/"
],
"moduleNameMapper": {
"common/vue/mixins/": "<rootDir>/__mocks__/jsFileMock.js",
"common/vue/components/ns-servers": "<rootDir>/__mocks__/jsFileMock.js"
}
},
.babelrc
{
"presets": [["#babel/env", { "modules": false }]],
"env": {
"test": {
"presets": [["#babel/env", { "targets": { "node": "current" } }]]
}
}
}
this is usually a parsing error, you have to tell Jest how you want to parse your test files and their dependencies. To help you properly I need to see your jest.config file (or your package.json depending on where you decide to set up your jest implementation).
Here are some basic settings to guide you:
// .babelrc
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"esmodules": true
}
}
],
"vue"
]
}
// package.json
{
"jest": {
"moduleFileExtensions": ["js", "json", "vue"],
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.vue$": "vue-jest"
}
}
}
Remember to install first npm install -D babel-preset-vue
Have a nice day!
I am using Webpack with Babel, and #babel/preset-env to hopefully import only required polyfills that I need. It seems though that the entire library is being installed, resulting in a large bundle (~250kb)
My package.js:
{
"name": "holidaynewtheme",
"version": "0.1",
"description": "Starter theme for holidaynewbase",
"private": true,
"main": "webpack.config.js",
"dependencies": {
"core-js": "^3.6.5",
"element-closest": "^3.0.2",
"flickity": "^2.2.1",
"gsap": "^3.4.2",
"js-cookie": "^2.2.1",
"turbolinks": "^5.2.0",
"vanilla-lazyload": "^17.1.0",
"whatwg-fetch": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.11.0",
"#babel/plugin-transform-runtime": "^7.8.3",
"#babel/preset-env": "^7.8.4",
"#babel/runtime": "^7.8.4",
"#shopify/theme-cart": "^3.0.3",
"#shopify/theme-product": "^3.0.3",
"#shopify/theme-product-form": "^3.0.3",
"#shopify/themekit": "^1.1.3",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"bluebird": "^3.5.3",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.2",
"css-loader": "^3.4.2",
"eslint": "^6.8.0",
"file-loader": "^3.0.1",
"glob": "^7.1.6",
"html-includes": "^4.3.3",
"mini-css-extract-plugin": "^0.9.0",
"modernizr": "^3.6.0",
"modernizr-loader": "^1.0.1",
"node-sass": "^4.13.1",
"postcss-loader": "^3.0.0",
"pre-commit": "^1.2.2",
"sass-loader": "^8.0.2",
"svg-symbols": "^1.0.5",
"url-loader": "^1.1.2",
"webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.8.0",
"webpack-cli": "^3.3.11",
"webpack-shell-plugin-next": "^1.1.5"
},
"browserslist": [
"last 1 version",
"> 2%",
"Explorer >= 11"
]
}
My babel.config.json:
{
"presets": [
[
"#babel/preset-env",
{
useBuiltIns: "entry",
debug: true,
corejs: "3.6.4"
}
]
],
"plugins": [
"#babel/plugin-transform-runtime"
]
}
I have the following imports set up in my main entry point:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
I'm using the BundleAnalyzerPlugin and get a gzipped size of 250kb for just core-js:
When I change the browserslist setup to be just Chrome 85, nothing form core-js is imported.
When I remove the import line, nothing is imported either.
OK, feeling foolish.
My webpack.config.js had this configuration for babel-loader:
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['#babel/env'],
}
},
... I'm not that au faix with webpack setup, so I think this was overriding my babel.config.json for anything .js.
Also, I removed the import lines, and changed useBuiltIns to be usage and everything works as expected.
The giveaway should have been that my debug: true was not causing debug info to be logged when webpack was compiling. It is now, and my bundle is much smaller.
I'm writing a game in JavaScript/ Redux. I'm unable to configure my .eslintrc.json file so that it supports the latest JavaScript syntax - I get a message saying
"Import and export declarations are not supported yet" eslint(node/no-unsupported-features/es-syntax).
I've read the official configuration docs for ESLint and tried (I thought all) combinations over the past few hours (changing environments, ecmaVersions, parsers and parser options).
The latest thing I've tried is to install a babel-eslint parser and so at the moment my .eslintrc.json looks like this:
{
"extends": ["airbnb-base", "prettier", "plugin:node/recommended"],
"plugins": ["prettier"],
"env": {
"es2020": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"prettier/prettier": "error"
}
}
And my package.json:
{
"name": "astroman-game",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"build": "webpack",
"start": "webpack-dev-server --open",
"eslint": "eslint ./"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"eslint": "^6.1.0",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-node": "^4.0.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-prettier": "^3.1.2",
"prettier": "^1.19.1",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-server": "^3.8.0"
},
"dependencies": {
"redux-starter-kit": "^0.6.3"
}
}
But it also didn't solve the problem.
I appreciate your help!
You are extending from plugin:node/recommended which is for NodeJS. Node only supports require() which are CommonJS-style imports. There is no reason for your frontend application to be using this set of recommendations.
Remove plugin:node/recommended from the extends list
"extends": ["airbnb-base", "prettier"],
I use decorators in my project, but it seems the babel-jest do not support this new experiment feature
I find some support from this github issue ===> which replace babel-jest with webpack-babel-jest, and it fix the decorator problem. But a new problem comes in when i run npm run test ==> "ReferenceError: regeneratorRuntime is not defined"
It seems we need regenerator-runtime.(I use redux-saga in my project) I can't get a way to fix this.
package.json {
"babel-core": "^6.7.6",
"babel-eslint": "^7.2.3",
"babel-jest": "^21.2.0",
"babel-loader": "^6.2.4",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"css-loader": "^0.23.1",
"enzyme": "^3.1.0",
"enzyme-adapter-react-15.4": "^1.0.3",
"jest": "^21.2.1",
"node-sass": "^3.4.2",
"react-addons-test-utils": "^15.4.2",
"regenerator-runtime": "^0.11.0" }
.babelrc {
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": [
"transform-decorators-legacy",
"transform-react-jsx-source",
"transform-class-properties",
["transform-runtime", {
"polyfill": false,
"regenerator": true
}
],
"env": {
"development": {
"presets": [
"react-hmre"
]
},
"test": {
"presets": [
"es2015",
"react",
"stage-0"
]
}
}
}
}
I can't get a way to fix this.
This is well-known issue of regenerator-transform babel plugin, which is commonly used for transpiling code with sagas.
See verbose explanation here: Unable to export generator functions
I'm trying to use decorators in my RN project:
Following is my package.json file:
{
"name": "testApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"autobind-decorator": "^1.3.3",
"babel-core": "^6.7.4",
"babel-loader": "^6.2.4",
"babel-plugin-transform-class-properties": "^6.6.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.6.0",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-native": "^1.5.6",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.6.1",
"react": "^0.14.8",
"react-native": "^0.22.2",
"webpack": "^1.12.14"
}
}
and this is my .babelrc:
{
"plugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties"
],
"presets": ["es2015", "react", "stage-0", "react-native"]
}
I'm getting error stating ReferenceError: Can't find variable: require
. I tried many post but couldn't get any solution. I created new RN Project using react-native init testApp
Got it fixed error was because of order of presets: I removed all other presets and changed presets to just "react-native" and everything's working now.