Develop Reference

Why Would You Import CSS Files in a JS File?

I'm really confused by this file index.js:
import Cookies from 'js-cookie';
import createHash from 'sha.js';
import Evaporate from 'evaporate';
import SparkMD5 from 'spark-md5';
import './css/bootstrap-progress.css';
import './css/styles.css';
...
Why would you import a .css file in a .js file? I've never seen this before. Is this common? What does it allow you to do?

The repository appears to be using Parcel. See
Parcel's docs on CSS:
Parcel includes support for CSS out of the box. To add a CSS file, either ... ... or import it from a JavaScript file:
import './index.css';
What it will do is, if that JavaScript module is included, when the module is imported, it will insert the CSS (from that ./css/styles.css path in the source code) onto the page. It's not a native JavaScript functionality of ES6 modules - it's something that a bundler (like Parcel, or Webpack, etc) manages. When bundling, the CSS text will be turned into a JavaScript string somewhere in the resulting bundle, and then put onto the page with something like
const style = document.createElement('style');
document.body.appendChild(style);
style.textContent = `<CONTENT OF IMPORTED CSS>`;

Why can't Next.js import files under a folder

Module not found: Can't resolve 'components/layout's Codes\nextjs-blog\pages\posts'
> 1 | import Layout from 'components/layout'
2 | import Link from 'next/link'
3 | import Head from 'next/head'
Ok so this is the error message I'm getting what's going anyone have an idea
I have my components folder under nextjs-blog and the js file that gives the error is under posts
I didn't give much info because I'm new to Next js and don't know what anyone would need
it doesn't work if I do
import Layout from '../components/layout'
Desktop/Marti's Codes/nextjs-blog <- this is the path to basic nextjs folder
I've changed almost nothing to the folder in code and files
I have added components folder in the basic folder and in components I have two files :
layout.js
layout.module.js
then in pages I have posts folder and in there first-post.js
which is the file importing the layout files from components

It should be
import Layout from '../../components/layout'
Thanks to juliomalves for the answer

You need to use relative path to import components i.e. ../components/layout.
To use absolute imports like components/layout, we setup aliases like below in jsconfig.json.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/components/*": ["components/*"]
}
}
}
and use like this
import Layout from '#/components/layout'
Refer: https://nextjs.org/docs/advanced-features/module-path-aliases

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.

How to reference a directory in javascript

I am trying to access a specific directory in javascript. I tried to have access to it using require keyword as shown below
const path = require('../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/');
but when i run the code i get the following error:
Error: Cannot find module '../../var/opt/personal/guest/op/op_12201/data/persGuesOapDataFolder00/'
please let me know how import or to use a directory in javascript

You can't possibly just import a directory unless there is index.js file within it. And in that index.js file, it should at least contain:
index.js:
import Foo from './Foo.js'
import Bar from './Bar.js'
export {
Foo,
Bar
}
And then you can finally import it:
import {Foo, Bar} from '../../components';

When you point to a directory without specifying the file, the index.js file is imported. I do not think it's possible to import an entire directory. If you want to import all the functions of a directory, you can create an index.js and explicitly export them.
See: node.js require all files in a folder?

you can do this in two different way
consider the following folder structure
-- app/
|- asset/
|- user.js
|- main.js
here main.js you can import the user.js in this way import user from '../asset/user'
other way is installing dotenv using npm i dotenv --save and following way
require('dotenv').config();
import user from './asset/user

React & Jest: Cannot find module from test file

Setting up a Jest test ('App-test.js') for a Redux action ('App.js') in a directory app/__tests__:
Here's the header of App.js:
jest.unmock('../../modules/actions/App.js')
import React from 'react'
import ReactDOM from 'react-dom'
import TestUtils from 'react-addons-test-utils'
import * as App from '../../modules/actions/App.js'
In app/ there is a module config.js. This is being imported where it is needed.
The problem is, when I run my Jest tests, such as App-test.js, it is looking for config and not finding it:
FAIL __tests__/actions/App-test.js
Runtime Error
Error: Cannot find module 'config' from 'User.js'
And User.js is importing config like so:
import config from 'config'
User.js is another action being used App.js.
Any ideas?

You should specify the module location, otherwise Node.js will try to guess the location for you, like:
node_modules/config.js
node_modules/config/index.js
node_modules/config/package.json
The problem in your code is the assumption that node will look for the file in the desired location, as you can see in the algorithm I provided in the previous lines.
To fix the issue you have to specify the location inside your User.js file, for example, check the hypothetical file organization:
/
/config.js
/app
/app/User.js
Then, you'd import inside User.js:
import config from '../config.js'
The file config.js is relative to User.js, located in the parent directory.