I cannot import mystyle.css file stylesheet.css in react kindly anyone tell me to set the path in react
I want to call myStyles.css file into main stylesheet.js using this
import mystyles from '../components/myStyles.css'
but I received an error form the browser like this
./src/components/Stylesheet.js
Module not found: Can't resolve './src/components/myStyles.css' in 'E:\ReactJS\my-app\src\components'
can anybody tell me how to include this file into my Stylesheet.js file
try: ../ instead of ./
or try placing the file in the public folder and calling from there. I had a similar issue that was helped this way.
you're sure you specified the file path correctly, right ? react js may not automatically select your css file. Make sure you give it the right name.
in the Stylesheet.js file :
import '../components/myStyles.css' // sure you're calling it the right way from the right place
if the problem is still not resolved, we can examine the files as code snipped.
If you want to import css file to the component, you should do it this way:
import './myCss.css';
instead of
import myCss from './myCss.css';
Related
I'm upgrading a React application and have found that I need to modify the import statements to get them to work.
For example, in the old version, the following import works without errors:
import { User } from '../System'
Note that System is a directory on my file system that contains User, a js file that ends with export default User.
In my upgraded version of the app, the System directory still exists, but the above import gives me Can't resolve '../System' in 'C:\my app\.
It turns out that to get the import working properly now, I need to change it to the following:
import User from '../System/User';
If I understand correctly, this relates to js module system changes made with ES6.
My question, though, is regarding the specification of a directory in the import statement (System above). Why would it be that I was previously able to name a file directory in the import statement instead of the actual js script/module itself? Is that approach of using a directory in the import statement still possible? And if so, is it ever advisable?
Update: based on AKX's comment, I noticed the System directory does indeed contain an index.js, which apparently is what makes the import from the directory itself possible.
When an import points to a directory, and only a file, Webpack (which most React setups use) follows Node's's conventions and will attempt to import index.js from that directory if it exists. That's the only condition under which importing from a path that points to a directory works - your previous build probably had /System/index.js (which would allow importing with from '../System'). If you rename the file you're importing to anything else - such as to User.js - importing using only the directory path will fail.
And if so, is it ever advisable?
Sure, if you want. It's a style choice but is commonly done.
I have a file called 'contents' in cypress.
in my test file I want to import this file.
I do the following :
import contents from 'C:/Users/asus/cypress/support/contents';
But I want to make it more general path (not contain my own path).
I tried to import it inside the index file in cypress.
As follow:
import './contents'
But it is not working by this way. Cypress will throw an error that contents is not defined.
Not knowing the data type and assuming that the exact location of the file doesn't matter, I would recommend moving the file to the /fixtures folder and importing it as recommended in the Cypress docs here. So you can use a relative path for the import in your test like:
import contents from '../fixtures/contents';
You can also find an example for importing a JSON file in this answer.
First, you have to export that file
const contents = {
// Your data
}
export { contents };
You can import files like this way
import { contents } from '../support/contents.js'
If ../support/contents.js is not working Please use ../../ to get the root directory of your system like ../../support/contents.js.
Please replace your file extension with .js.
Having the following import done into a test file:
This works fine, but the problem appears when I want to import it into another file, here it is:
What is wrong with this import?
If you're in the components directory already, going up 3 levels takes you to /libs so you don't need the /libs in your path just
../../../shared
By the way - screenshots not so good text better.
Why i think that put my lib in global and access it in different files is a valid choice :
First i have one js file, but my file was getting bigger so i just separate it in two, and now i access to my second file functions with an export of functions.
So why do i have to import one time the lib when im on a single file, but multiple times when i use multiple files
What i want to do
I have an error when i try to use a lib in JavaScript.
For the example i will use 'lib' instead of a real library from js
This is my files
app.js
import lib from 'lib'
console.log(lib)
This is working, but when i add
app.js
import lib from 'lib'
import my_file from './file_path.js'
file_path.js
console.log(lib)
This is not working and i have to import my lib in the new file like
file_path.js
import lib from 'lib'
console.log(lib)
I GET THIS ERROR
Uncaught ReferenceError: lib is not defined
But i don't want to duplicate my import, How can i do it ? thanks
I found a solution who work with window
you just have to add your lib in a window variable like that:
app.js
import lib from 'lib';
window.lib = lib;
import my_file from './file_path.js'
And now you can use your lib in "my_file" without importing it again
PS: thanks to people who help me resolving my issue :)
/!\ You have to be in a node application to use this method /!\
I also find an alternative of the window and import
We can use require like that:
window.lib = require('lib');
Now we just have one line instead of 2
This is the best solution i found so far, don't know if we can do better, let me know
I'm using Firefox 75.0. My file structure looks like this:
A at top of my index.js file, I have :
import "./styles.css";
import ScrollBooster from "scrollbooster";
// go ahead and change some library source code!
// import ScrollBooster from "../libs/scrollbooster";
When I try to open index.html, it logs an error saying: SyntaxError: import declarations may only appear at top level of a module, pointing to the CSS import. If I remove the CSS import, then it throws the same error, this time pointing to ScrollBooster from "scrollbooster";
Why is this happening?
PS : Here's the whole code: https://codesandbox.io/s/scrollbooster-examples-2nn7h?file=/src/index.js
I looked at the code in sand box and dont see any import issues as mentioned in the console
If you're having trouble running it on your local machine I would double check your import path.
By the looks of that sandbox code it's importing based on a path specified for their website. When you import on your local machine just ensure that it's taking the correct path to the files that you've downloaded.
Just like the ./styles.css import is based off of the working folder for your project. The import ScrollBooster from "scrollbooster" could be the problem. When hovering it shows module "/sandbox/node_modules/#types/scrollbooster/index" as the path. Try changing it to an import similar to the styles.css one potentially.
I did not see any errors, like Ajay Reddy, when I checked that code on the link.
The HTML file is a part of npm package. In order to run the server, you would need to start the server through npm.
First, to install all dependencies (required only once), run:
npm install
Then to start the server, run:
npm start
Then from your browser, visit http://localhost:1234