eslint failed to load plugin 'import' declared in '.eslintrc.js » eslint-config-airbnb; cannot find module 'typescript/package.json' - eslint

I'm trying to set up eslint for a basic React project (Javascript only, no Typescript). When linting my project with npx eslint ./, I get the following error:
ESLint: 8.31.0
Error: Failed to load plugin 'import' declared in '.eslintrc.js »
eslint-config-airbnb » /Users/me/project/node_modules/eslint-config-airbnb-base/index.js »
/Users/me/project/node_modules/eslint-config-airbnb-base/rules/imports.js':
Cannot find module 'typescript/package.json'
I'm not really sure what's going on here, as my project doesn't use any Typescript. Some additional information that might help:
I followed this tutorial to set up eslint, prettier, and editorconfig for working in a team environment.
Here is my .eslintrc.js file:
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": [
"plugin:react/recommended",
"airbnb",
'prettier'
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}
}
I do have a .eslintignore file in the root directory of my project that contains node_modules.
Here is my package.json:
{
"name": "project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#fontsource/roboto": "^4.5.8",
"#mui/material": "^5.11.4",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.2.2",
"firebase": "^9.15.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-firebaseui": "^6.0.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "npx eslint ./",
"format": "npx prettier --write ."
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.31.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.27.0",
"eslint-plugin-jsx-a11y": "^6.7.0",
"eslint-plugin-react": "^7.32.0",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "2.8.2"
}
}
Finally here is my file tree:
.vscode
node_modules
public
src
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.prettierignore
.prettierrc.json
package-lock.json
package.json
README.md
I found a somewhat questionable solution by installing typescript related packages for eslint:
npm install typescript #typescript-eslint/parser #typescript-eslint/eslint-plugin --save-dev
After installing these packages, npx eslint ./ works fine, but I don't think I should need to install typescript-related plugins/parsers for eslint when my project doesn't use typescript and I set eslint to ignore the node_modules folder. I'm also unsure how installing these packages might affect the linting behavior (I didn't make any changes to .eslintrc.js or any other config files after installing those packages).
Does anyone know of a better solution that doesn't involve installing these additional packages? Or are these packages actually necessary despite my project not using Typescript?
Thank you in advance for the help!

Related

publish:npm - How can I set react npm components location on each built

I am new to creating the npm package.
I have created my first react npm package using the following blog - https://www.codementor.io/#peterodekwo/create-a-simple-react-npm-package-in-simple-steps-using-cra-w966okagi
and it was published successfully and work fine in react as expected.
So what's the problem.
When I install my npm package and implement it. I have to use the following code to import.
import Card from 'owaiz-test/dist/Card';
import Button from 'owaiz-test/dist/Button';
https://prnt.sc/1cpkvsy
The problem with the dist folder. I don't want to use the dist folder to be written.
I want something like
import Card from 'owaiz-test/Card';
import Button from 'owaiz-test/Button';
I know it's compiling the code from my package.json file mentioned below.
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"
But, How can I make changes in the code above or any other solution?
Update:
ADD Package.json
{
"name": "owaiz-test",
"version": "0.1.1",
"private": false,
"babel": {
"presets": [
"#babel/preset-react"
]
},
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/components -d dist --copy-files"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/preset-react": "^7.0.0"
}
}
Update 2
{
"name": "owaiz-test",
"version": "0.1.1",
"private": false,
"main": "dist/index.cjs.js",
"browser": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
"babel": {
"presets": [
"#babel/preset-react"
]
},
"peerDependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"publish:npm": "rm -rf dist && mkdir dist && babel ./src/index.js -d dist --copy-files"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/cli": "^7.5.5",
"#babel/preset-react": "^7.0.0"
}
}
You need to edit package.json
Create index.js file as a main entry for your package
import Card from './components/Card'
import Button from './components/Button'
export { Card, Button }
Use index.js during bundling:
"publish:npm": "...babel ./src/index.js ..."
Set main and browser fields(module for esm packages can skip, types for TypeScript definitions):
"main": "dist/index.cjs.js",
"browser": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"types": "dist/index.d.ts",
Docs
Also need to add react and react-dom to peerDependencies not to dependencies, so it will not be bundled with your code What is the correct way of adding a dependency to react in your package.json for a react component
UPD
Article from question is total crap, those are better:
https://blog.logrocket.com/the-complete-guide-to-publishing-a-react-package-to-npm/
https://dev.to/jimjunior/how-to-create-an-npm-library-from-react-components-2m2
But still can be some caveats.

