I'm not sure what i'm doing wrong but i keep getting this message:
Module not found: Can't resolve 'components/List' in 'C:\Users\kobby\Documents\Lambda-School\buildwene\src\coek\hn-clone\src\components\App'
This is what the import looks like in App/index.js:
import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import List from 'components/List';
import { colorsDark } from 'styles/palette';
My folder dir is like so:
C:\Users\kobby\Documents\Lambda-School\buildweek\hn-clone\src\components\App\index.js
This is the path for List:
C:\Users\kobby\Documents\Lambda-School\buildweek\hn-clone\src\components\List
Path should be like this: import List from '../List/index';
Related
Maybe somebody have solution for automation of bringing imports in a beautiful form?
Maybe you know some extention or pachake for this? Something where you can set the structure, connect directories and comments for them...
For example, I create a page and in the end I have something like this:
import React, { useEffect } from 'react';
import Container from 'containers/Container';
import { FEMALE_IMAGES, MALE_IMAGES } from './config';
import { IGender } from 'types/commonInterfaces';
import { useDispatch } from 'react-redux';
import { setGender } from 'redux/actions';
import { compose } from 'redux';
And I have to turn it to the:
import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { compose } from 'redux';
// actions
import { setGender } from 'redux/actions';
// configs
import { FEMALE_IMAGES, MALE_IMAGES } from './config';
// container
import Container from 'containers/Container';
// types
import { IGender } from 'types/commonInterfaces';
i want to write below import in one single line. is it possible?
`import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';`
No.
Destructuring would let you import many values from one module.
You can't import multiple modules at once.
A typical pattern here would be to have an ../adaptors/index which imported all the modules and then exported them:
import SellerAdaptor from './sellers';
import UserAdaptor from './user';
// etc
export { SellerAdaptor, UserAdaptor, etc };
Then you would be able to:
import { SellerAdaptor, UserAdaptor, etc } from "../adaptors/index";
To be able to write import { A, B, C } from 'myPackage', it's upon myPackage and how it has been written.
If they are different files, you can't do it.
If you have one file adaptors that export the different modules, you can write your imports with the destructuring.
You can do like as follows:
import SellerAdaptor from '../adaptors/sellers';
import UserAdaptor from '../adaptors/user';
import ShopEarnAdaptor from '../adaptors/shop_earn';
import ProductAdaptor from '../adaptors/product';
import JobAdaptor from '../adaptors/job';
import OrderAdaptor from '../adaptors/order';
import NotificationAdaptor from '../adaptors/notification';
import CategoryAdaptor from '../adaptors/category';
import AdminAdaptor from '../adaptors/adminAdaptor';
export {
SellerAdaptor,
UserAdaptor,
ShopEarnAdaptor,
ProductAdaptor,
JobAdaptor,
OrderAdaptor,
NotificationAdaptor,
CategoryAdaptor,
AdminAdaptor
}
And Then You can Import like as follows
import { SellerAdaptor, UserAdaptor} from './<filename>'
I have import sources in my ts file
Here is it
import accounting from "accounting";
import { Feature } from "geojson";
import { GeoJsonProperties } from "geojson";
import { GeoJSONGeometry } from "mapbox-gl";
import Helpers from "../../common/helpers";
import { Layer } from "mapbox-gl";
import mapboxgl from "mapbox-gl";
import { Map } from "mapbox-gl";
import { Popup } from "mapbox-gl";
import { __ } from "../../common/translation";
But I have error in codacy
Import sources within a group must be alphabetized
I cannot understand why, because all already alphabetized?
How I can fix this?
As per this answer:
The filepaths are also used as part of the ordering...
These are the 'sources' being referenced in the error. You can disable this in your tslint.json file with the following rule:
"ordered-imports": false
I am new to react-native but I have successfully imported local files into another before and I am getting this error message:
Unable to resolve "./common" from "src/components/LoginForm.js"
I am using expo XDE for the first time as well if that provides any insight. This seems so simple but I can't seem to find if I have a typo.
Here is a screenshot of my project file structure:
These are my imports in LoginForm.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
import { Form, FormSection } from './common'; // what am i doing wrong with this????
These are my imports in App.js
import React from 'react';
import LoginForm from './src/components/LoginForm';
you have to create an index.js in your /common, Then export all of you components:
export * from "./Button";
export * from "./Card";
export * from "./CardSection";
export * from "./Header";
export * from "./Input";
export * from "./Spinner";
also be sure to export { YourComponentName }; in each file as well!
I'm developing a component with React.js and the console is throwing the following error:
Failed to compile:
./src/components/file_tree.js
Module not found: Can't resolve '.src/components/directory.js' in
'D:\Treebeard\src'
Here you can see the code inside file_tree.js:
import React from 'react';
import ReactDOM from 'react';
import { Directory } from './components/directory.js';
The code inside directory.js:
import React from 'react';
import { TriangleDown } from './components/file_tree.js';
import { FolderIcon } from './components/file_tree.js';
import { formatName } from './components/file_tree.js';
import { renderTree } from './components/file_tree.js';
And here, the App.js code, just in case:
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchEngine } from './components/search_engine.js';
import { FileTree } from './components/file_tree.js';
import { Directory } from './components/directory.js';
I checked the file paths from both files and everything seems okay, but this error is thrown. Am I missing something about the file paths? Both directory.js and file_tree.js are inside './src/components' folder.
App.js is inside './src' folder.
Since you are accessing file path from same directory. It should be:
file_tree.js:
import React from 'react';
import ReactDOM from 'react';
import { Directory } from './directory.js';
directory.js:
import React from 'react';
import { TriangleDown } from './file_tree.js';
import { FolderIcon } from './file_tree.js';
import { formatName } from './file_tree.js';
import { renderTree } from './file_tree.js';
App.js: It's okay. Since you're accessing components file path from the current directory.
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchEngine } from './components/search_engine.js';
import { FileTree } from './components/file_tree.js';
import { Directory } from './components/directory.js';
For further help, see this post which will help you in relevant case.