Goal : I want to import my reducer.js file into my Payment.js file
Here is my folder structure:
I'm currently using import { getBasketTotal } from '../reducer' in my Payment.js file and I can't seem to get it working.
I know this is probably a simple issue but any help would be appreciated.
if you use '../' it will go one up in your directory, in your case in the components directory. Doing so again will take you to the src directory where 'reducer.js' exists. So the import will be
import {getBasketTotal} from '../../reducer'
Related
I have a react public folder that contains a html file and a simple js file.
Then I have an src folder which is outside the public folder.
When I try to import something into that js file which is outside the public folder :
import OpenIdConnect from '#luigi-project/plugin-auth-oidc';
I get the next error :
Cannot use import statement outside a module
How can I use imports into the public folder?
Normally this means your node project is not setup to use ES Modules by default and is instead using common JS modules.
Without modifying config, in files with this restriction, instead of:
import someVar from './filePath';
// ...
export { anotherVar };
use istead:
const someVar = require('./filePath');
// ...
module.exports = anotherVar;
If you wish to pursue a more consistent solution, I would advice reading though the Node.js documentation and any other documentation relevant to any library/framework/tooling that you use to find a suitable solution.
https://i.stack.imgur.com/uPD57.png
This program is part of'REACT'.
Obviously there is a folder called section, but in'App.js' it says that it cannot be found.
Could you please solve this phenomenon?
The installed plugin is'react-router-dom'.
I haven't installed anything else.
Either you can import your file directly like below
import main from './section/main.js';
Or you can create and index.js file within the section folder and export any function you want.
import main from './main.js';
import content from './content.js';
export { main, content };
And import using the folder
import { main, content } from './section';
I want to use the version number that is configured on package.json into my components on NuxtJS application.
Can this be done?
At the top of your nuxt.config.js file put an import
import pkg from './package.json'
then, inside the same file, insert this part
export default {
...
// https://nuxtjs.org/guide/runtime-config
publicRuntimeConfig: {
clientVersion: pkg.version,
}
}
Now you can use the variable, inside your components with $config.clientVersion
For more details, see the docs at https://nuxtjs.org/guide/runtime-config
im trying to import from a file called "data.json", however I am getting this error: Module not found: Can't resolve './src/data/data.json' in ...src/components/Table'
Anyone know how to help?
My code:
import {data} from "./src/data/data.json";
if Table is folder and you are importing in a file inside it then try this:
import * as data from "../../data/data.json";
if Table is a js file then try this:
import * as data from "../../data/data.json";
I have a number of files in a folder in React. Each of them must be self-initialized. For this, I need to import them. I wouldn’t want to import each file individually. I need to get a list of all the files. But we do not have access to FS on the client. I tried this https://github.com/diegohaz/list-react-files solution, but it does not work (it looks like it somehow uses fs, and gives an error). Can I solve my problem in a straightforward way? Can this be done using the web-pack? Any ideas guys?
Yes, we don't have fs on the client so we need to each file manually.
but there is an easy way of doing it.
Make a registry file where you put the path of file from registry.js relative
{
"file1": "/folder1/sda.png",
"file2": "/folder2/asd.png"
}
Now you don't need to import each file manually
import registry.json
import registry from registry.json
for x in registry {
try {
require(`path to registry/${registry[x]}`)
} catch (e) {
console.log(e)
}