Fail on yarn test with Jest : Cannot find module 'react' from 'Form.js'

I'm starting my first node/react project and I try to write my first tests using Jest.
When I run them using yarn test, it fails with the following message :
Cannot find module 'react' from 'Form.js'
However, Jest was able to find:
'./App.css'
'./App.js'
'./App.test.js'
You might want to include a file extension in your import, or update your
'moduleFileExtensions', which is currently ['web.js', 'js', 'web.ts', 'ts',
'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'].
I created my project using create-react-app and here is my package.json :
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"shards-react": "^1.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
I don't understand what the Form.js file is, as I didn't create such a File. I guess there is something wrong with my dependencies in package.json but I can't find an explanation for now.

Moderate severity vulnerabilities due to minimist

I'm running into a huge number of vulnerabilities. There are 583 vulnerabilities all associated with the package minimist
My package.json is as such:
{
"name": "weather-wizard",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000",
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"chart.js": "^2.9.3",
"eslint-plugin-flowtype": "^3.13.0",
"minimist": "^1.2.5",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"react": "^16.13.0",
"react-animated-weather": "^4.0.0",
"react-chartjs-2": "^2.9.0",
"react-dom": "^16.13.0",
"react-places-autocomplete": "^7.2.1",
"react-scripts": "3.4.0",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
What is the best way to manage these vulnerabilities?
When you see some issue like this, you need to first check on the github repository if they are already notified and create an issue so they can fix it soon.
They are taking care of this in the following issue: https://github.com/facebook/create-react-app/issues/8672
Solution:
For npm users:
npm install minimist --save-dev
eg: (minimist version: 1.2.5)
Add Resolution key adjacent to dependency key into package.json file
{
"resolutions": {
"minimist": "^1.2.5"
}
}
Add below line inside script key into package.json
example:
"scripts": {
"preinstall": "npx npm-force-resolutions"
}
Remove node_modules, and then run command: npm install.
While npm audit fix fixes dependency

My package gives "ModuleNotFoundError" when importing it on CodeSandBox

I published an npm package today and wanted to try it on CodeSandBox. It works if I npm install package-name in a local machine but importing same dependency on a CodeSandBox projects gives this error:
package.json
{
"name": "package-name",
"version": "1.0.20",
"private": false,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"keywords": [
"react"
],
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"repository": {
"type": "git",
},
"devDependencies": {
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4"
}
}
My compiled files have these kind of imports at top:
import _defineProperty from "#babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "#babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "#babel/runtime/helpers/esm/slicedToArray";
I followed this tutorial. After I run npm run build, a dist folder creates in the main directory. Then I npm publish. I did try npm install package-name on a local machine and it works but as I said it does not work on CodeSandBox.
Try adding your devDependencies to dependencies. devDependencies are not exported in build and that is why maybe your babel/runtime is failing.
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.4.1",
"#testing-library/user-event": "^7.2.1",
"#babel/cli": "^7.8.4",
"#babel/core": "^7.8.4",
"#babel/runtime": "^7.8.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.4.0"
}
and then build and try.
Another way without needing to merge your devDependencies and dependencies is to set up your Codesandbox project in a Container Environment. Note that you have to set this before creation — as of writing you cannot switch between Container and Client environments after the fact.
In addition, if you are going to be importing a project into Codesandbox from Github, it implicitly sets the environment to Client. To workaround this, create a sandbox.config.json file at the root of your project with the following contents:
{
"template": "node"
}
Make sure this file exists before import. Creating it after the fact will not work.

Running electron-build on my create-react-app app comes up with an error?

