While using create-react-app (with no customizations), and invoking npm start, it appears that linting occurs on individual files as they are saved, and any error or warning output is shown:
I'm trying to reverse-engineer how this is working, but am stuck.
I'm pretty sure it has something to do with husky and/or lint-staged but I haven't been able to replicate this behavior in my (non-sharable) playpen.
I understand how to setup and configure eslint (and I can see errors/warnings when invoking eslint directly), and I've been able to run linting around my Git actions (i.e., pre-commit) using husky and lint-staged, so I feel that I'm close to solving this puzzle, but I still don't get any of this type of output when I invoke webpack-dev-server.
What tooling is used to get eslint output to appear during the create-react-app npm start command?
This is the feature of eslint-loader which is added to the webpack configuration in create-react-app.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
// #remove-on-eject-begin
ignore: isExtendingEslintConfig,
baseConfig: isExtendingEslintConfig
? undefined
: {
extends: [require.resolve('eslint-config-react-app')],
},
useEslintrc: isExtendingEslintConfig,
// #remove-on-eject-end
},
loader: require.resolve('eslint-loader'),
}],
include: paths.appSrc
}
Source
For Angular and react project with npm module, you can use "npm run lint -- --fix" that will solve the all the possible lint errors and then you check with ng lint command post the above fix command runs
Related
I need to build shareable React component which could be used across apps.
For this, I was/am following the below article
https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The folder structure looks the same as below
rollup.config.js
import resolve from "#rollup/plugin-node-resolve";
import commonjs from "#rollup/plugin-commonjs";
import typescript from "#rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" })],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
},
];
npm script
"rollup": "rollup -c"
However when I run npm run rollup this throws the below error
[!] Error: Could not resolve entry module (dist/esm/types/index.d.ts).
Error: Could not resolve entry module (dist/esm/types/index.d.ts)
Please suggest. Thanks!
I also ran into the same problem you are experiencing when working with rollup. After spending some while digging for the solution, I finally got to solve this problem.
My Configuration looks exactly the same except the npm packages version (even tried with the same versions)
The exception you have stated is actually the problem. The problem lies in package versioning. The package #rollup/plugin-typescript versions later than 8.3.3 are not generating nor storing the declaration files in the types folder expected to be at the path: dist/cjs/ and dist/esm/.
The latest version at this point in time is 8.5.0 which still breaks. Hopefully it is fixed in near future.
Steps to fix your error
Make sure your tsconfig.json file has "declarationDir": "types" to direct the bundler's typescript plugin to create and store declaration files in the types folder when you run npm run rollup
Uninstall the existing #rollup/plugin-typescript package version by running npm un #rollup/plugin-typescript --save-dev
Install #rollup/plugin-typescript with the command npm i #rollup/plugin-typescript#8.3.3 --save-dev. As you see, we are picking a specific version.
If you still encounter problems:
Manually update the package.json file like: "#rollup/plugin-typescript": "8.3.3". Note that I have removed the caret(^) symbol to tie the package to version 8.3.3.
Delete the node_modules folder. You could use the command rm -rf node_modules.
Delete package-lock.json.
Run npm i to install the packages again with versions specified in package.json
Here's an working answer for people coming from 2023 that doesn't lock you to an outdated version of #rollup/plugin-typescript:
Preconditions: Make sure that you get rid off your package-lock.json and your node_modules directory so that you can start from a clean slate and install your project again.
run npm install tslib --save-dev
add "type": "module" to package.json
in tsconfig.json, add "rootDir": "src"
in rollup.config.js, change plugins: [dts()] to plugins: [dts.default()]
back in package.json, add --bundleConfigAsCjs as a parameter to the rollup command in scripts
After that you should be able to continue with the tutorial and be able to create a new build via npm run rollup.
I fixed the error of 'Could not resolve entry module (dist/esm/index.d.ts)'.
I tried removing types, downgrading react to match the version in the tutorial but none worked.
I found this comment on the tutorial which was helpful: https://dev.to/nasheomirro/comment/239nj
I got rid of main and common js set up in both rollup config and package json.
i changed the packagejson variable to import packageJson from "./package.json" assert { type: "json" };
added types back into the input in the rollup config
Set "#rollup/plugin-typescript" to be version "8.3.3" as mentioned above.
I now have a Dist folder with an ESM folder and didn't get any errors.
Problem
While using Storybook, I am running npm run storybook and getting the error below.
ModuleBuildError: Module build failed (from ./node_modules/style-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
Background/Context
My goal is to get Storybook to be able to work with sass.
The setup is a simple one: I have scss files that get imported by the component file.
In looking up ways to accomplish this, I came across an addon to be able to do so, see this. Essentially, you can run npm i --save-dev #storybook/preset-scss style-loader css-loader sass-loader.
In doing so, I encountered my first error. It was the same error, but for sass-loader. This Stack Overflow thread helped me fix that error.
So, I guess in summary, I've tried:
Following along with the docs (linked above)
Following along with the Stack Overflow thread (linked above)
Relevant Dev Dependencies
"#storybook/preset-scss": "^1.0.3",
"css-loader": "^6.2.0",
"sass-loader": "^10.1.1",
"style-loader": "^3.2.1"
Thanks ahead of time!
Solution
After taking a step back, I realized that I could try out what I did to fix the sass-loader issue: downgrading major versions.
Steps
Downgraded style-loader 1 major version to 2.0.0: npm i style-loader#2.0.0
Then, as luck would have it, I ran into the same issue with css-loader
Downgraded css-loader 1 major version to 5.2.7: npm i css-loader#5.2.7
Summary
By downgrading all of the loaders one major version, I was able to get it to work.
I was also running into this issue when setting up sass in storybook. The yarn script the readme provides will install the latest versions of those libraries which are no longer compatible with webpack 4 which is what storybook runs on.
For anyone else running into that issue with storybook, this is what you can run instead.
yarn add -D #storybook/preset-scss css-loader#5.2.6 sass sass-loader#10.1.1 style-loader#2.0.0
The older webpack doesn't support the latest versions of CSS loaders:
yarn add -D #storybook/preset-scss css-loader#5.2.6 sass sass-loader#10.1.1 style-loader#2.0.0
this has worked for me.
After downgrading,
In my case I solved it just commenting the loaders scss and sass:
{
test: /\.css$/,
use:
[
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true
}
}
// ,
// {
// loader: 'sass-loader'
// }
// ,
// {
// loader: 'scss-loader'
// }
]
}
The declare module "*.module.css"; did not affected the result.
REMEMBER: Always run
npm start
to test these configuration changes to see if something happens**.
Doing this would save me this afternoon.
I wasn't using Storybooks, just Webpack with TS. All I had to do was run the command:
yarn add -D css-loader#5.2.6 style-loader#2.0.0
Then, I removed scss/sass loader from my webpack config, setting it like this:
{
test: /\.(css)$/,
loaders: ['style-loader', 'css-loader'],
},
Hope that helps anyone.
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 recently upgraded RN from version 0.59.4 to 0.61.5.
I want to use react-native-web and added react-scripts (3.4.1) and react-dom (16.13.1). After some cleaning up of native modules not supported, running react-scripts start results in failure to compile because of lint errors (no-undef, for example). These are not rules set up in my .eslintrc.js file and seem to come with the new way of running scripts.
Is there a way to ignore the lint errors to try and compile? While I could try and make these changes in my code base, there are some issues in dependencies as well.
Additionally, I updated my babel as per react-native-web
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module-resolver", {
"alias": {
"^react-native$": "react-native-web"
}
}]
]
};
I have read this might be webpack related, but there is currently no webconfig. I tried adding what was on the react-native-web getting starter page, but had no luck there either.
I have a React app that I created using npx create-react-app my-app. I've been regularly updating both React and other npm packages.
A while ago, I started getting the following warning:
#babel/polyfill is deprecated. Please, use required parts of core-js
and regenerator-runtime/runtime separately
The following is what's in my package.json file:
"devDependencies": {
"babel-polyfill": "^6.26.0",
"redux-devtools": "^3.5.0"
}
I found a few articles online about how to handle this but none of them look like the official solution. What's the right way to handle this?
So far, this has been a warning and not an error so I just postponed dealing with it. Today, I upgraded the moment package and that started giving me an error and I figured dealing with this issue first is a good starting point.
I'd appreciate some pointers in making this warning go away.
babel-polyfill is being replaced by core-js. You can remove babel-polyfill and install core-js instead. After you have installed core-js update the babel presets in your .babelrc or babel.config.js file with the following:
"presets":[
['#babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3,
}],
]
If you are importing babel-polyfill in your App you can remove that too. Also you can add a targets property in your presets
[
'#babel/preset-env',
{
targets: {
browsers: ['> 0.25%, not dead'],
},
useBuiltIns: 'usage',
corejs: 3,
},
]