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'
Related
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.
src
---COMPONENT
---UI
card.js
---API
---JS
--display.js
---CSS
--display.css
Need to traverse from JS folder to UI
means, basically need to move 3 folder up. In display.js, need to import card.js
Tried with .../UI/card, but this did not work
Navigation to 3 folder up will not work with three dot in react, just like it works for 2 folder up navigation,
So, for 3 folder up navigation, every time you go up 2 folers, you need to go down 1 to continue.
'../../../components/UI/Card'
another way
'../../UI/Card'
I do want to have a file structure by feature. But I'm using Styled Component and I have a lot of files.
For exemple in my project directory, which is an entity in my application, I have:
Projects.js ProjectList.js ProjectCreate.js ProjectShow.js Card.js CardHeader.js CardBody.js CardFooter.js TasksCounter.js ProjectDescription.js CardAdd.js ProjectDelete.js actions.js reducer.js saga.js constants.js
I could have more files but my pages are still under construction so I could add some more later. Should I split those files again? To have for example sub directories like Projects ProjectCreate ProjectShow put the common files in the root project directory and specific files into those three?
project
|_Projects
|_index.js
|_ProjectList.js
|_Card.js
|_CardHeader.js
|_CardBody.js
|_CardFooter.js
|_TasksCounter.js
|_ProjectDescription.js
|_CardAdd.js
|_actions.js
|_reducer.js
|_saga.js
|_ProjectCreate
|_index.js
|_Form.js
|_actions.js
|_reducer.js
|_saga.js
|_ProjectShow
|_index.js
|_ProjectHeader.js
|_ProjectContent.js
|_actions.js
|_reducer.js
|_saga.js
I saw a lot of different approaches in more than a dozen of tutorials but the examples are always really simple with just a couple of features.
Better solution maybe, using Ducks and put every Styled Components in the same file?
I usually make a separate folder called views for every react (custom) component.
views
- Cards
- index.js
- module.js
- test.js
- styles.js
- Button
- InputFields
- ...
- ...
Inside each view, notice that there is an index.js that has the react component. The module.js will contain reducers and actions if any. test.js will have tests regarding that component only and finally styles.js or styles.css/scss will have styles
Lodash allows import like
import merge from 'lodash/merge';
This reduces the size of the import drastically. I maintain an npm module called react-spinners, and I want to allow the same import.
https://github.com/davidhu2000/react-spinners
For example, the current way to import is
import { BarLoader } from 'react-spinners';
I want to allow
import BarLoader from 'react-spinners/BarLoader';
Based on what I found, to do this, I need to have the following folder structure
main
- index.js <- the file that exports everything
- BarLoader.js
- ... other loaders
This structure is pretty messy because all the js files will be in the root directory.
The current set up I have is
main
- index.js
- dist <- output folder from compiling
- index.js
- BarLoader.js
- src <- uncompiled react code
- index.js
- BarLoader.js
So, currently, in order to import only a single loader is
import BarLoader from 'react-spinners/dist/BarLoader';
I cannot find anything that tells me how I can remove the dist from the above statement.
If you really want to mess with the npm-package You can create a file like
BarLoader.js on the main package folder and only export BarLoader(just like index.js exports every items)
Then you can import it via
import BarLoader from 'react-spinners/BarLoader';
But I would not recommend it as it would be a tedious task to create one file for each import
I guess it is a fair question, What is wrong with import BarLoader from 'react-spinners/dist/BarLoader';? maybe code readability?
I ran into the exact same issue, and did a bit of research on this.
Hackfix
Using Webpack, you can use config.resolve.alias, like so:
const webpackCfg = {
// ...
resolve: {
alias: {
'react-spinners': path.resolve(__dirname, 'node_modules/react-spinners/dist')
}
}
// ...
};
This way all files will be directly looked for in the dist folder.
import reactSpinners from 'react-spinners'; resolves to <root>/node_modules/react-spinners/dist (or node_modules/react-spinners/dist/index.js)
import BarLoader from 'react-spinners/BarLoader' will resolve to <root>/node_modules/react-spinners/dist/BarLoader etc...
How does Lodash do it?
As lodash points out in their README and also in this thread:
The Lodash github repository is not the pure source code, but rather "Lodash exported as a UMD module". They go further to explain:
Generated using lodash-cli:
$ npm run build
$ lodash -o ./dist/lodash.js
$ lodash core -o ./dist/lodash.core.js
However, they also mention here that they want to make this work without having two separate repositories in Lodash v5... Gonna be interesting to see how they end up doing it!
I myself did some experiments, and I could not get it to work quite yet. E.g. I tried to link to the dist folder and copy a modified version of the package.json into it after every build, and that kinda starts working. But sometimes the depending project will be unhappy about folders starting to get messed up. I'm sure, this can work (basically mixing source + dist into the dist folder) but it started to feel like a rabbit hole, so I have not continued pursuing this path (quite yet).
I am using React with FuseBox as bundler. The issue I am having at the moment is that aliasing isn't working so I can help deal with relative path hell.
My structure of the project:
stores folder has my MobX stores and an index.ts file that exports all the stores.
services has a bunch of service classes all exported in there respective files (no index.ts)
So in my fuse.ts I have:
alias: {
"services": "~/services",
"stores": "~/stores"
},
Then in my ui folder for example I am importing like so:
import AccountStore from "stores";
I get [ts] Cannot find module 'stores' error on that line at "stores".
Not sure have I got the alias section wrong? My homeDir in fuse.ts is set to "src/". I don't have any paths or baseUrl set in tsconfig like I did have when we were using webpack to setup absolute paths. Not sure if those are needed again or if it is something I am doing wrong with alias.
Any tips would be great :)
I have looked at the alias documentation on the fusebox site and followed it and tried a few different combinations but not getting any closer to it working. Would love some examples from people who have got this working.
Edit:
I have additionally done the following while trying to figure this out:
remove .fusebox folder
restarted vscode
have checked the bundle and it is adding a tilde there so fusebox must be recognising it?
will continue to add more things I try..
My solution to the problem I was having was to put the tsconfig.json file inside my src folder and the project/app inside ~.
Inside tsconfig.json i set baseUrl to root.
{
"compilerOptions": {
"baseUrl": ".",
// ...
}
}
This then allowed me to do absolute imports that would be the same across all files so it would be easy to reuse imports and quickly copy if needed.
import { service1, service2, service3 } from '~/services';
import { store1, store2 } from '~/stores';
The tilde usually represents home or base on a lot of systems so a few devs agreed it would be appropriate to use it in our folder structure. Though did have to remember to remove ~ from .gitignore if you have something that is autogenerated and its automatically in there.