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.

Build package with CSS modules for Next.js

Building a package with UI components using CSS modules. Each component is totally separated from others and includes CSS styles like this:
import css from './styles.css'
const Component = () => {
return (
<div className={css.container}>Hello there!</div>
)
}
export { SearchBar }
In another package based on Next.js I want import a component like this:
import { Component } from '#me/components'
But Next.js doesn't allow Module CSS import from node_modules.
My question is how can I build the component package with CSS transformed into JS. It shouldn't be merged into one file just like Webpack do. Instead it should build each component separately. Also I don't want to import a huge CSS files with all styles merged into single file. Easiest way would be to use CSS-in-JS, but I want to use PostCSS written in CSS files.

Better way to import files for webpack bundle size

hooks/index.js
export { default as useDialog } from './useDialog'
export { default as useCurrencies } from './useCurrencies'
export { default as useUser } from './useUser'
Let's imagine that I have 3 files in hooks folder (useDialog, useCurrencies, useUser) . I want to make the correct imports from this folder. Now I do imports like this :
import {useDialog} from 'hooks'
Is it correct way to import this file , or it is better to import it like import useDialog from 'hooks/useDialog' ? What is better for my bundle size ?

You can try yourself and compare the bundle sizes on production from before and after. I'm gonna explain how to do it if anyone needs it.
First do these steps with the code importing from the index: import {useDialog} from 'hooks'
yarn build
serve -s build
Open the local address (http://localhost:5000/) on incognito mode. Then open Inspect -> Coverage.
At the bottom you can see the size. e.g: 1.2MB of 2.1MB (55%) used so far 964kB unused
Then change your code and import directly from the file: import useDialog from 'hooks/useDialog', and repeat the build and check the size.
Maybe if the files are too small you are not going to notice a difference, but you will if there are any big files or files that imports a big external library.
I tried this comparison on my project and there was one file importing and using moment. I was not even using this component, but the bundle size was increased because I was importing another component from the same index.
Before I was always importing from a folder like 'hooks', but from now on I will always import directly from the file 'hooks/useDialog'.
I'm just sharing my experience! Please, compare the bundles on your own projects!

React - importing files from outside src directory

I am trying to follow along with this Medium tutorial: https://medium.com/#bryantheastronaut/react-getting-started-the-mern-stack-tutorial-feat-es6-de1a2886be50
Others who have tried to follow this have commented that they have the same problem as me, although solutions to this problem are yet to be discovered in that tutorial, and similar problems on SO relate to image files, where the answer is to move the specific file to the src directory.
The problem is referencing the data.js file, which sits at the top level (the same level as the src directory.
When I try to incorporate it in a file, like so:
/CommentBox.js
import React, { Component } from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';
import DATA from '../data';
import style from './style';
class CommentBox extends Component {
constructor(props) {
super(props);
this.state = { data: [] };
}
render() {
return (
<div style={ style.commentBox }>
<h2>Comments:</h2>
<CommentList data={ DATA }/>
<CommentForm />
</div>
)
}
}
export default CommentBox;
an error that says the following results:
Failed to compile.
./src/CommentBox.js
Module not found: You attempted to import ../data which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/.
This SO post has a similar problem: The create-react-app imports restriction outside of src directory, however the solution is to move an image file to the src directory.
Has anyone figured out how to link to a file at the same level as the src directory in a react file? I don't understand what a symlink in the node_modules directory means, and I can't find a tutorial for how to make one.

I recommend you simply put the data.js file inside your src/ directory. It's just mock data, right? It should be part of src for your development. Just do it and get through the tutorial. That's all. If you really were dealing with a production app, you would have ejected the app to have more flexibility over its whole configuration and thus would be able to eliminate that restriction.

Webpack CSS filename in JS file

I am writing a React app with create-react-app which uses Webpack and the extract-text-plugin to generate bundled js and css files. Now I would like to know the filename of the generated CSS file in my JS file, like so:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
{fileNameOfMyGeneratedCssFileHere}
</div>
);
}
}
export default App;
Is that even possible, maybe with a custom loader or Webpack plugin?
edit To clarify: create-react-app is not the problem here, I can eject it or create a custom configuration. My problem is how to know the CSS file name(s) from inside a JS script.