Imports do not work and React files are not found - reactjs

I have a big problem that often confuses me.
From time to time, while importing code, the import does not work and the development environment does not find the files. I work at IntelliJ IDEA.
To find a file, I first export it:
export let Filename =
and I import in the file necessary for me, but when I register a file name, ide for me does not look and it is necessary to write independently. But when I write the path to a file manually, I get the error that there is no such file. What could be the problem?

Related

Failed to compile react project

I am doing a React project and I am redesigning and optimizing the code. The thing is I had in layout a file named "Footer.js". I want to erase it, but when I erase it or I change the name, the project doesnt compile and it appears on screen
Error: ENOENT: no such file or directory, open + name of the directory"
I thought thay maybe it was because of an import of other file of the footer.js file, but I have checked and the routes have been automatically updated. So, any idea about how could I fix it? Thanks, regards.
Search-all through your project directory for just "footer" - something is probably importing it that you haven't spotted.

React root.js weights about 9MB

Ok, so... I have this project where we are using a lot of components (as usual in every React project) but when we compile the project to see it in the browser (ie. foreman start) it takes a lot of time to load and also when it loads it creates a file that is very very large.
We don't know why this is happening, probably something that we messed up and we don't know yet.
I don't know which part of code you need to see to help me understand why this is happening. Let me know and I will give it to you.
Also, I wanna know if there is a way to prevent that file to be that large, as long as I know it should weight no more than 2Mb or something...
Thanks in advance!
The typical reason for such issues is not the amount of components you have made but rather the libraries you use. You can check what is the cause for a large bundle by first running
webpack --json > stats.json
and then installing and running webpack bundle analyzer
webpack-bundle-analyzer stats.json
After this you need to start working on fixing the cause of the large size.
Normally that would depend on what the reason for large bundle size is..but the following methods will definitely help.
code splitting for react
code splitting for webpack
Using webpack's optimizations
And, since sometimes tree-shaking doesn't work as well as it is expected to..you could change your imports from the style of
import {x, y} from 'library';
to
import x from 'library/x';
import y from 'library/y';
Which would ensure that if there are 10 exports from the library, then all of them dont get loaded... Only those that are needed do. For example, if you are using lodash,
import {debounce} from 'lodash';
will import the entire lodash library while
import debounce from 'lodash/debounce';
will only import that particular file.
There are other ways to optimize your output (like webpack externals) but that is dependent on what is actually causing the issue.
NOTE A lot of this answer assumes you are using webpack to bundle code. However if that is not the case you will need to search out optimization and bundle analyzed for the specific bundling tool you are using

Error in finding the config variable while running the app

I'm getting error while searching for location It is showing that Can't find variable config. Any help will be appreciated.
If you look at the code, in App.js line 20 it does:
import config from './config';`
and then it later uses that import on line 84:
axios.get(`https://api.wunderground.com/api/${config.apiKey}/geolookup/q/${this.state.latitude},${this.state.longitude}.json`)
Since there is no config.js file in the repo, it seems that is a file you need to create yourself to store app secrets, so it's a good thing it's not checked in since you wouldn't want others knowing your secrets.
If you wanted to be pretty awesome, you could create a PR against that repo that explains what needs to be done in the README so that others who use that code won't have the same problem :)
The config file is missing.
You will need to create your own config file which holds the API key which you will receive from Wunderground's API.

Unit test fails on Jenkins, not on local (React project)

My unit tests for my React project pass perfectly fine on local but fail on Jenkins.
I get this error message on Jenkins:
Error: Cannot find module '../../../../src/components/Sidebar/MenuList.jsx'
The file does exist and is imported in my test file like so:
import { MenuList } from '../../../../src/components/Sidebar/MenuList.jsx';
And exported in my MenuList.jsx file:
export class MenuList extends Component { ... }
I am using Mocha/Enzyme/Sinon for testing + Istanbul for coverage.
Since you have a mac and im guessing jenkins is a linux based.
Check the file names. meaning check that the names are case sensitive.
Your problem is that the mac is not case sensitive while the jenkins (im guessing) is in a linux host which is. so say you have a file name like this
import a from '../MyCoolDir'
and the dir name is '../myCoolDir' it will work on mac but not on your jenkins. since the linux host will not be able to find the file becase it does not have the exact name
Youll probably want to take a look at this to configure git too
How do I commit case-sensitive only filename changes in Git?
Hope it helps

React native failing path resolution - using former directory name

While trying to solve another problem (inadvertently over-wrote /constants/index.js without realizing it), I re-named the constants directory constants2. After restoring index.js, I changed the directory name back to constants.
Now, when RN resolves the path to /constants/Layout.js, it's throwing
undefined is not an object (evaluating '_constants2/default.tabBarHeight')
Changing the name back to constants2 doesn't help.
I have followed all of the instructions for clearing caches (npm and yarn), including deleting the temp cache directory. I have searched the contents of the files in my project and in the cache directory for the string constants2 and nothing found. I have upgraded everything possible.
I'm at wit's end. Where could this old path be stored?? I renamed the directory within Atom and I'm wondering if that might be the source of the trouble. Platform is Windows 10.
Solved this, but I'm not sure why.
I changed this:
import Layout from '../constants';
import Colors from '../constants';
import Images from '../constants';
To this:
import { Colors, Images, Layout } from '../constants';
and the problem went away. Shouldn't either one have worked? And I still can't see why it was still referencing the former path.

Resources