We Keep Coding

Failed to compile: module not found

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';

is it possible to destrucure my import statements

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>'

Multiple imports in one row

I want to optimize my import. Is there any way to import type and default in one row using Flow?
import { default as ListIcon } from './List';
import type { Props as ListProps } from './List';
import { default as GridIcon } from './Grid';
import type { Props as GridProps } from './Grid';
Thank you in advanced!

yes you can Import multiple exports from module as follows
import { default as ListIcon, Props as ListProps } from './List';

Error when importing local component file into my LoginForm component

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!

Module not found: Can't resolve

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.