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.
Related
i want to have a javascript file accessible using url.
like i have myfile.js and i want that file to apear on localhost:3000/myfile.js
is there any way to do that in create react app or if not how can i do that using webpack? CopyWebPackPlugin should work? by the way i want to use es module like import thing in that file so i guess i can't have it inside public folder but its fine if i get the compliled one by webpack.
or if there is some other way of doing this would be very much helpful.
Exporting from one file index.js like this: export const categoriesObj = new Object(); and trying to import from another index.js file like this: import { categoriesObj } from "../app/index.js";, but I get an Uncaught ReferenceError: (variable from the other file) is not defined because instead of just importing the categoriesObj, I think is importing the whole file.
Currently I'm using webpack and babel. Both index.js files have separate bundle files. The folder structure looks like this:
dist
bundle1.js
bundle2.js
src
app
index.js
history
index.js
What I have tried is:
Add "type": "module" in package.json file.
Added babel-loader. Thought it was some problem with ES6 modules.
renamed ../app/index.js to index.mjs.
What I'm trying to do is to import an object which is generated in another file so I can use it on this other file.
Hope this makes sense. I've been stuck in this for days. Thanks for reading!
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.
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 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.