I'm new to React. I have a problem I can not solve. I have an ".eslintcache" file, which was created for me automatically as soon as I created a new app in React using "create-react-app". I do not know why I have this file. I tried to delete it but it always comes back.
I ran this command - "npm uninstall -g eslint --save" - to delete eslint's directory but it does not help.
I do not know how to handle it, I did not find a solution to it, I would be happy to help.
It is part of the CRA bundle. I'd recommend just adding it to the .gitignore file if it isn't in there already.
From the ESLint docs:
Store the info about processed files in order to only operate on the changed ones. The cache is stored in .eslintcache by default. Enabling this option can dramatically improve ESLint's running time by ensuring that only changed files are linted.
It seems as new issue in React App (this issue opened on Nov 27, 2020)
Put .eslintcache in .gitignore also do:
git rm -rf --cached .eslintcache
git add .
git rm: remove files from working tree ...
-r: recursive removal in case of a directory name ...
-f or -force: Override the up-to-date check.
Details: https://git-scm.com/docs/git-rm
This file is part of the new version of create-react-app package, you can't avoid it to be added, just like other files being added. This is the bundle.
This is part of the new version in react. I also had files "reportWebVitals" and "setupTests", I deleted them and everything works properly.
With "reportWebVitals" you can track real user performance on your site.
And with "setupTests" you are Initializing Test Environment
this feature is available with react-scripts#4.0.0 and higher
I do not need these properties, just deleted them and that's it, the eslintcache can not be deleted is part of the bundle.
I faced the problem, tried putting .eslintcache in .gitignore and implement the command git add . but was not enough, because you should do git add . after every change in your code, and that's not sence at all of course, this is not a clean workround anyway.
So, simply i downgraded the react-scripts to #4.0.0, and that problem disapeared completely
I think the react-scripts#4+ isn't stable yet
I ended up writing a custom plugin to delete the .eslintcache before each watch compile:
var exec = require("child_process").execSync;
module.exports = class ESLintClearPlugin {
constructor(options) {
this.options = options;
}
apply(compiler) {
compiler.hooks.watchRun.tap("ESLintClearPlugin", () => {
exec("del .eslintcache");
});
}
};
Then you use it in your webpack config:
const ESLintClearPlugin = require("./pathtofile");
// webpack config
plugins: [new ESLintClearPlugin()]
Related
I've been working on this for several hours and have been trying out a number of suggestions in similar questions here.
I can run my gatsby site develop build just fine, but when I run "gatsby build" I'm running into this error.
Invalid plugin options for "gatsby-source-contentful":
- "accessToken" is required
- "spaceId" is required
not finished open and validate gatsby-configs, load plugins - 1.427s
I have one .env file named ".env" with both of the necessary env variables, and in my gatsby-config file, I have it configured like this...
resolve: 'gatsby-source-contentful',
options: {
spaceId: process.env.CONTENTFUL_SPACE_ID,
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN
}
I've tested out the accessToken and spaceId by manually adding them into my gatsby-config plugins options and ran "gatsby build" and they are working fine. When I change the config back to the env variables though, it's no good and I get the error I mentioned previously.
One thing I tried just recently was to make another .env file and name it ".env.production" and it threw a different error like this...
“error Cannot access Contentful space “*********ab” on environment “master” with access token “***************************************1234”. Make sure to double check them! (value)”
This led me to look into the master environment on contentful but I'm pretty new to it and it's got me confused.
I can find a lot of questions here with the same type of problem but I'm yet to find a solution that works. Any gatsby experts out there who've had this problem?
According to Environment variables docs:
In development, Gatsby will load environment variables from a file
named .env.development. For builds, it will load from .env.production.
So, in your scenario, just duplicate and rename your .env file to .env.development and .env.production. Gatsby will take the needed data depending on the fired command.
I noticed that a newly-setup Angular project was not registering the changes inside its src/app folder, so I looked at the project's .gitignore file, but there is nothing that is causing the whole app directory to be ignored...
Searching for the term 'app' returns the following, but they cannot be responsible, right?
AppPackages/
App/[pP]layers/
Regardless, I commented them out, but no change.
When I try to add the app folder in GitBash, I get the following:
$ git add app/
The following paths are ignored by one of your .gitignore files:
myAngularApp/src/app
I am confused what is causing this directory to be ignored. Can someone please help me understand what I am missing?
Simply try to check which rule of which .gitignore is the cause for this error, using git check-ignore:
cd /path/to/repository
git check-ignore -v -- app/aFile_inside_app
That will give you a better idea of what is going on.
The OP CatarinaRuna confirms:
The command revealed that [Aa]pp/ in my .gitignore was the cause, but it wouldn't show up in my search, because I only looked for app : )
Having issues running gatsby build with gatsby-starter-wordpress-advanced theme:
Error: ENOENT: no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced\.template-cache\tmp-\.js'"
I figured this might be a problem with the path. The path should rather look like:
writing tmp-new-page/ template: open '.template-cache/tmp-new-page.js'
See repo: https://github.com/henrikwirth/gatsby-starter-wordpress-advanced/blob/master/create/utils.js
Line 53 you find the function createPageWithTemplate. I've tried console.log(page.uri) to see what's going on. It outputs the filename correctly. I've also tried with gatsby clean to clear the cache. It seems to be some kind of backslash issue where the path comes with a \ .js at the end instead of sample-page.js:
no such file or directory, open 'C:\Users\Tobias\Desktop\Gatsby\gatsby-starter-wordpress-advanced\.template-cache\sample-page\.js'
The issue have been resolved. The problem was related to update in WPGraphQL WordPress plugin. Had to update the paths, because the page.uri is different in the newer versions of WPGraphQL. Before it was just: some-page now it is /some-page/.
Secondly in the page template creation process the theme was using the uri, therefore, this messed up the paths for the template files. This has been switched to page.slug instead now and some extra checks, to make sure the frontPage is not ending up producing a wrong path.
The master branch of the starter theme have been updated.
Originally, I had my distDir set to a folder within my Firebase Functions directory for deployment, however, the duplication of React when running the app in dev mode led to some errors, so I've had to comment it out.
Is there a way to specify the next build commands output directory within the command? Like next build dir='../functions/next'.
Or is there a way to separate dev builds directory (from the next command) from the production builds (next build) within the config?
I found following solution for this problem:
You can set custom environment variable that decides where your build will be generated:
BUILD_DIR=myBuilds/buildXYZ yarn build
OR
BUILD_DIR=myBuilds/buildXYZ npm build
In the next.config.js you can use your environment variable like this:
module.exports = {
distDir: process.ENV.BUILD_DIR || '.next',
}
Now your build will be dynamically generated in the myBuilds/buildXYZ directory defined in the BUILD_DIR variable.
One thing to notice: If you want to use the next export command (or any other command using the build directory), you should also add the environment variable before it, e.g.:
BUILD_DIR=myBuilds/buildXYZ yarn export
According to https://github.com/zeit/next.js/issues/1513, this may need you to update to the next version. But it looks like they added a feature to next.config.js file. All you have to do is add the destination for your dist:
module.exports = {
options: {
dist: '.next'
}
}
Haven't tested it, but it was successfully merged to master and marked as resolved.
This is an XY problem; answering any part would do.
X: I want to generate multiple bundles out of a single source tree. I'm aware of webpack supporting this, but I'm afraid, I can't use it. For example, my Router gets fed by one or more maps mapping a route (string) to a page (component). I'm storing these maps in separate files and comment importing and using them out as needed (I wrote a simple script doing this for me).
Is there a better solution?
Y: So when building the admin bundle, the user pages are not reachable from the index.tsx. Nonetheless, I'm getting typescript errors for them. The same happens even when I create a new unused file containing an error.
How can I avoid compiling unused files?
I'm not posting here all my config files as I hope, there's a simple setting for this somewhere. I'll do it when needed. Alone the list makes me depressed:
.babelrc
.env
.eslintrc
.gitignore
config-overrides.js
package.json
tsconfig.json
tslint-imports.json
This is a partial answer, but hopefully it will take you in the right direction. Typescript looks at tsconfig.json. Assuming your initiation is from an npm script, you can specify which tsconfig to use with the --project flag, like tsc --project tsconfig-1.json.
In your tsconfig.json file, only include the entry file, like
include: [
"src/app/index.ts"
]
If you have something like "src/**/*", then it will process all files. But it you specify only the entry file, then it will process only the files in that import tree. The tree is defined by the import/import() statements.
For reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
If you want to create multiple bundles, then you'll need to run multiple npm scripts and have multiple tsconfig files or else specify the files from the command line.