Plugin "react" was conflicted between "package.json » eslint-config-react-app - reactjs

this problem after install react
enter image description here

I encountered the same error .
The path u created this app is in:
\Users\TONMOY\Onedrive\feedback-ui\
The path name is case sensitive. You created the app in is case sensitive so you created the app in the folder ...\Onedrive\..... while the correct path in your device is ...\OneDrive\.....
This may be an issue of VS Code.
The workaround to this that I found is, in the Visual Studio terminal I navigated to the correct folder path with the proper case which in your case should be
\Users\TONMOY\OneDrive\feedback-ui\
After this running your app from the VS Code terminal should work normally. This worked for me in Visual Studio Code.
Update:
This is just a temporary fix. On restarting VS Code it reverts back to the wrong case.
Instead you could load up VS Code and browse through your system directory and select your project folder manually once. After doing this the path's case does not revert even after restarting.

I went to node_modules/react-scripts/config .Acutally it's an another folder, and there is no such file as you mentioned above.

Install the node modules package again.
npm i

This worked for me too
went into the file webpack.config.js located in : node_modules > react-scripts > config and i commented all this excerpt located at the end of the file :
Coment all this section
!disableESLintPlugin &&
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
context: paths.appSrc,
cache: true,
cacheLocation: path.resolve(
paths.appNodeModules,
'.cache/.eslintcache'
),
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error',
}),
},
},
}),
Thank u

I got this error when returning to an old react project. I had to update react-scripts package. Information on how to do this can be found here:
https://create-react-app.dev/docs/updating-to-new-releases/

Well I faced the same issue and if run npm ls eslint-config-react-app to see the configration and package being used. Or else run npm update eslint then finally re-run npm start. That should work as expected.

What I did to solve this problem I went into the file webpack.config.js located in : node_modules > react-scripts > config and i commented all this excerpt located at the end of the file :
!disableESLintPlugin &&
new ESLintPlugin({
// Plugin options
extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
context: paths.appSrc,
cache: true,
cacheLocation: path.resolve(
paths.appNodeModules,
'.cache/.eslintcache'
),
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve('eslint-config-react-app/base')],
rules: {
...(!hasJsxRuntime && {
'react/react-in-jsx-scope': 'error',
}),
},
},
}),

Related

TS Config nested alias for absolute path not working

I'm trying to set up path aliases in my tsconfig.json for a React app bundled with Vite. Here is the relevant part of my tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
...
"paths": {
"*": ["src/*", "node_modules/*"],
"components/*": ["src/components/*"],
"containers/*": ["src/containers/*"],
"pages/*": ["src/constants/*"],
"store/*": ["src/store/*"],
"types/*": ["src/types/*"],
"NestedFolder/*": [
"src/components/NestedFolder/*"
],
}
},
"include": ["src/**/*", "*"]
}
The only issue is with the NestedFolder. When I import this way, everything works:
import { ComponentName } from "components/NestedFolder/types";
However, the nested alias fails:
import { ComponentName } from "NestedFolder/types";
// error
EslintPluginImportResolveError: typescript with invalid interface loaded as resolver
Occurred while linting .../src/components/NestedFolder/canvas/index.ts:1
Rule: "import/namespace"
// error on hover in VS Code
Unable to resolve path to module 'NestedFolder/types'.eslintimport/no-unresolved
I would like to do nested components because I have several folders that are nested 3-4 levels and it would be nice to have a cleaner view of my imports. Is there a way to do this?
You need to install the vite-tsconfig-paths plugin to set up path aliases using TypeScript and Vite.
If nothing changes and you are using VSCode make sure to restart the TypeScript server by pressing Ctrl+Shift+P or Cmd+Shift+P, typing restart, and then selecting the command: TypeScript: Restart TS server
The accepted answer did not work for me. I found that I had to install the following packages:
npm i eslint-plugin-import eslint-import-resolver-alias eslint-import-resolver-typescript
And then add the following configurations, with the important ingredient being strongly-defined alias paths:
const path = require('path');
module.exports = {
root: true, // important to ensure nested eslint scoping in monorepos
plugins: ['#typescript-eslint', 'import'],
extends: [
'airbnb-typescript-prettier',
'plugin:import/typescript'
],
parser: '#typescript-eslint/parser',
parserOptions: {
project: path.join(__dirname, './tsconfig.json'),
tsconfigRootDir: './src',
},
settings: {
"import/parsers": { // add this definition
"#typescript-eslint/parser": [".ts", ".tsx"],
},
'import/resolver': {
alias: {
map: [
// define each alias here
['components', path.join(__dirname, './src/components')],
],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
typescript: {
project: path.join(__dirname, './tsconfig.json'),
},
},
},
}
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287
if vite-tsconfig-paths is not working for you. Make sure you didn't install v4.0.0. That version has a bug.
v4.0.1 fix it.
Install with the following:
npm install vite-tsconfig-paths#latest
Should install v4.0.1 at least.
I think this could be improved on by harmonizing the aliases between the .eslintrc and vite.config so aliases only need to be defined once, using a tactic like the one defined here: https://stackoverflow.com/a/68908814/14198287

Uncaught Error: Cannot find module 'react-dom/client'

I just create my application from npm command, when i run the start script the application throws me that error.
Please provide more context. If you're using typescript on your react project. You need to upgrade both react and react-dom declaration. npm install #types/react#latest and npm install #types/react-dom#latest
If you've recently updated past npm 8.5+ and using workspaces, you have two options.
Option A) If possible, just remove your package.json declaring your "workspaces" (and the package-lock.json). I had only 1 workspace so that was the easiest fix.
Option B) Update Jest so it can find your modules. I've observed NPM 8.11 will create a node_modules in the workspaces folder and in each project.
Specifically look at the moduleDirectories key below.
{
verbose: true,
testEnvironment: "jsdom",
moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
moduleDirectories: [
// Look in current directory node_modules
path.resolve(__dirname, "node_modules"),
// Look in parent workspace node_modules
path.resolve(__dirname, "../node_modules"),
],
moduleNameMapper: {
...moduleNameMapper,
"\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
'\\.svg$': '<rootDir>/__mocks__/svgrMock.tsx',
"\\.(css)$": "identity-obj-proxy"
},
transform: {
"^.+\\.tsx?$": "ts-jest"
},
};

