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.
Related
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?
I just initialized a new project using create-react-app and everything was ok until I installed react-router-dom. Every time I start my development server I get a warning
./node_modules/webpack/buildin/global.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherApp\node_modules\webpack\buildin\global.js
Used by 1 module(s), i. e.
C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherApp\node_modules\mini-create-react-context\dist\esm\index.js
* C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherapp\node_modules\webpack\buildin\global.js
Used by 2 module(s), i. e.
C:\Users\hisza\Desktop\weatherapp\node_modules\babel-loader\lib\index.js??ref--5-oneOf-3!C:\Users\hisza\Desktop\weatherapp\node_modules\#pmmmwh\react-refresh-webpack-plugin\client\utils\safeThis.js
I found out it can be problem with my imports, but there is no problem with my imports. Every time i remove line with my react-router-dom import everything is ok.
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
I tried removing node_modules and installing npm again using different prompts (gitBash, cmd and powershell) but I still get this warning. Any ideas how to fix that? Currently my 'project' is just Root.js with some empty directories.
This issue is thrown after installing react-router-dom. Try removing it and see those errors gone. This particular error does not affect the codes you write. Even if you upload to heroku or netlify, it would be fine. I think it is a bug they are to fix soon.
I've wanted to add Expo in my React Native project to start it in a web browser. After doing that, I try to import file 'assets/styles/constants.ts'. This is my tsconfig.json:
tsconfig.json
This is constants.ts:
constants.ts
And here I try to import this file:
DropdownAlertCustom.tsx
After that, I get this error:
error message
What am I doing wrong? And how I can fix it?
UPD
Small fix of tsconfig.json:
small fix
Now I get the error 'Cannot find a module or it's corresponding type declarations:
Cannot find module
UPD 2
I understood that my IDE and VSCode see files and folders fine by these paths. When I hover on them, I can see their's content. I get the error Module not found. Can't resolve 'assets/styles/constants' when I type expo start --web. It starts in a browser and I get this error.
Maybe the problem is in Expo? I've added it in Create React Native app.
If anyone has any suggestions, please, help.
Replace assets/styles/constants with ../../../assets/styles/constants
Explanation
If you import like this assets/styles/constants, webpack that compiles your project into common js file that thinks that assets is the package name and that's why it will find in node_mouldes folder and it cant resolve the folder.
so if you want to import something from your local files you can give a relative path to that folder and import it successfully like I specified ../../../assets/styles/constants.
EDIT 1
It's the only way that create-react-app provides you to import any file but, there is another way you can build it manually called absolute path.
Like you can tell webpack that make src folder as the root of my project and if I specify # in URL than means its absolute path and root is src
after that you can call it as
#/assets
#/pages
#/store
#/anything/any
The top of most React files has:
import React from 'react'
Yet react is not actually a file. So where is it and how is it being imported from nothing?
When you import from react it first looks into the node_modules/react/index.js like other module looks for the index.js if there's no file specified. And you may also ask why does it look for node_modules? The answer is you have not specified relative or absolute file path for eg. ./components/MyComponent. When you do not specify the specific path, it will look for the node_modules directory.
The index.js exports is like:
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
So, let's continue with development environment. Now, when you look into the file node_modules/react/csj/react.development.js, you will find several exports statement at the end of the file.
So, you're simply importing React means you're importing all of them. And thus, you can use React.Component, React.Children, etc.
It's not necessary that you must have named React but it's standard. So, even if you do:
import ReactApplication from 'react'
You have access to all of them like ReactApplication.Component. Hope, this clears up things.
Further details:
When you specify ./, it will look for the current directory.
When you specify /, it will look for the root directory.
When you do not specify, it will first look to directory in your project and if it doesn't find, it will look into the node_modules directory.
Other post you may be interested to look into: https://stackoverflow.com/a/27218926/2138752
React is available as a dependency in the node_modules directory.
React must also be in the scope of files containing JSX to enable transpilers like Babel know how to handle that syntax.
React is installed as an npm package, so it can be found in your node_modules folder. That's where it's being imported from.
I was using react rc-tree module in my project by importing it like this:
import Tree, { TreeNode } from 'rc-tree';
This worked fine. However after a while I wanted to make changes to the source code of rc-tree, so I cloned the source code from github into my ./src directory. i.e. I now have a directory called ./tree under my ./src directory. How do I call that code, rather than rc-tree in node_modules?
I have tried various import statements but nothing works.
Add .env file in root and add this line
NODE_PATH=src
Now import
import Tree, { TreeNode } from 'tree';
You should try to relative import your code.
Think if you are in this path src/component/childComponent/ where you import your desire package and here you must use a relative path to the package which is inside src.
import Tree, { TreeNode } from '../../tree';
this .. indicates that you go backward inside your current path.
In this example, it means to go up two directories (component and childComponent). here now you are addressing src directory you should write the rest of your path which is /tree.
I take look at rc-tree package and noticed it has been written with typescript. If your app doesn't support typescript you can't use source code of the package and you should build package first and then import build directory.
In case your app supports absolute paths you can easily use:
import Tree, { TreeNode } from 'src/tree';
I couldn't get these suggestions to work, probably my fault... so I just moved the entire rc-tree sub directory from node_modules to under my source tree and called it "tree". I then made a sym-link from node_modules/rc-tree to the ./tree in my source tree.
I just import Tree, TreeNodes etc, like I am using the module, but really it's calling the copy of the code in ./tree.
It all seems to work. The only thing that is not so good is that because the code is now under ./src the linter prints many warnings about the code. Obviously it is not my code, and I would rather not hear about it, but I can live with this.