I have some files in my components folder. Two of them are CardItem-component/CardItemComponent.js and list-component/list-components.js.
When I'm trying to import the first component into the latter using
import CardItemComponent from "./CardItem-component/CardItemComponent";
it gives the following mistake:
Module not found: Error: Can't resolve './CardItem-component/CardItemComponent' in 'D:\project\src\components\list-component'
import CardItemComponent from "./CardItem-component/CardItemComponent";
Make sure you have given the correct file path and exported the component
export default CardItemComponent
Based on your explanation of your file structure, maybe you are targeting the wrong directory.
import CardItemComponent from "../CardItem-component/CardItemComponent";
I'm guessing your file structure is:
/some-folder
/CardItem-component
CardItemComponent.js
/list-component
list-components.js
When you are importing CardItemComponent.js from list-components.js, you need to go up one directory level to access the /CardItem-component folder, so you will need to prepend your path with ../.
Sorry, it was inattentive me. It works well, I only mistyped a few things.
Related
I've been stuck with this error and couldn't fix it even after googling.
it says 'Module not found: Error: Can't resolve'.. based on researching on google, it appears that this happens when the import statement cannot find the file at the declared path.
But there clearly is a file named 'Button.js' in my src/components folder.
I am not sure what is wrong. Would really appreciate your help!
A fix you could do is either exporting Button module as default in the end of Button.js file like
export default Button;
Or either import the button module in braces like :
import { Button} from “./components/Button”
If you haven’t set the base url as src:
As you are using relative paths and /components/Button.js is upper than the page directory so you have to use .. to come out of the pages directory and then read /pages/Home.js
So you should use ../Button.js instead of ./componets/Button.js
try
import {Button} from './components/Button.js'
I'm using functional components and exported a function and imported this function in my App.js.
How do i use that component, for some reason editor doesnot take the component.
I'm also using scss, anyone please check if the process of adding scss is correct or not!!
In react to import & exporting a file there is a naming convention.
You should perform these changes to your App.js and skeletion_loader.jsx file.
In skeleton_loader change the function name from this skeletonLoader to SkeletonLoader and in the App.js file import it as import {SkeletonLoader} from "../xyz.jsx";
I am getting this error trying to import this file from src/assets/documents folder.
I am working on a React Project with Typescript. I am trying to import the file and feed it's value in an anchor tag so it can be downloaded.
When I'm importing images from src/assets/images, this problem is not existing.
Can anyone help?
I had the same problem.
Since you are using TypeScript you will need to define the type of the data you are importing.
The solution is fairly simple you need to create a proxy file which will map the types.
Usually the of the file ends with .d.ts
In Vue for example the convention is shims-vue.d.ts
Click [here][1] to see an example
The content of the fie should be:
declare module '*.doc' {
import nameOfDoc from src/assets/documents (should be your path to the doc)
export default nameOfDoc
}
Hi I am new to react I am trying added new component called Test and try to use it the app.js imported test into app.js but still get error. Below you can find stackblitz url Thanks in Advance.
Stackblitz url
import Test from './components/test'
Implement this line, make sure that c is written in lowercase in component/... path OR just copy the line above and replace yours with it. That will work for sure.
Issue in your sandbox is Components whereas your folder name is components:
import Test from './Components';
and you need to complete file path if your not using index.js as reference i.e
import Test from './components/Test';
Here is demo: https://stackblitz.com/edit/react-vcw5a8?file=src%2FApp.js
Two ways to go here: Either you import the File directly like this:
import Test from './components/Test';
or you create a index.jswithin the Components-Folder and add this:
import Test from './test.jsx';
export default Test;
Also, your Import-Statments are Upper-Case whereas you folder-name is lowercase, so you'll have to adjust on or the other.
I am using react and was trying out the new context API for my project which is a "Reddit clone". So my Context is created in a file named provider.js which is in the src folder alongside App.js. Now, I have created a HeaderComponent in its own folder which imports the Context in the following way:
import Context from '../provider'
I have created another component called LoginComponent inside the HeaderComponent. And, the LoginComponent is in its own folder. Now, I have imported Context in the following way:
import Context from '.../provider'
The ../ import worked fine but the .../ imported throws and error.
Failed to compile.
./src/HeaderComponent/LoginComponent/index.js Module not found: Can't
resolve '.../provider' in 'C:\Users.......\reddit\reactfe\src\HeaderComponent\LoginComponent'
Every step up in the folder structure is a .. followed by a /.
import Context from '../../provider'
The number of dots don't have the meaning you seem to think they do. Things to remember:
../ Up one directory.
../../ Up two directories (and so on).
./ Same directory as the current one.
With this in mind, since you need to go up one directory (from LoginComponent to HeaderComponent) and then up one directory again (from HeaderComponent to src) because that's where provider.js resides, you need to do:
import Context from '../../provider';
If you run in your console ls -la you see the . and ... So the . it's the current local where are you, and the .. it's a reference to the parent folder (one level up). So if you need back two folders you need put this two times, this way ../../.
In your case import Context from '../../provider'