Hi I am developing an Electron-react app using create-react-app boilerplate and electron-builder to package and deploy it.
However, on running electron-builder using yarn in the CL it shows this error.
• loaded configuration file=package.json ("build" field)
• loaded parent configuration preset=react-cra
• writing effective config file=build\builder-effective-config.yaml
• packaging platform=win32 arch=x64 electron=8.0.1 appOutDir=build\win-unpacked
• default Electron icon is used reason=application icon is not set
• building target=nsis file=build\electron-react-typescript-app Setup 0.1.0.exe archs=x64 oneClick=true perMachine=false
⨯ write EPIPE stackTrace=
Error: write EPIPE
at afterWriteDispatched (internal/stream_base_commons.js:150:25)
at writeGeneric (internal/stream_base_commons.js:141:3)
at Socket._writeGeneric (net.js:771:11)
at Socket._write (net.js:783:8)
at doWrite (_stream_writable.js:431:12)
at writeOrBuffer (_stream_writable.js:415:5)
at Socket.Writable.write (_stream_writable.js:305:11)
at Socket.Writable.end (_stream_writable.js:594:10)
at Socket.end (net.js:575:31)
at C:\Users\andrew.choi\Documents\electron-react-app\.yarn\cache\builder-util-npm-22.3.3-d8bf259145-2.zip\node_modules\builder-util\src\util.ts:193:26
at new Promise (<anonymous>)
at spawnAndWrite (C:\Users\username\Documents\electron-react-app\.yarn\cache\builder-util-npm-22.3.3-d8bf259145-2.zip\node_modules\builder-util\src\util.ts:176:10)
at NsisTarget.executeMakensis (C:\Users\username\Documents\electron-react-app\.yarn\cache\app-builder-lib-npm-22.3.3-dc71ab7fc0-2.zip\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:552:11)
at NsisTarget.computeScriptAndSignUninstaller (C:\Users\andrew.choi\Documents\electron-react-app\.yarn\cache\app-builder-lib-npm-22.3.3-dc71ab7fc0-2.zip\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:340:5)
at NsisTarget.buildInstaller (C:\Users\username\Documents\electron-react-app\.yarn\cache\app-builder-lib-npm-22.3.3-dc71ab7fc0-2.zip\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:278:103)
at NsisTarget.finishBuild (C:\Users\username\Documents\electron-react-app\.yarn\cache\app-builder-lib-npm-22.3.3-dc71ab7fc0-2.zip\node_modules\app-builder-lib\src\targets\nsis\NsisTarget.ts:110:7)
command not found: electron-builder
Here is my package.json file.
I am using windows 10 if that matters.
And running "yarn dist" in the command prompt opened with administrators permissions
{
"name": "electron-react-typescript-app",
"version": "0.1.0",
"private": true,
"main": "src/start.js",
"build": {
"appId": "123456789",
"directories": {
"buildResources": "assets",
"output": "build"
},
"win": {
"target": "nsis"
}
},
"dependencies": {
"#material-ui/core": "^4.8.0",
"#material-ui/icons": "^4.5.1",
"#reduxjs/toolkit": "^1.2.3",
"axios": "^0.19.2",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"electron-is-dev": "^1.1.0",
"electron-updater": "^4.2.0",
"express": "^4.17.1",
"immer": "^5.3.2",
"material-table": "^1.55.0",
"mssql": "^6.0.1",
"react": "^16.10.2",
"react-desktop": "^0.3.9",
"react-dom": "^16.10.2",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"tailwindcss": "^1.2.0"
},
"scripts": {
"electron": "cross-env NODE_ENV=dev nodemon --exec \"\"electron .\"\"",
"electron-build": "electron-builder",
"start": "cross-env BROWSER=none nodemon npm run react-start",
"react-start": "react-scripts start",
"build": "react-scripts build",
"react-test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"server": "node ./server/server --exec nodemon | pino-colada",
"dev": "run-p server react-start",
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"proxy": "http://localhost:3500",
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"cross-env": "^6.0.3",
"devtron": "^1.4.0",
"electron": "8.0.1",
"electron-builder": "^22.3.2",
"electron-devtools-installer": "^2.2.4",
"electron-redux-devtools": "^0.3.4",
"electron-reload": "^1.5.0",
"express-pino-logger": "^4.0.0",
"node-env-run": "^3.0.2",
"nodemon": "^1.19.3",
"npm-run-all": "^4.1.5",
"pino-colada": "^1.5.1",
"redux-devtools-extension": "^2.13.8"
},
"description": "An Electron React App",
"repository": {
"type": "git",
"url": "git+https://github.com/Icecubelegacy/Electron-react-app.git"
},
"keywords": [
"electron"
],
"author": "Andrew Choi",
"license": "ISC",
"bugs": {
"url": "https://github.com/Icecubelegacy/Electron-react-app/issues"
},
"homepage": "./",
"postinstall": "electron-builder intall-app-deps"
}
command not found: electron-builder
This likely means that your node_modules folder doesn't have electron-builder under node_modules/.bin.
You can try running the command
yarn
which should get you electron-builder installed locally since it's listed under your devDependencies in your package.json file.
This issue has now been resolved.
I started a new project, specified the version of electron-builder as 22.3.5, ran yarn build and then ran yarn electron-pack. Then I went to my .dist folder and installed the setup exe and then was able to open the .exe application file successfully.

Resources