Develop Reference

Creating File Template in Intellij with importing files relativly

I'm trying to build a file template for a react component for my team at work.
I have built the file template according to what Intellij offers, but I get stuck in one thing:
How can I import files into my file template, but without knowing where I am regarding the root folder?
We do use absolute imports so I do use it inside my component file, but it doesn't work in my test file and I have something that calls AppMock that mocks the behavior of our app, and I can't import absolute on it.
Any solutions will be welcomed, thanks
I tried to look for import files relatively in my file template but I couldn't find anything that matches to my problem
Here is an example of what I talk about:
import { render, screen } from '#testing-library/react';
import user from '#testing-library/user-event';
import React from 'react';
import { $NAME } from './${NAME}';
import { noop } from 'lodash'
import { AppMock } from '../../../../../../config/jest/testHelpers/AppMock';
As you can see, the imports are external libraries, except AppMock because we don't work with absolute imports in test files, and because of that I didn't find a way to create a file template for test file.

How to customize the initial path to the route of the folder in react?

When I am doing import of different files I have to be very careful on the folder nesting where do I call the imports.
I know that it is possible to set a generic variable path to import files directly pointing at the route of my SRC folder, but I never done it and I am just unable to find the information on the web about it on how to configure it (every search come around react-router which is not what I need). Could someone explain me how to make it happen:
import dataJSON from "../../data/data.json";
import IconPath from "../../assets/svg/icons.svg";
become something approximate like
import dataJSON from "{myRoute}/data/data.json";
import IconPath from "{myRoute}/assets/svg/icons.svg";
so that I don't have to worry all the time to think about nest depth when I code and organise my components in folders.
Thank you!

For Javascript :
Create a jsconfig.json file in the root of your project with the following content:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
For Typescript:
You already have tsconfig.json file in the root of project. Just need to add baseurl setting in compile options key.
{
...//other ts config
"compilerOptions": {
..., // other complie options
"baseUrl": "src"
},
...//other ts config
}
Here baseUrl is what we're adding into compileoptions.
after adding this file and configuration you can import files as following.
Before:
import Component1 from '../../../../Components/Component1'
After:
import Component1 from 'Components/Component1'
Anything you import will be absolute imports from src folder.
Hope this is what you're looking for.

Alternatively, you can let your IDE do the work for you (importing and moving files around). The gif below is WebStorm, I believe MS Code does it too.

You can use babel-plugin-module-resolver.
This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like import dataJSON from "../../data/data.json";, you can write import dataJSON from "data/data.json";. It will allow you to work faster since you won't need to calculate how many levels of the directory you have to go up before accessing the file.
Install the plugin
npm install --save-dev babel-plugin-module-resolver
or
yarn add --dev babel-plugin-module-resolver
Create a jsconfig.json file and use the code.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": [
"src"
]
}
That's it.

How to get rid of React Select Import Error?

I'm trying to use the select input tool for ReactJS (https://react-select.com/home#getting-started) so I can have a filter/search bar on my website. I copied and pasted the code from the link above into a new file in my src folder. At this point I had no errors, but when I import this filter file into my App.js file and run it, I get the following error:
Module not found: You attempted to import ../data which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Here are the imports for the filter file:
import React, { Component, Fragment } from 'react';
import Select from 'react-select';
import { colourOptions } from '../data';
import { Note } from '../styled-components';
The rest of the code is in the link above (I used the Single search, the first one that comes up). I've looked up several things and can't seem to figure out how to get rid of this error!
[EDIT] I don't even know where this data file is in my project or my computer. I've searched for it and I have a million data files, so I'm unsure of what to bring into my src folder. I'm also having the same problem with the styled-components import. When I search for that on my computer, nothing comes up.

import { colourOptions } from '../data';
The above import seems to be incorrect. You might have want to import the from the data.js which is in the same directory as of your App.js.
import { colourOptions } from './data';
This can help you solve the error. Also make sure the data.js file is in the same directory as of App.js.

Module not found - React

I'm trying to import a css file in the previous folder,i.e src folder, before the one that the component is in but it keeps on bringing this error, Please what am I doing wrong
Failed to compile
./src/components/LoginComponent.js
Module not found: Can't resolve './src/styles.css' in 'C:\Users\Iruene Adokiye\app-react\src\components'

To import src/styles.css from your component located at src/components/LoginComponent.js, you have to import from one directory up:
import `../styles.css`;

if your project structure is like this:
- src/
- components/
- LoginComponent.js
- style.css
Then inside your LoginComponent use:
import from '../styles.css';
or named import
import styles from '../styles.css';
.. means "above" folder.
. means same folder.

Vuejs, import component file issues

I have a files structure issue that I am trying to fix when referencing components into other components as imports.
The current files setup I have looks like this...
I am working on the file called security_passphrase.vue and within that file I reference 2 files to import as I need to use them there.
import dropdown from '../components/vue_form/dropdown.vue'
import formbutton from '../components/vue_form/form_button.vue'
The compiler cannot find the modules I am trying to load.
Error: Cannot find module '../../components/vue_form/dropdown.vue' from 'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
Error: Cannot find module '../../components/vue_form/form_button.vue'
from
'C:\wamp64\www\merchant-backend-new\merchant-backend\resources\assets\js\components\vue_form\concertina_form'
I have tried different ways to make this work but no success. The files I am trying to import are outside of the folder where the file is I am working with.
/concertina_form/security_passphrase.vue /vue_form/form_button.vue
/vue_form/dropdown.vue
Help will be great :)

import dropdown from '../dropdown.vue'
import formbutton from '../form_button.vue'
Should be the correct way to import these files, using ../ goes down one directory which will take you from the concertina_form directory to the vue_form directory.