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.
Related
I have been trying to import SCSS files with an absolute path for 2 days now...
My folder structure:
src
|--assets
|--|--styles
|--|--|--_variables.scss
|--UI
|--|--Layout.module.scss
I would like to import variables and functions from _variables.scss to Layout.module.scss using an absolute path to avoid my code from breaking when changing the folder structure.
I am using the live sass compiler extension in VS code which trows the error
Error: Can't find stylesheet to import.
when I try to import a scss file using an absolute path like #import 'src/assets/styles/variables' .
Relative paths work just fine
I tried several things:
Using the sass-loader includePaths option and including the src folder
Using the webpack module.resolve object in the config file to add the src folder to the folder that will be searched when trying to import modules and then using the ~assets/styles/variables path
Using webpack module.alias object in the webpack config file to define an alias for the src folder and then use it like so Styles/variables
I looked up a lot of similar problems but neither of the solutions would help solve my problem. I would appreciate any possible solution!
I have a react monorepo project with a number of aliases (typescript paths) setup which makes importing files easier without the need to use relative paths everywhere.
For example if I have a component in src/components/Sidebar/Toggle.jsx and I want to import that anywhere in the application I can just do import {Toggle} from '#company/components/Sidebar/Toggle' and there’s no need to do any relative path importing like ../../../Toggle.
Company is just an example alias to the src directory setup in tsconfig.json like:
"paths": {
"#company/*": ["./src/*"]
},
This works fine in vscode but in neovim (I’m using nvim-lspconfig with eslint) all exported functions which are imported using the alias have a warning
Exported declaration not used within other modules
even though they are.
If I import them using relative paths it works without warning.
Does anyone have a suggestion as what config I need to change so that neovim can see that these functions are in fact used in other files?
I've tried adding config in .eslintrc.json like this as suggested by https://www.npmjs.com/package/eslint-import-resolver-typescript but this did not solve it.
settings: {
'import/resolver': {
typescript: {
project: ['packages/*/tsconfig.json'],
},
},
}
I should also note that running eslint directly on the file with my current configuration works fine with no errors so this is somehow related to the neovim plugin.
With a bit more debugging I can see that the eslint plugin doesn't seem to be using the correct configuration file as it's root. There is an .eslintrc.js file in a sub folder but the main .eslintrc.js file lives higher up in the directory tree. The plugin seems to find the first .eslintrc.js and use that as the root file.
This seems to have turned out to be related to the eslint plugin in nvim-lsp. More here https://github.com/neovim/nvim-lspconfig/issues/2400
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'
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
I have an angular 2 project that lives in a directory:
/c/users/batcave/first_project.
In that direcotory I have my app folder, index.html, systemjs.config.js ..etc, and node_modules folder but ONLY with #types and typescript. This means my #angular and other dependencies live in another directory: /c/users/dep/node_modules.
I have updated my systemjs.config.js file to look in this different directory on runtime but my question is for compilation. How do I tell tsc to not look in the node_modules folder it's currently in but to look in a specified external directory: /c/users/dep/node_modules?
I tried setting the baseUrl setting in tsconfig.json but no luck. Since tsconfig lives in /c/users/batcave/first_project, I tried to set the relative path for the external nodes_module to ../../dep/
I do not have setup like this. But what you need is probably include:
// tsconfig.json
{
"include": [
"/c/users/dep/node_moodules"
]
}