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.
Related
This is the directory I'm working in:
Now, Auth.js is importing a component from components like this:
import AuthNavbar from "components/Navbars/AuthNavbar.js";
Should'nt it be
import AuthNavbar from "../components/Navbars/AuthNavbar.js";
How is that import even working?
This might be working because your webpack configuration most likely has an alias.
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
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
I saw the next ES6 code:
import '../node_modules/spectre.css/dist/spectre.min.css';
import './styles.css';
what's the meaning of using . .. ... ....
just after
import '
The dots indicate which directory you're starting from.
./index.js looks for index.js in the current directory.
../index.js looks for index.js inside the parent directory.
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.