Related
I am using babel, eslint, and prettier for Node Rest API. To use absolute path I am using a package called babel-plugin-module-resolver but when I do use ES6 imports, I noticed that there is no auto suggestions. However, when I use relative path, everything seems to work perfectly fine.
Relative Path (Desired behavior with ES6 import and Absolute path)
Absoulte Path (No suggestions)
Here are my configuration files
1. package.json
{
"name": "prod-js-starter",
"version": "1.0.0",
"description": "Production level starter for node.js based express RESTFull APIs",
"main": "src/server.js",
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"build": "npm run clean && babel ./src --out-dir build --copy-files",
"start": "NODE_ENV=production node build/server.js",
"dev": "nodemon --exec babel-node src/server.js",
"clean": "rm -rf build"
},
"dependencies": {
"dotenv": "^16.0.0",
"express": "^4.17.3",
"module-alias": "^2.2.2"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.9",
"#babel/node": "^7.16.8",
"#babel/preset-env": "^7.16.11",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.13.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.0.0",
"nodemon": "^2.0.15",
"prettier": "^2.6.2"
}
}
2. eslint.json
{
"env": {
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
// "func-names": "off",
"prettier/prettier": "error",
"no-unused-vars": "warn",
"no-console": "warn"
},
"plugins": ["prettier"],
"settings": {
"import/resolver": {
"babel-module": {}
}
}
}
3. .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"#src": "./src"
}
}
]
]
}
Please help me to get those suggestions working like before. Its a simple feature but quite efficient.
I'm using react app with Parcel bundler & TypeScript.
I'm trying to use ESLint but I get this error:
ESLint: Initialization error (ESLint). Module.createRequire is not a function.
versions:
IDE: Webstorm
Node Version: 16.6.2
NPM Version: 7.20.3
I don't have ESLint installed globally in my machine
This is my setup:
package.json:
{
"name": "app-boilerplate",
"version": "1.0.0",
"description": "",
"source": "public/index.html",
"scripts": {
"start": "parcel --port=3000 --open --lazy",
"build": "parcel build",
"lint": "eslint . --ext .tsx,.ts",
"lint:fix": "eslint . --ext .tsx,.ts --fix",
"test": "jest --coverage --passWithNoTests",
"test:watch": "jest --watchAll --coverage",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.7",
"#parcel/transformer-svg-react": "^2.2.0",
"#storybook/addon-actions": "^6.4.13",
"#storybook/addon-essentials": "^6.4.13",
"#storybook/addon-links": "^6.4.13",
"#storybook/react": "^6.4.13",
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^12.1.2",
"#types/jest": "^27.4.0",
"#typescript-eslint/eslint-plugin": "^5.9.1",
"#typescript-eslint/parser": "^5.9.1",
"babel-loader": "^8.2.3",
"eslint": "^8.7.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.5.5",
"husky": "^7.0.4",
"jest": "^27.4.7",
"parcel": "^2.2.0",
"prettier": "^2.5.1",
"ts-jest": "^27.1.3",
"typescript": "^4.5.4"
},
"dependencies": {
"#types/node": "^17.0.8",
"#types/react": "^17.0.38",
"#types/react-dom": "^17.0.11",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"alias": {
"#hooks": "./src/hooks",
"#libs": "./src/libs"
}
}
.eslintrc.json:
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
"prettier",
"plugin:storybook/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json",
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint",
"jsx-a11y"
],
"rules": {
"import/extensions": [2, "never"],
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx", ".ts"] }],
"react/jsx-indent": [2, 2, {"checkAttributes": true, "indentLogicalExpressions": true}],
"react/react-in-jsx-scope": "off",
"no-console": "off"
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}
The actual error inside Webstorm
How can I solve it, please?
Thank you.
I had the same issue. Tried in Webstorm terminal following commands:
nvm current (I use nvm) and node -v. Both of these commands returned 16.14.0.
But the issue only went away when I changed default used version of node in Webstorm editor itself. You can do this by pressing CTRL + ALT + S. Then select Languages & Frameworks and after that Node.js. Value for Node interpreter: was there 10 and I switched it there to 16.14.0. If you do not have this version od nodejs installed on your machine, I suggest you use nvm (node version manager).
Simply updating your node version will resolve the issue. You can try Node 14 or 16 version.
Although you are saying using Node 16.6.2 but definitely it's not been used when you are running the script.
It is the problem of Node version, just update the Node to the correct version.
https://eslint.org/docs/latest/user-guide/migrating-to-8.0.0
enter image description here
In my case the issue happened because I had created the project on WSL Ubuntu, so the solution was to (so adding on to Lazar's answer, in a way) change WebStorm's Node interpreter to WSL. Click on the ... and then + to add the Node/NPM installed on your WSL distros in case it doesn't show in the drop down list of interpreters.
I am currently setting up a boilerplate with React, TypeScript, styled components, Webpack, etc., and I am getting an error when trying to run ESLint:
Error: Must use import to load ES Module
Here is a more verbose version of the error:
/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
0:0 error Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js
require() of ES modules is not supported.
require() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json
The error occurs in every single one of my .js and .ts/ .tsx files where I only use import or the file doesn't even have an import at all. I understand what the error is saying, but I don't have any idea why it is being thrown when in fact I only use imports or even no imports at all in some files.
Here is my package.json file where I trigger the linter from using npm run lint:eslint:quiet:
{
"name": "my-react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.tsx",
"directories": {
"test": "test"
},
"engines": {
"node": ">=14.0.0"
},
"type": "module",
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack serve --config webpack.dev.js",
"lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
"lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
"lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
"lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
"lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"typecheck": "tsc --noEmit",
"precommit": "npm run lint"
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.{md,json}": [
"prettier --write",
"git add --force"
]
},
"husky": {
"hooks": {
"pre-commit": "npx lint-staged && npm run typecheck"
}
},
"resolutions": {
"styled-components": "^5"
},
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.4",
"#babel/plugin-proposal-class-properties": "^7.5.0",
"#babel/preset-env": "^7.5.4",
"#babel/preset-react": "^7.0.0",
"#types/history": "^4.7.6",
"#types/react": "^17.0.29",
"#types/react-dom": "^17.0.9",
"#types/react-router": "^5.1.17",
"#types/react-router-dom": "^5.1.5",
"#types/styled-components": "^5.1.15",
"#typescript-eslint/eslint-plugin": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.0-beta.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"dotenv-webpack": "^7.0.3",
"error-overlay-webpack-plugin": "^1.0.0",
"eslint": "^8.0.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-with-prettier": "^6.0.0",
"eslint-plugin-compat": "^3.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"husky": "^7.0.2",
"prettier": "^2.4.1",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.0",
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"ts-loader": "^9.2.6",
"tslint": "^6.1.3",
"typescript": "^4.4.4",
"url-loader": "^4.1.1",
"webpack": "^5.58.2",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.3.0"
},
"dependencies": {
"history": "^4.10.0",
"process": "^0.11.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.1"
}
}
Here is my .eslintrc file:
{
"extends": ["airbnb", "prettier"],
"parser": "babel-eslint",
"plugins": ["prettier", "#typescript-eslint"],
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"impliedStrict": true,
"classes": true
}
},
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"arrow-body-style": ["error", "as-needed"],
"class-methods-use-this": 0,
"react/jsx-filename-extension": 0,
"global-require": 0,
"react/destructuring-assignment": 0,
"import/named": 2,
"linebreak-style": 0,
"import/no-dynamic-require": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/prefer-default-export": 0,
"semi": [2, "always"],
"max-len": [
"error",
{
"code": 80,
"ignoreUrls": true,
"ignoreComments": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true
}
],
"new-cap": [
2,
{
"capIsNew": false,
"newIsCap": true
}
],
"no-param-reassign": 0,
"no-shadow": 0,
"no-tabs": 2,
"no-underscore-dangle": 0,
"react/forbid-prop-types": [
"error",
{
"forbid": ["any"]
}
],
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"react/jsx-no-bind": [
"error",
{
"ignoreRefs": true,
"allowArrowFunctions": true,
"allowBind": false
}
],
"react/no-unknown-property": [
2,
{
"ignore": ["itemscope", "itemtype", "itemprop"]
}
]
}
}
And I’m not sure if it is relevant, but here is also my tsconfig.eslint.json file:
{
"extends": "./tsconfig.json",
"include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
"exclude": ["node_modules/**", "build/**", "coverage/**"]
}
How can I fix this?
Googling the error does not present any useful forums or raised bugs. Most of them just state not to use require in your files which I am not.
I think the problem is that you are trying to use the deprecated babel-eslint parser, last updated a year ago, which looks like it doesn't support ES6 modules. Updating to the latest parser seems to work, at least for simple linting.
So, do this:
In package.json, update the line "babel-eslint": "^10.0.2", to "#babel/eslint-parser": "^7.5.4",. This works with the code above but it may be better to use the latest version, which at the time of writing is 7.16.3.
Run npm i from a terminal/command prompt in the folder
In .eslintrc, update the parser line "parser": "babel-eslint", to "parser": "#babel/eslint-parser",
In .eslintrc, add "requireConfigFile": false, to the parserOptions section (underneath "ecmaVersion": 8,) (I needed this or babel was looking for config files I don't have)
Run the command to lint a file
Then, for me with just your two configuration files, the error goes away and I get appropriate linting errors.
The problem can be easily resolved by changing the file extension of .eslintrc from js to json (exporting the .eslintrc object using ESM format in .eslintrc.js just doesn't work).
This can happen with quite a lot of lately released frameworks like Vue.js or Nuxt.js, mostly because of the usage of ESM modules (not fully or at all supported by older Node.js versions).
The fastest approach for this is to use something like nvm, after installing it, you could run:
nvm i 16 (v16 is the latest LTS as of time of writing)
nvm use 16
And you'll be running the project with a full ESM support.
You can double check that by running node -v.
For a React Native setup using the eslint-config-react-native-community package
I did what the accepted answer suggested to do, but I didn't have any "babel-eslint": "^10.0.2", line in my package.json file of the root folder.
Go to node_modules/#react-native-community/eslint-config
Edit package.json, change "babel-eslint": "^10.0.2", to "#babel/eslint-parser": "^7.18.2",
Edit file index.js, change "parser": "babel-eslint", to parser: '#babel/eslint-parser',
Go to the root folder of your project and npm i -D #babel/eslint-parser
Run the lint command
It worked for me this way.
I followed #rich-n advice from a comment above, and according to this:
go to .eslintrc.js and make sure you have the following settings:
module.exports = {
parser: "#babel/eslint-parser",
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
// your babel options
presets: ["#babel/preset-env"],
},
},
};
doing this removed all the "red" marks from vscode :)
If you did all above and still fails, reload your vscode.
I just delete node_modules, and re installed through npm install, and now it works.
"test": "react-scripts test --transformIgnorePatterns "node_modules/(?!axios)/""
use this worked for me.
In Visual Studio Code, remove the ESLint extension, and install it again.
"#babel/eslint-parser" depends on "#babel/core". So after "npm install #babel/eslint-parser -S", you should use npm i #babel/core -S.
I'm trying to create a npm package and
below is my package.json
{
"name": "********",
"version": "1.0.0",
"description": "*****************",
"keywords": [
"exit",
"intent"
],
"main": "dist/*********.js",
"module": "dist/********.es.js",
"umd:main": "dist/********.umd.js",
"files": [
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npm run prettier-eslint -- 'src/**/*.{js,json}'",
"build": "rollup -c",
"dev": "rollup -c -w",
"prettier-eslint": "prettier-eslint --write --no-semi --single-quote --no-bracket-spacing",
"changelog": "standard-version",
"size": "npx gzip-size-cli ./dist/exit-detect.js ",
"precommit": "lint-staged",
"prepush": "npm test",
"prepublish": "npm run build"
},
"lint-staged": {
"src/**/*.{js,json}": [
"npm run prettier-eslint"
]
},
"author": "Amaarshall Yaswankar",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-standard": "^5.0.0",
"husky": "^7.0.2",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"prettier-eslint-cli": "^5.0.1",
"rollup": "^2.58.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-watch": "^4.3.1",
"standard-version": "^9.3.1",
"uglify-es": "^3.3.9"
},
"homepage": "https://github.com/********/*********#readme"
}
I'm using using rollup to build my package and below is the config file rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-es'
import fs from 'fs'
const pkg = JSON.parse(fs.readFileSync('./package.json'))
export default {
name: '*********',
input: 'src/********.js',
output: [
{format: 'es', file: pkg.module},
{format: 'cjs', file: pkg.main},
{format: 'umd', file: pkg['umd:main']}
],
plugins: [
resolve(),
commonjs(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
[
'#babel/preset-env',
{
modules: false,
loose: true,
targets: {browsers: ['last 2 versions', '> 1%']}
}
],
'#babel/preset-react',
'babel-preset-stage-2'
],
plugins: ['external-helpers']
}),
uglify({}, minify)
]
}
Now that all the babel packages are updated, I have tried updating the things as per the new versions. But still I'm facing the below error when I run npm run build.
rollup v2.58.0
bundles src/exit-detect.js → dist/exit-detect.es.js, dist/exit-detect.js, dist/exit-detect.umd.js...
[!] (plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions.
Not sure why this is happening, need your help guys
Thanks in advance
Got a project using vue, webpack, babel, npm.
Could start it via npm run server, when trying to figure out how this command work, I saw vue-cli-service serve from package.json.
But, how does vue-cli-service start the program? I saw main.js which in turn render Vue.vue, both of which are under src/.
Didn't see anywhere config the entry file, so is main.js the default entry for vue-cli-service?
Code
package.json:
{
"name": "quizer-ui",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"element-ui": "^2.10.1",
"vue": "^2.6.10",
"vue-router": "^3.0.7"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.9.0",
"#vue/cli-plugin-eslint": "^3.9.0",
"#vue/cli-service": "^3.9.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.6.10"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions"
]
}
vue-cli-service uses Webpack with a default configuration of
entry: {
app: [
'./src/main.js'
]
}
This can be altered in vue.config.js if you wish. See https://cli.vuejs.org/guide/webpack.html#simple-configuration
Webpack will build a JS bundle, starting at the entry then inject that into the index.html file and that's how your app starts.
You can see the entire configuration for your app using
vue inspect
See https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config
It is hardcoded in #vue.
Relative Path: node_modules/#vue/cli-service/lib/config/base.js
Line 28-37:
webpackConfig
.mode('development')
.context(api.service.context)
.entry('app')
.add('./src/main.js')
.end()
.output
.path(api.resolve(options.outputDir))
.filename(isLegacyBundle ? '[name]-legacy.js' : '[name].js')
.publicPath(options.publicPath)