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';
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.
I had this error,
Attempted import error: 'LeafletProvider' is not exported from 'react-leaflet'.
when I tried to import LeafletProvider to one of my component file as follows:
import { withLeaflet, MapControl, LeafletProvider } from "react-leaflet";
I believe I have installed the latest version of react-leaflet (v.3.2.2) and have read the documentation as much as I could but I didn't see LeafletProvider in it.
Hope someone could help me fathom what to do with this. Basically, I just want to be able to change between two or more leaflet map tilelayers.
It seems the Provider has to be imported as such:
import { LeafletContext } from '#react-leaflet/core';
and used as :
<LeafletContext.Provider>
according to this page of the documentation:
https://react-leaflet.js.org/docs/core-api/#leafletprovider
Following the documentation in #Ivo's answer, here's what I did:
First install:
npm install #react-leaflet/core
Then import it like this:
import { LeafletContext } from "#react-leaflet/core"
And then use as:
<LeafletContext.Provider>
// enter code here
</LeafletContext.Provider>
I'm getting this error in an index.js file. I'm trying to make a simple react, javascript project using an api as well.
/*
import React from 'react'; // this enables jsx
^^^^^^
SyntaxError: Cannot use import statement outside a module
*/
My code looks like this:
/*import React from 'react'; // this enables jsx
import ReactDOM from '...react-dom'; // this allows us to attach the APP
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'; // this allows front end routing
import Home from './Home';
import Login from './Login';
import Activities from './Activities';
import MyRoutines from './MyRoutines';
import Register from './Register';
import Routines from './Routines';
const PORT = 3000;
const express = require('express');
const { client } = require('./db/client');
const server = express();
function App() {
*/
Method 1
A lot of interfaces still do not understand ES6 Javascript syntax/features, hence there is a need for Es6 to be compiled to ES5 whenever it is used in any file or project. The possible reasons for the SyntaxError: Cannot use import statement outside a module error is you are trying to run the file independently, you are yet to install and set up an Es6 compiler such as Babel or the path of the file in your runscript is wrong/not the compiled file. If you will want to continue without a compiler the best possible solution is to use ES5 syntax which in your case would be var react = require('react'); this can later be updated as appropriate or better still setup your compiler and ensure your file/project is compiled before running and also ensure your run script is running the compiled file usually named dist, build or whatever you named it and the path to the compiled file in your runscript is correct.
Method 2
Add "type": "module" to your package.json
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require.
Method 3
Update node.
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
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'