PIXI undefined when import into react component - reactjs

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

Related

'LeafletProvider' is not exported from 'react-leaflet'

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>

Import React statement syntax error creating a problem

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.

Show package.json version on NuxtJS application

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

Invariant Violation using react-native-svg

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.

How to use D3 json or csv with React component.

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

Resources