We Keep Coding

How to import file from general path in cypress?

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.

Importing files from different folders in React.js - Relative Path

I am learning React.js, I struggle with relative paths...
Structure of the project,
-Project
-node_modules
-public
-index.html
-src
-p1
-test.json
-give.js
-loan.png
I like to import test.json file in give.js file, How to achieve this,
I tried this format - import test from "./p1/test.json" but it shows error - Module not found
And, I have a doubt, saving media files in public folder is safe or not?, Any hint would be very help full
Thanks

I believe that one way to solve this is to use require.
const test = require("./p1/test.json");
An alternate approach could be changing your JSON file to a js file, and exporting an object.
in p1/test.js
const test = { your JSON };
export default test;

There is nothing wrong with your import statement, you are doing it just fine. The problem is probably with the file type.
You are trying to import a JSON file. Which will not work out of the box with react.
To fix this, convert your .json file to a .js with the structure like so:
test.js
export default { foo: 'bar' }
give.js
import test from "./p1/test"

The relative path you've mentioned is correct.
Rather than using the file type of .json, use .js file extension.
And also make sure that you're exporting the data from your test.js file correctly. For eg.
test.js
export default const test = {
"test": 1
}
give.js
import test from './p1/test'
Saving media files in the public folder is acceptable but we save them in the src folder so that the build system can cache them, which leads to improvement in the performance of the app.

Using realative paths in Angular: Cannot find module

Helloo,
I am trying to import a class from a different component in Angular. But I keep getting error the Error:
Cannot find module './app/_services/modal.service' or its corresponding type declarations.
My import statement looks like this
import {ModalService} from './app/_services/modal.service';
My directory tree looks like this, I am trying to go from the chatcomponent to _services:
src
/app
/_services
/chat-app
/chat/chatcomponent.ts

You should start the import path from src folder src/app/_services/modal.service or you should move back two folders so to reach _services folder ../../_services/modal.service

how to call a component into anther in reactjs

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';

Do not import "index.js" on folder import?

I am wondering if it is possible to re-configure the import behavior (looking for index.js) on importing module folders directly. By default, when you assume this module folder structure:
/components
/Button
/index.js
/style.scss
/Checkbox
/index.js
/style.scss
I can easily import the components like this:
import Button from 'components/Button';
import Checkbox from 'components/Checkbox';
But when I am working on that components, I will have multiple index.js files open in my editor/ide which will lead to confusion very quickly. Same applies for the style files.
What I did now is changing my folder structure to this:
/components
/Button
/Button.js
/Button.scss
/Checkbox
/Checkbox.js
/Checkbox.scss
Which solved that problem and I can see directly where each opened file belongs to.
However, now my component imports look a bit... verbose:
import Button from 'components/Button/Button';
import Checkbox from 'components/Checkbox/Checkbox';
Because obviously, webpack/babel would look for an "index.js" when I am importing a folder directly. Now my question is: can I change that behavior somehow? I'd like to tell webpack/babel that it should try to import a file named the same way as the folder as the index file.
You can re-configure directory indexes on every webserver, so I am hoping the same is possible with webpack/babel but googling didnt show anything up so far.

I went with the following solution:
In each of my folders, I will create a index.js next to the "real" module, that has the follwing content:
import module from './Button.js';
export default module;
This way I am able to keep my code in Button.js but am not required to import Button/Button someplace else.
I created a little script which automates the creation of the index.js files for me, so I don't have any additional work.