Normally I write like below, when it comes to D3.
var q = d3.queue()
q.defer(d3.json, "/data/tokyo.json")
.defer(d3.csv, "/data/city_name.csv")
.await(mainFunc);
function mainFunc(_error, _json, _csv){
.....
}
However I have no idea how to write code in React Component.
It should be imported like this.
import {queue} from 'd3-queue'
import {json} from 'd3-json' // <- There is no npm package.
import {csv} from 'd3-csv' // <- There is no npm package.
var q = d3.queue()
q.defer(json, "/data/tokyo.json")
.defer(csv, "/data/city_name.csv")
.await(mainFunc);
However there are no npm module like d3-json and d3-csv.
How can I write code?
You import the name queue but then you don't use it anywhere. Instead you use the name d3 which you did not import at all. The npm package you are searching for is d3-request:
import {queue} from 'd3-queue';
import {json, csv} from 'd3-request';
Related
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 searched about ［How to use qs in react］ but can't find the answer.
Qs's official site https://www.npmjs.com/package/qs
Usage
qs = require('qs');
var assert = require('assert');
var obj = qs.parse('a=c');
assert.deepEqual(obj, { a: 'c' });
var str = qs.stringify(obj);
assert.equal(str, 'a=c');
But I never see require() used in react.
Does anybody know this answer?
I need this for passing array parameter in axios.
You don't have to uninstall #types/qs from your project. The correct solution is to use:
import * as qs from 'qs'
This solved my problem
npm i --save-dev #types/qs
Just a quick note, in case someone reaches this thread from 2022 on.
Using this syntax works flawlessly on both React.js v18+ and Next.js v12+
import qs from 'qs';
I had this identical problem in my React.
This would work:
const qs = require('qs')
This wouldnt work:
import qs from 'qs'
I solved it by deleting the "#types/qs" section from my package-lock.json, then running
npm install
Run:
npm install qs
In your script, use:
import Qs from "qs";
I have the following error when I try to use react-native-svg:
I use react-native-svg like this in my code:
and I call the component like this
import BarChart from './BarChart'
// ...
I am using react-native-svg : 9.13.3 and expo : 36
I installed react-native-svg with expo install react-native-svg and I already try to relaunch with reset cache.....
save me please lol
have a nice day !
The issue is most probably coming from how you import your Svg.
From the documentation I found if you are using Expo, then you need to import as:
/* Use this if you are using Expo */
import * as Svg from 'react-native-svg';
const { Circle, Rect } = Svg;
Instead of your example:
import Svg, { Circle, Rect } from 'react-native-svg';
See under Usage section.
I have installed pixi : yarn add pixi.js
I import PIXI from pixi.js and i have no error.
But if i try to log "PIXI" and i got "undefined".
Any clue ?
Thanks
try: import * as pixi from 'pixi.js';
Why is this needed:
import a from b; reads the default exported value from b; this means b package should have done export default value;
if you want an specific property or method from the package you can also do import { methodName } from b;
pixi.js do not have the default exported , pixi.js will register the PIXI into Globel, you only need import from 'pixi.js', then you can use window.PIXI, this is what i used