We Keep Coding

How to solve Eslint - Module.createRequire is not a function error?

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.

How to make rollup.js build a react library on installing (yarn add ssh://git#my-repo-url)

I've created a private react library (git repo) with rollup.js, and it's installing correctly with the command yarn add ssh://git#my-repo-url but it's not building (creating build/dist in node_modules/library-folder) on installing. How can I fix it? What's the 'magic' behind the alternative create-react-library. Is npm behind this?
Here is my rollup.con.js:
import commonjs from "#rollup/plugin-commonjs";
import resolve from "#rollup/plugin-node-resolve";
import peerDepsExternal from "rollup-plugin-peer-deps-external";
import typescript from "#rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import packageJson from "./package.json";
export default {
input: "./src/components/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true
},
{
file: packageJson.module,
format: "esm",
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript(),
postcss()
]
};
and my package.json:
{
"name": "my-ui-lib",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"#types/jest": "^26.0.15",
"#types/node": "^12.0.0",
"#types/react": "^17.0.0",
"#types/react-dom": "^17.0.0",
"react-scripts": "4.0.3",
"styled-components": "^5.3.0",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1"
},
"main": "./build/index.js",
"module": "./build/index.es.js",
"scripts": {
"test": "react-scripts test",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"build": "rollup -c",
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
{
"files": [
"**/*.stories.*"
],
"rules": {
"import/no-anonymous-default-export": "off"
}
}
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#rollup/plugin-commonjs": "^19.0.0",
"#rollup/plugin-node-resolve": "^13.0.0",
"#rollup/plugin-typescript": "^8.2.1",
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/node-logger": "^6.2.9",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.2.9",
"postcss": "^8.3.2",
"rollup": "^2.51.2",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
}

You don't need any specialty packages/boilerplate code to install from a local/private github repo. Just follow these simple steps:
1.) Make sure you're using the correct github repo:
git+ssh://git#github.com/<github_username>/<github_repo>
<github_username> should be your github username
<github_repo> should be the name of your github repository
2.) Prep your package.json with the necessary fields, but most importantly add a prepare or prepublish script to your scripts in your package.json:
{
"name": "#example/my-package",
"version": "0.1.0",
"description": "My package description.",
// 'main' and 'module' are useful for bundlers (like webpack) to know which version to default import
"main": "index.js",
"module": "esm/index.mjs",
// 'sideEffects' is optional, let's bundlers (like webpack) know that it's tree-shakeable
"sideEffects": false,
"homepage": "https://github.com/<github_username>/<github_repo>#readme",
// 'files' is required to let your package manager know what should be installed in node_modules
"files": [
"index.js",
"index.d.ts",
"decrypt/index.js",
"decrypt/index.d.ts",
"encrypt/index.js",
"encrypt/index.d.ts",
"esm"
],
// 'types' is optional, but useful for typescript typings
"types": "./index.d.ts",
// 'exports' is optional, but useful for submodule imports
"exports": {
".": "./index.js",
"./decrypt": "./decrypt/index.js",
"./encrypt": "./encrypt/index.js",
"./esm": "./esm/index.mjs",
"./esm/decrypt": "./esm/decrypt/index.mjs",
"./esm/encrypt": "./esm/encrypt/index.mjs"
},
// 'scripts' will be leveraged by adding a 'prepare' or `prepublish` script to let the package manager know what to run during dependency installation
"scripts": {
"build": tsc --p ./ts/tsconfig.cjs.json && ts-node ./utils/compress.ts",
"build:esm": "rollup -c",
"lint": "eslint ./ --ext .ts,.js && tsd",
"prepare": "npm run build && npm run build:esm",
"test": "jest --config ./jest.json --coverage",
},
// 'repository' is optional, but useful to tell developers/remote websites (like npmjs) where your code resides
"repository": {
"type": "git",
"url": "git#github.<github_username>/<github_repo>.git"
},
"author": "Firstname Lastname",
"license": "MIT",
"bugs": {
"url": "https://github.com/<github_username>/<github_repo>/issues"
},
// 'engines' is highly recommended as it lets the package manager know which versions of node will be able to run the package without issues
"engines": {
"node": ">=12"
},
"devDependencies": { ... },
}
3.) Install the package using npm or yarn:
# with npm
npm install git+ssh://git#github.com/<github_username>/<github_repo>
# or with yarn
yarn add git+ssh://git#github.com/<github_username>/<github_repo>
4.) Import the package by the name specified in the package.json:
const example = require("#example/my-package");
// import example from "#example/my-package";
...etc
Example package repo:
https://github.com/mattcarlotta/example-env
Example using package repo:
https://github.com/mattcarlotta/example-using-repo
Result:

npm package babel error in my own package

I have created my own npm package but while using in a test application am getting the following error: Add #babel/plugin-transform-react-jsx to the 'plugins' section of your Babel config to enable transformation.
Note: I've written my component in JSX
package.json
{
"name": "my-test-package",
"version": "1.4.3",
"description": "Rich form fieds with simple and complex validation",
"main": "index.js",
"homepage": "https://github.com",
"url": "https://github.com/",
"license": "MIT",
"bugs": {
"url": "https://github.com/"
},
"scripts": {
"start": "webpack-dev-server --mode development --env --open --hot --port",
"build": "./node_modules/.bin/webpack --mode production"
},
"author": "Harish",
"contributors": [
"Harish"
],
"peerDependencies": {
"react": "^16.6.1",
"react-dom": "^16.6.3",
"prop-types": "^15.5.4"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}
}
.babelrc file:
{
"presets": ["#babel/preset-env","#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Thanks in advance.

You need to add that to your .babelrc file, not package.json

regeneratorRuntime is not defined when using async/await

I am getting a
"regeneratorRuntime is not defined"
when trying to use async/await in a project.
My babelrc file is this currently:
{
"presets": ["env", "react"],
"plugins": [
"transform-runtime",
"transform-object-rest-spread"
]
}
and my package.json is:
{
"name": "****",
"version": "1.0.0",
"description": "****",
"main": "index.js",
"author": "****",
"license": "UNLICENSED",
"private": true,
"scripts": {
"start": "yarn build && nodemon server/index.js --ignore dist/ --ignore public/",
"watch": "parcel watch public/index.html --public-url /",
"build": "parcel build public/index.html --public-url /",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.5.5",
"axios": "^0.19.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"super-reset-css": "^1.0.5"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jest": "^24.8.0",
"nodemon": "^1.14.11",
"parcel-bundler": "^1.5.1",
"sass": "^1.22.9"
}
}
I'm sort of new to configuring babel so not sure what to do here.

I fixed a similar problem using the following post
Try the following in .babelrc:
{
"presets": ["#babel/preset-env"],
"plugins": [
"#babel/plugin-transform-runtime"
],
...
with the following dev dependencies:
#babel/plugin-transform-runtime #babel/runtime

I think it is because you are using #babel/runtime.
My set up is #babel/runtime, #babel/core, #babel/plugin-transform-runtime and in the .bablerc set
"plugins": ["#babel/transform-runtime"]
I hope this helps.

Which is the entry file used by vue-cli-service?

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)