Storybook fails on eslint errors in react

I have configured React, Storybook, Tailwind. everything worked properly. But After I added eslint it breaks storybook for every eslint errors.
.storybook/main.js
const path = require('path');
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
addons: [
'#storybook/addon-links',
'#storybook/addon-essentials',
'#storybook/preset-create-react-app',
],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [require('tailwindcss'), require('autoprefixer')],
},
},
],
include: path.resolve(__dirname, '../'),
});
return config;
},
};
Error
[ESLintError:
src/stories/Button.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
src/stories/Header.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
src/stories/Page.js
Line 2:23: 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
Line 28:11: " can be escaped with ", “, ", ” react/no-unescaped-entities
Line 28:16: " can be escaped with ", “, ", ” react/no-unescaped-entities
Search for the keywords to learn more about each error.]
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
error Command failed with exit code 1.
In my case I just wanted to disabled eslint errors during development so
DISABLE_ESLINT_PLUGIN=true start-storybook -p 6006 -s public
did the trick
Thanks for the question, I was struggling with this issue for a couple of hours...
The steps of my investigation are the following:
display the existing Webpack config:
webpackFinal: async (config) => {
console.log(config);
analyse configuration
bail: false,
stats: { preset: 'none', logging: 'error' },
the bail parameter is false what's fine, but preset: 'none' means to show nothing - let's park it, we will need it later
proof: https://webpack.js.org/configuration/stats/#stats-presets
by default the ESLintPlugin throws errors and fails
proof: https://webpack.js.org/plugins/eslint-webpack-plugin/#failonerror
trying to change the parameter failOnError to false, e.g.
new ESLintPlugin({
context: path.resolve(__dirname, '..'),
overrideConfigFile: path.resolve(__dirname, '..', '.eslintrc'),
extensions: ['js', 'jsx'],
files: ['./components', './theme'],
failOnError: false,
})
Now we can see warnings if we change the stats parameters:
webpackFinal: async config => {
config.stats = undefined;
config.plugins.push(
Running storybook with the ESLINT_NO_DEV_ERRORS option also does the trick:
ESLINT_NO_DEV_ERRORS=true npm run storybook
You can also set it and forget it as a storybook environment variable.
this is happened because ESLint is throwing errors instead of warnings!
and storybook can not start with that errors.
you have two ways to solve this problem!!
set 'warn' for all of the rules that you are using in your ESLint config file
use this package https://github.com/bfanger/eslint-plugin-only-warn to change all of rules to 'warn' automatically.

Heroku Build Fails on #import for SCSS

I have a react/webpack-4 app and am trying to build it on Heroku. When I build it on my machine it works completely fine, but on Heroku it spits out these errors:
ERROR in ./src/styles/main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass loader/lib/loader.js):
#import 'components/dashboard';
^
File to import not found or unreadable: components/dashboard.
It doesn't always break on the same #import statement in my main.scss file, but it always breaks on one of them.
This is my main.scss:
#import 'components/add-poster';
#import 'components/auth';
#import 'components/dashboard';
#import 'components/navigation';
All of the names match my files and are prefixed properly with an _ (ie: _dashboard.scss).
This is my prod webpack build file:
module.exports = merge(base, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
use: [ MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ],
test: /\.scss$/
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({ parallel: true, sourceMap: true }),
new OptimizeCssAssetsPlugin({})
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
})
This has been driving me nuts for hours and any help or insight would be greatly appreciated. Thank you.
After a very long and arduous process of reformatting webpack over and over again, I started removing imports to see if I could stop the error.
Once I removed the dashboard component the build started to work. I believe that my issue was actually from importing an scss file with nothing in it. Don't know why that would break things, but there you go.

Webpack+SemanticUI+React: process is not defined

I have found numerous posts about the Webpack error:
Uncaught ReferenceError: process is not defined
most of which suggest adding a plugin to the webpack.config.js:
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
// ...
]
however this does not seem to do the trick in my case.
To make things easy, I have created a repo with the bare minimum to setup SemanticUI-React with Webpack, which should be straightforward to navigate. My config in webpack.config.js is heavily inspired from this recent tutorial which seems to have a lot of positive comments.
To reproduce the error, just clone the repo on your machine (I use yarn, but this should work with npm too):
git clone https://github.com/sheljohn/minimal-semantic-react
cd minimal-semantic-react/
yarn install
yarn run serve
which opens at localhost:3000, and the error can be seen in the developer console.
As far as I understand, it seems that when React loads, it is looking to determine whether production or development mode is set, using the variable process.env.NODE_ENV, which is undefined in the browser.
This might be related to the target field in the Webpack config (set to web by default); but since React is loaded from CDN, prior to the bundle, I guess it doesn't know about what WebPack is doing, which makes me perplex as to why adding a plugin in the config would change anything...
Hence my question: is it possible to use semantic-ui-react by declaring the big libs (React, ReactDOM, semantic) as externals? Everything works fine if I bundle them, but the bundle ends up around 4MB, which is quite big.
Additional Details
Error as seen in Chrome (OSX High Sierra, v66.0.3359.181, dev console):
react.development.js:14 Uncaught ReferenceError: process is not defined
at react.development.js:14
(anonymous) # react.development.js:14
and code excerpt at line 14:
if (process.env.NODE_ENV !== "production") {
File webpack.config.js
const path = require("path");
const webpack = require("webpack");
const publicFolder = path.resolve(__dirname, "public");
module.exports = {
entry: "./src/index.jsx",
target: "web",
output: {
path: publicFolder,
filename: "bundle.js"
},
devServer: {
contentBase: publicFolder,
port: 3000
},
externals: {
'jquery': 'jQuery',
'lodash': '_',
'react': 'React',
'react-dom': 'ReactDOM',
'semantic-ui-react': 'semantic-ui-react'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
}
}),
new webpack.HotModuleReplacementPlugin()
]
};
File .babelrc
{
"presets": ["env", "react"]
}
I think I finally solved this:
Mistake #1: I was using cjs versions of the React libs from cdnjs, when I should have been using umd instead. Although UMD style is ugly, it seems to work fine within browsers, whereas CommonJS uses require for example. See this post for a comparison of AMD / CommonJS / UMD.
Mistake #2: in webpack.config.js, the "name" for the external semantic-ui-react should be semanticUIReact (case sensitive). This is what is defined in the window global when the script is loaded from the CDN (e.g. like jQuery or React).
I updated the repository with these fixes, and you should be able to reproduce that working example on your machine. This repository contains the bare minimum needed to get SemanticUI, React and Webpack working together. This would have saved me a lot of time, so hopefully other people get to benefit from that!
Everything works fine if I bundle them, but the bundle ends up around 4MB, which is quite big.
It's because you bundle them in "development" mode. Try using "production" in your script instead, it will be much smaller.
"build": "webpack --mode production"
If you bundle everything in production, without specifying external, it will be better for a standalone app.

Resources