I am trying to learn Gatsby and I included prettier-eslint plugin with a common configuration. You can see my configuration, the files, etc
When I try to add a css file I get this error:
Have you tried using the following?
eslint: {
patterns: "**/*.{js,jsx,ts,tsx}",
customOptions: {
fix: true,
cache: true,
},
},
The eslint pattern seems to be a string, not an array according to the plugin's example.
This seems to be an unresolved issue of the plugin, according to this opened issue (from a week ago), so keep an eye on that stack trace to see how it evolves. If the dependency has a bug when using the defaults (and suggested) configuration, there's nothing you can do except making a PR if you are able to spot the bug in the source code or wait for the resolution.
I had the same issue. Turns out you must have a prettier config (.prettierrc or similar) set up. Check to make sure you have a config as mentioned in the Prettier docs.
Related
I am using webpack with react and module federation and share components between. But one of the dependency packages gives warning/error such as:
"Compiled with problems:X
WARNING in shared module luxon -> /Users/Desktop/settings_test/react-webpack-typescript-starter/node_modules/luxon/src/luxon.js
No version specified and unable to automatically determine one. No version in description file (usually package.json). Add version to description file /Users/skenariolabs/Desktop/settings_test/react-webpack-typescript-starter/node_modules/luxon/src/package.json, or manually specify version in shared config."
My webpack setup looks like this:
shared: {
...deps,
'luxon': {
singleton: true,
requiredVersion: deps['luxon'],
},
}
But it still does not work. Ive tried with different versions same issue. Also tried to delete luxon from node_modules and cleared node cache but the warning is coming. Is there atleast possibility to hide this warning message?
The topic is old, but this worked for me:
luxon: {
version: '^3.2.1',
singleton: true,
eager: true,
},
Maybe it will help someone :)
i've been working a bit with ThreeJS but can't get it to build.
After some time put into this without any results whatsoever i wanted to ask if any of you know what's wrong.
Project: I made some basic gltf models using blender and want to display/ manipulate them later on. For now they are basically just displayed.
It works on the dev server but tsc returnes multiple errors.
Errors are for example:
type declarations not found (despite the needed #types dependencies beeing present)
type constraint violations in node_modules
What am i missing?
Disclaimer: I am new to both React and ThreeJS.
Repo Link
Changing "skipLibCheck": true in my tsconfig.json from false to true fixed this issue for me.
React-three-fiber is most likely built with a less-strict tsconfig which causes this issue to occur.
Warning: --skipLibCheck degrades type checking, and ideally we wouldn't use it. But not every library provides perfect types yet, so skipping it can be nice.
It took me awhile to find a solid answer for this so I figured I would put the solution on here. Upgrading node caused an issue when I would save in React as my project was running. As it was reloading it would get this error.
Type checking and linting aborted - probably out of memory. Check `memoryLimit` option in ForkTsCheckerWebpackPlugin configuration.
I would have to stop the host and run npm start everytime. All the solutions online said to increase the memory, but they don't say where and neither does the documentation. It would not be an issue if the wepback.config wasn't such a big file like mine is so its hard to understand where this code is implemented.
The Solution:
Open your webpack.config file and find this area, then add the memoryLimit (for me it was not there by default) and specify a new amount (I doubled it just to be safe) and then save the file and you should be good to go!
new ForkTsCheckerWebpackPlugin({
async: false,
watch: paths.appSrc,
tsconfig: paths.appTsConfig,
tslint: paths.appTsLint,
memoryLimit: 5000,
}),
Another idea:
If your project is not huge (or it has used to work in the past), then chances are high that you are linting/compiling the folders that are not supposed to. (e.g. /dist or any folder that has compiled artifacts.)
I would recommend running tsc and eslint individually (preferably with - debug option) to see if they are doing their job properly and only compiling/linting the source code.
I've created an app with npx create-react-app my-app --typescript and I would like to configure it so that my app will still compile despite typescript errors so that I can return to them when I'm ready.
I do not see any compilerOptions for this. Is it possible?
{
"compilerOptions": {
...
strict: false
}
)
Admittedly a Typescript noob but this took me forever to figure out. CRA defaults strict to true which will fail the compilation for a wide range of errors. This is extremely implicit and it looks like setting this to true does quite a few other things as well:
enables --noImplicitAny, --noImplicitThis, --alwaysStrict, --strictBindCallApply, --strictNullChecks, --strictFunctionTypes and --strictPropertyInitialization.
There are other errors I'm still getting a failed compilation for ie:
Property 'property' does not exist on type 'unknown'.
I can get around it without much hassle and maybe I'm not using Typescript the way it is meant to be used but all I want is to see the warnings in my IDE so I can return to them when I'm ready after I at least have some proof of concept. Drove me a little crazy to the point where I was considering restarting without TS even though I really like it and have benefited from using it.
I think there should be something on the tsconfig docs with at least a brief summary of the implications from this strict option, but I digress.
Update
I added a .eslintc file to the root of my client app and, in it, added this JS Object:
{
"extends": "react-app",
"plugins": ["prettier"]
}
That removes the linting problems from displaying in my IDE but still leaves Prettier in a bad state; that is, when I format, Prettier adjusts my code in a way that produces a ton of errors.
I think I need to next adjust the config rules that are guiding how my Prettier plugin functions. Any help with that would be appreciated. My ultimate goal is to get Prettier/ESLint to function as they do originally when shipped with Create React App. Thanks for the help so far!
End Update
I've been building a project that is using React and Material-UI on the front-end. I'm using VSCode as my IDE with ESlint and Prettier. I had originally initiated the front-end of the project with Create React App.
All had been going well until I did something - and I have no idea what - to make my ESLint become super stringent. It's now presenting problems all over, whereas the same code previously had zero linting problems, and no changes to the code have been made.
I've also been using Prettier and now, because of these linting problems, when I format with Prettier, the code adjusts to address the Linting problems. Which causes actual errors.
I've been searching all over. I installed ESlint Plugins, been digging around, looking for (and creating .eslintrc.json) files. Nothing seems to work. It is making work on this project much more difficult.
What did I do? How do I fix it?
Thank you.
Add or Update your .eslintrc.js file
set indent off
set globals false if it (definition not found)
Hope it helps
module.exports = {
rules: {
indent: 'off',
'new-cap': [0]
},
globals: {
db: false,
mongoose: false,
response: false,
offline: false
}
};