I have a Chrome Extension built with Parcel and React, but I'm not getting warnings (e.g. missing useEffect dependencies) when I inspect the popup. How do I get these warnings?
Missing useEffect dependencies warnings are provided by eslint through this plugin. Parcel won't run eslint for you unless you set it up through the #parcel/validator-eslint plugin. I provided instructions on how to do that in this answer.
Another option is to use eslint-watch (npm) from the command line separately from parcel, so you'd have two separate scripts in your package.json that might look like this:
{
"scripts": {
"start": "parcel src/index.html"
"lint": "esw --watch src/**/*.js"
}
}
To get react hooks warnings, you'll need to use eslint-plugin-react-hooks by first installing it (e.g. yarn add eslint-plugin-react-hooks --dev), and then adding this to your .eslintrc.json:
{
"extends": [
// ...
"plugin:react-hooks/recommended"
]
}
Related
Create-react-app allows you to extend the ESLint config that comes with create-react-app:
https://create-react-app.dev/docs/setting-up-your-editor#experimental-extending-the-eslint-config
However when I try to do this in my own project i just get this error
(Image of error)
Error
Error: Cannot find module 'eslint-config-shared-config'
Command run
eslint --ignore-path .gitignore --ext .js,.ts,.tsx .
.eslintrc
{
"extends": ["react-app", "shared-config"],
"rules": {
"additional-rule": "warn"
},
"overrides": [
{
"files": ["**/*.ts?(x)"],
"rules": {
"additional-typescript-only-rule": "warn"
}
}
]
}
A safe way to setup a base ESLint config file to build upon is by following the ESLint usage guide
$ npx eslint --init
# or
$ yarn run eslint --init
Like #jonrsharpe said, shared-config is just an example that cannot be used literally, the docs was trying to explain that you could use shared configurations.
For example, if you add an ESLint plugin with a shared-config rule set, then you could use that as indicated by the example.
Difference between plugins and extends in ESLint
EXTEND_ESLINT flag was removed in react-scripts v4
I currently have the following problem, I want to use a local react package (my-react-package) as a dependency in another react app (my-react-app), both are written in typescript.
├── my-react-app
│ └── package.json
│ └── src
└── my-react-package
└── package.json
└── src
I am importing my-react-package via "my-react-package": "file:../my-react-package", in my-react-app/package.json .
When using the dist build output of my-react-package it works fine, but each time I make a change in I need to build it again, which is very time-consuming for development.
That is why I have tried to use the react code in my-react-package/src directly. But when changing my-react-package/package.json from "main": "dist/index.js", to "main": "src/index.ts", importing it leads to the following error in my-react-app:
./node_modules/my-react-package/src/hooks/state/session.ts 34:31
Module parse failed: Unexpected token (34:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { useState, Dispatch, SetStateAction } from 'react'
|
> export function useSessionState<_, S>(key: string, initialState: S): [S, Dispatch<SetStateAction<S>>] {
| try {
| const storedState = sessionStorage.getItem(key)
I assume this error is related to how webpack handles typescript dependencies. As I am using create-react-app, so I want to avoid messing with the webpack.config.js file.
I also want to avoid having my-react-package as a folder in my-react-app/src as I am planning to import my-react-package from multiple other react apps in the future.
Is there a way, my-react-package can remain as its own package while I get hot-reloading to work when importing it locally?
If you really don't want to rebuild every time, you can directly access the files like so:
import { thing } from "../my-react-package/src/thing"
However, what you probably want is to automatically recompile every time you make a change.
Your question didn't specify whether my-react-package uses webpack, so if it doesn't,
you can watch the files being saved and automatically recompile via:
tsc -w
If you are using just raw webpack for your my-react-package, you can edit your webpack.config.js like so:
module.exports = {
//...
watch: true
};
This will tell webpack to automatically rebuild.
Alternatively, if you used create-react-app for my-react-package, you can install npm-watch:
npm i npm-watch
And then edit your package.json:
{
// ...
"devDependencies": {
"npm-watch": "^0.1.8",
"react-scripts": "0.9.5",
},
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"watch": "npm-watch"
},
"watch": {
"build": "src/"
}
}
Hope this helps.
The problem is that TypeScript will not try to parse or compile anything in your node_modules, it will assume all those dependencies are ready to be consumed. In order to be able to consume a TypeScript module you need to explicitly tell TypeScript to compile it. This though will require you to change your webpack.config.js. The steps to achieve this are outlined here.
I would discourage you from taking this road though - I would rather suggest looking into a monorepo setup (using yarn or lerna). In such setup you no longer need to set the dependency as file:..., which in turn allows you to:
Open a terminal and start a build/watch task in your my-react-package
Open another terminal and start a build/watch task in your my-react-app
Now The changes that you make to your my-react-package will be picked up by the watch task in your my-react-app
I would like to output the results of my jest testing to a file format like JUnit without ejecting from react-scripts.
By using the --json command I can output it to JSON but I was hoping to get a format that Jenkins can process by default.
I cant seem to find if this is supported and I don't want to eject from Create React App, is there another way?
You shouldn't need to do anything fancy. Just install jest-junit and then run with the additional reporters flag:
yarn test --reporters=jest-junit
You can also add it to the jest settings of package.json. Probably something like this:
{
"name": "your-package",
"jest": {
"coverageReporters": ["jest-junit"]
}
}
I was able to do this with npm and the jest-teamcity reporter by modifying the package.json file.
{
...
"scripts": {
...
"test": "cross-env CI=true react-scripts test --env=jsdom --reporters=jest-teamcity",
...
},
...
}
I want to setup a command on my package.json that can do the TS files linting on my react App (using CRA that provides the app with react-scripts 3.1.2).
I saw that tslint is getting deprecated and that's why the react community is moving to ESlint.
There are some clues on the package.json file, like:
"eslintConfig": {
"extends": "react-app"
}
So my idea is that when I run the eslint, it can take that configuration and use all the CRA setup.
I tried :
"lint" : "eslint --ext=jsx,ts,tsx src"
But no luck, since I put some errors on the code and it still do not show me any information.
Any clues?
So I found a good approach. My idea was to keep everything working with the CRA standards and reuse everything (not sure why nobody adds this on the CRA, probably I will add a PR on the future to check)
This fixed the thing, reusing all the dependencies that CRA uses:
On package.json (standard for CRA)
"eslintConfig": {
"extends": [
"react-app",
"plugin:react/recommended",
"plugin:#typescript-eslint/recommended"
]
}
And then you can add a lint script:
"lint" : "eslint ./src/**/*.{tsx,ts}",
I hope that this will help someone :-)
Also, if someone knows more about the good practice on this, it will be very appreciated!
PD: .eslintignore is also working fine
I'm installing stylelint-config-styled-components on a react project.
When I execute npm run lint:css (or use the stylelint command directly through the CLI) I don't get any results. I have intentionally put in extra spaces and duplicate style declarations, so there should definitely be some feedback from stylelint that I've broken rules. However, I'm getting nothing, not even an error message. Any ideas?
I have installed the following packages:
stylelint 9.1.3
stylelint-config-recommended 2.1.0
stylelint-config-styled-components 0.1.1
stylelint-processor-styled-components 1.3.1
I am using the following script in package.json:
"scripts": {
//other scripts
"lint:css": "stylelint './src/**/*.js'"
}
The contents of my .stylelintrc:
{
"processors": ["stylelint-processor-styled-components"],
"extends": [
"stylelint-config-recommended",
"stylelint-config-styled-components"
]
}
My project's file structure (I have tried running the command directly on files with the same result, so I don't think it's an issue with it not being able to find the .js files)
-root
-.stylelintrc
-src
-Components
-Directory
-ThingIWantLinted.js
-AnotherDirectory
-AnotherThingTolint.js
Also got this issue. After upgraded to stylelint 9.4.0 now lint result show as expect.
Reference issue. https://github.com/stylelint/stylelint/pull/3261
Except (')
"scripts": {
//other scripts
"lint:css": "stylelint ./src/**/*.js"
}