I did add the folder structure so you could see.
How am I able to import image component into the card component ? Doesn't matter what path I try I get this error
./src/Components/Card/Card.js
Module not found: Can't resolve '../../Components/Image' in
'/Users/user/project/projecttest/src/Components/Card'
import React from 'react'
import styled, {ThemeProvider, css } from 'styled-components'
import Image from '../../Components/Image'
No, I see you importing: import Image from '../../Components/Image'. This mean you importing index of Image folder.
But in your code, you defining Image.js not index.js.
So, you have to import like this:
import Image from '../Image/Image'
Or, you can rename file Image.js to index.js to shorten the code when import:
// rename Image.js to index.js
// then, import file:
import Image from '../Image'
You should write Image at the end or change filename to index.js
import Image from '../../Components/Image/Image'
Try absolute imports in react. create a .env file in your root directory. contents of the file
NODE_PATH=src
#Jikun L answer is correct. I'm wondering why is it not in image format.
Perhaps Change the Folder Structure to this:
Components
-- Card
-- -- > index.js
-- -- > styles.js
-- Image
-- -- > xxx.png
-- -- > package.json
Package.json:
{
"name": "#image"
}
In Card (index.js)
<Image
source={require("#images/xxx.png")}
/>
Related
I have a parent directory that contains children directories, where each contains an SVG component and I only need to import some of them. I'm currently importing all the components I need by doing this:
import FacebookIcon from 'project/icons/Facebook';
import TwitterIcon from 'project/icons/Twitter';
import DiscordIcon from 'project/icons/Discord';
import MediumIcon from 'project/icons/Medium';
import YoutubeIcon from 'project/icons/Youtube';
However this seems very verbose. Is there a less verbose way of doing this?
I thought about destructuring, but I wasn't sure how to do this since each file is in a different folder.
Typically, you want to import similar components from a single source (you will get auto-complete too):
import {
FacebookIcon,
TwitterIcon,
DiscordIcon,
DiscordIcon,
MediumIcon,
YoutubeIcon,
} from "project/icons";
// Usage
<FacebookIcon/>
// Same
import Icons from './project/icons';
// Usage
const Icon = Icons.FacebookIcon;
<Icon/>
To achieve this, create index.js file in project/icons and make named export for each of the components.
export { default as FacebookIcon } from "./FacebookIcon";
...
Currently, I have a folder in a Vue project which contains all my default images that it has been used through the app. The folder path is web/images/defaults/<imageNames>.png. I'm able import the images on my component by importing them individually like so:
import ImageName from '../../../../../../web/images/defaults/ImageName.png'
However, I want to create a file & add the images path to const variables & being able to import the file in the component.
I have tried:
import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';
const DEFAULT_IMAGES = {
imageName1:'imageName1',
imageName2:'imageName2',
};
export default DEFAULT_IMAGES;
Then, I imported it in my component like so:
import DEFAULT_IMAGES from '../../assets/images';
And I tried to v-bind to the src attribute
<img :src="DEFAULT_IMAGES.imageName1" >
However, it's not working as soon as I imported. What am I doing wrong?
I have found the solution:
I didn't include the right path to get the images. Originally, I tried to access the images in the same folder like so:
import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';
const DEFAULT_IMAGES = {
imageName1:'imageName1',
imageName2:'imageName2',
};
export default DEFAULT_IMAGES;
However, I needed to add ./ before the image name like so:
import imageName1 from './imageName1.png';
import imageName2 from './imageName2.png';
const DEFAULT_IMAGES = {
imageName1:'imageName1',
imageName2:'imageName2',
};
export default DEFAULT_IMAGES;
Instead of writing the following code in every reactnative's ".js" file, is it possible to write it in a single file and the export it so that i can use it in other js files just by importing this one file (containing all the component that I need to use)
import React from 'react';
import {
StyleSheet,
Text,
Image,
View
} from 'react-native';
Now instead of writing the above code in page1.js, page2.js, page3.js, how do i write it in a single file called "comp.js" and export it from there so that i only have to import comp.js in the page1.js, page2.js and page3.js file
It is possible but I recommend using index.js for that folder instead of that comp.js
In a folder you can create index.js and import all related js in that folder so you can import very easy
For example: I have my folder called Components
Create index.js in the folder Components
Import and export files
import comp1 from './comp1'
import comp2 from './comp2'
import comp3 from './comp3'
export { comp1, comp2, comp3 }
Import folder instead of each file and select only needed files import { comp1, comp2 } from '../Components'
I got this error in my browser
Error in ./src/App.js
Module not found: ./components/todo in C:\Users\James\Desktop\react\src
This is what I got in my editor
import {TodoForm, TodoList} from './components/todo'
http://imgur.com/a/8YLod
I even tried import {TodoForm, TodoList} from './components/todo/' I wonder what's wrong.
Imports work on a per module basis for most loaders/bundlers. In other words, you'll need to import the form and list by doing the following:
import { TodoForm } from './components/todo/TodoForm'
import { TodoList } from './components/todo/TodoList'
As a side note, see https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export to make sure that you're exporting the components correctly. The curly braces around your import works for a named export as opposed to a default export.
In order to just import all files from the directory you must have an index.js file that exports everything from the directory
Which in your case the index.js file would look like this
Export * from 'TodoForm'
Export * from 'TodoList'
Note if the export statement doesn't work see this answer to fix the import / export statement
Do you think, when you wrote import {TodoForm, TodoList} from './components/todo', in TodoForm should be value than you exported from file TodoForm.js, and similarly with TodoList? It's don't works.
You should do import from some file. When you wrote from './components/todo' you tried doing import from todo directory. I guess, in egghead video that import works, because, they have index.js file in todo directory. And in this file they do export for every component separately. Try to add index.js file in todo directory with the following contents:
export * from './TodoForm.js';
export * from './TodoList.js';
it's will work.
So the thing is that when you do
import {TodoForm, TodoList} from './components/todo'
What happends is that your compiler will by default search the components TodoForm and TodoList from the index.js file since you have not mentioned explicitly which files to point to
So if in index.js you add something like
export * from './components/todo/TodoForm';
export * from './components/todo/TodoList';
Your approach will work.
I am unable to import file from parent of project directory. To make things as simple as possible, I created new react-native project and file 'test.js' in a parent directory. I tried to import it with this code:
var Test = require('../test.js');
and
import Test from ('../test.js');
None of these worked - when run in xcode I have following error:
uncaught error Error: UnableToResolveError: Unable to resolve module
../test.js from /Users/UserName/Downloads/TestReact/index.ios.js:
Invalid directory /Users/UserName/Downloads/test.js
Is it possible to import file from parent directory with react-native? I̶ ̶k̶n̶o̶w̶ ̶i̶t̶ ̶w̶o̶r̶k̶s̶ ̶w̶i̶t̶h̶ ̶r̶e̶a̶c̶t̶J̶S̶.
Regards
edit - adding code
test.js
'use strict';
import React, {Component,View,Text} from 'react-native';
class Test extends Component{
render(){
return (
<View>
<Text>
SAMPLE TEXT
</Text>
</View>
);
}
}
module.exports = Test;
index.ios.js
'use strict';
import React, {AppRegistry, View} from 'react-native';
import Test from '../test.js';
var TestReact = React.createClass({
render: function() {
return (
<View><Test/></View>
);
}
});
AppRegistry.registerComponent('TestReact', () => TestReact);
edit - added files hierarchy:
screenshot
edit - actually I was wrong, it's impossible with web react too. When I try to build I got following error:
Module parse failed:
/path_to_file/aaa1.js Line 1:
Unexpected token You may need an appropriate loader to handle this
file type.
So adding react tag to the question.
Try this ./../Component.js. It works for me.
More over if you need access a component from adjacent directory ./../AdjDir/Component.js
This problem may be because react only allows you to import from the src folder. So all resources have to placed in this directory.
Also when you go more than two parent directories back you need to use this syntax:
../../../myfolder/myFile.js
finally a stack overflow question I can answer:
Simply add below jsconfig.json to the base route of your react folder. (Assuming you put all of your react code in "src" folder)
example_react_app
---> public
---> src
---> jsconfig.json
jsconfig.json file content
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"*": ["src/*"]
}
}
}
I looks fine to me . Did you tried with just
import Test from '../test';
instead of
import Test from '../test.js';
And also try without small bracket "( )";
I solved my issue with this. Hope it helps.