I have been using create-react-app for a long time, and decided to try out vite.
In webpack, instead of importing a file as follows:
import Appbar from '../../../../../../../../../../components/Appbar'
I can directly import it as:
import Appbar from 'components/Appbar'
the way I used to do it is by making a file in the project root directory called jsconfig.json, and I write the following:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
This makes webpack think that the root directory is the src directory.
How to make the same thing with vite? vite uses roll-up, but I couldn't find a question as mine, so I decided to ask a new one.
If i understood your question correctly, you might want to try out import.meta.ROOT_DIR, this contains the root directory of your project.
For example: You have a module.js located in the src folder and you want to import it from a file in another folder, you can write:
import moduleName from 'import.meta.ROOT_DIR/src/module.js'
Related
I have a React project with a structure like this:
src
Components
My_component_1
My_component_2
Images
image_1
image_2
Pages
page_1
page_2
I'd like to know if exists a way to register a folder as a component (e.g #Images or #Components for all images or components).
In this way, if I'm working on sub-component of page 1, I will not need to write:
import component from "../../Components/My_component_1
but
import {My_component_1} from '#Components'
and avoid to manage relative url and different URLs in different components.
You can configure your jsconfig.json like this:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
and then you will be able to import component like this:
import Button from 'components/Button';
Copied from https://create-react-app.dev/docs/importing-a-component/
I think you want to configure path aliases or shortcuts in your project. You can read more about it here: How to make an import shortcut/alias in create-react-app?.
There are also a few posts online on how to do that, for example on the medium.com or dev.to website.
The top of most React files has:
import React from 'react'
Yet react is not actually a file. So where is it and how is it being imported from nothing?
When you import from react it first looks into the node_modules/react/index.js like other module looks for the index.js if there's no file specified. And you may also ask why does it look for node_modules? The answer is you have not specified relative or absolute file path for eg. ./components/MyComponent. When you do not specify the specific path, it will look for the node_modules directory.
The index.js exports is like:
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react.production.min.js');
} else {
module.exports = require('./cjs/react.development.js');
}
So, let's continue with development environment. Now, when you look into the file node_modules/react/csj/react.development.js, you will find several exports statement at the end of the file.
So, you're simply importing React means you're importing all of them. And thus, you can use React.Component, React.Children, etc.
It's not necessary that you must have named React but it's standard. So, even if you do:
import ReactApplication from 'react'
You have access to all of them like ReactApplication.Component. Hope, this clears up things.
Further details:
When you specify ./, it will look for the current directory.
When you specify /, it will look for the root directory.
When you do not specify, it will first look to directory in your project and if it doesn't find, it will look into the node_modules directory.
Other post you may be interested to look into: https://stackoverflow.com/a/27218926/2138752
React is available as a dependency in the node_modules directory.
React must also be in the scope of files containing JSX to enable transpilers like Babel know how to handle that syntax.
React is installed as an npm package, so it can be found in your node_modules folder. That's where it's being imported from.
Hello every one i just want to know the mechanism behind how importing react from 'react' works in my cra-app but for my component i have to import it by defining the path of the component file in a nutshell why is there a difference between thee two statements
import React, { Component } from 'react';
import Button from './Button';
Thanks in advance
This is because React is using Webpack internally to resolve modules. In the first import import React, { Component } from 'react'; webpack will look for the library in the node_modules folder as it has a resolver configured to do so.
In the second case you need to mention the path or alias the path ./Button with a shorter name like 'button' to tell Webpack where to search/resolve in that directory inside the webpack.config.js.
For an app created using create-react-app, the webpack.config.js will be located in node_modules/react-scripts/config/webpack.config.js.
There you would notice this resolver is defined which tells Webpack where to look for the core libs:
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
// if there are any conflicts. This matches Node resolution mechanism.
// https://github.com/facebook/create-react-app/issues/253
modules: ['node_modules'].concat(
// It is guaranteed to exist because we tweak it in `env.js`
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
...
}
To alias your own path you can define a new alias in that file located in the config/webpack.config.js after you eject the app with npm run eject (you cannot undo this):
resolve: {
alias: {
'components' : path.resolve(__dirname, '../src/Components')
}
}
};
In you component you can import like:
import Button from 'components/Button';
react is a package installed via npm into node_mudules and can be imported by the package name.
Button is your custom component, and thus has to be imported by its path. If you made Button into a package, then you could install it via npm as well.
I've created a React app using create-react-app in VisualStudio. I'm trying to avoid having to use a bunch of ../../ in order to import my different components. Supposedly I should be able to use either the jsconfig.json file or .env files to setup baseUrl or NODE_URL. However, I'm clearly doing something wrong because I can't access my files. My file structure looks something like this:
+ClientApp
package.json
+public
+src
+buttons
Button.js
+components
+sidebar
Sidebar.js
SidebarButton.js
gulpfile.js
package.json
Program.cs
Startup.cs
What I want to do is to import the button component inside Button.js in my SidebarButton.js file using something like src/buttons/Button.js or a similar path. However, I can't get the environment to start its lookup for files from the src directory. An absolute path will start the lookup from my C:\ directory and any relative lookup will start from the current directory of the js file doing the import
Absolute Imports
You can configure your application to support importing modules using absolute paths. This can be done by configuring a jsconfig.json or tsconfig.json file in the root of your project. If you're using TypeScript in your project, you will already have a tsconfig.json file.
Below is an example jsconfig.json file for a JavaScript project. You can create the file if it doesn't already exist:
{ "compilerOptions": {
"baseUrl": "src" }, "include": ["src"] }
If you're using TypeScript, you can configure the baseUrl setting inside the compilerOptions of your project's tsconfig.json file.
Now that you've configured your project to support absolute imports, if you want to import your module located at src/buttons/Button.js, you can import the module like so:
import Button from 'buttons/Button';
For more information on these configuration files, see the jsconfig.json reference and tsconfig.json reference documentation.
I'm intoroducing storybook to my React Native project.
Default storybook directory is located at the root of project as prjroot/storybook/.
But I wanna place it to prjroot/build/storybook/, because I wanna write the storybook config files in TypeScript, and build it into prjroot/build/storybook/ .
Is there any ways to make storybook recognize the moved path?
By adding the outDir option to your Typescript config.
tsconfig.json
{
"compilerOptions": {
"outDir": "build/",
...
}
}
Note that configuring the rootDirs may also be useful if you want to specify the source directories.
https://storybook.js.org/configurations/typescript-config/#tsconfigjson
EDIT: in your specific case, using react-native-storybook-loader, you have to configure it:
"prestorybook": "rnstl --outputFile ./build/storybook/storyLoader.js --pattern \"**/*.story.tsx\" --searchDir ./App"
outputFile with the new path
pattern to scan .tsx files
searchDir can be useful to ignore node_modules and prevent conflict