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

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>

Related

React typescript snowpack - can't import .webp

I just started using Snowpack for a React/Typescript project and initialized it with: https://www.npmjs.com/package/#snowpack/app-template-react-typescript. It looks very promising but I get an error [#snowpack/plugin-typescript] Cannot find module '../../dummy.webp or its corresponding type declarations when trying to import a .webp image. Somebody an idea how to get it working without using #ts-ignore?

Just found the solution. You need to add the following lines in types/static.d.ts:
declare module '*.webp' {
const ref: string;
export default ref;
}

Cannot find file: 'index.js' does not match the corresponding name on disk: '.\node_modules\Victory\es\victory'

I was trying to represent csv data using chart on react.
I have no clue about the error occurring.
I have installed d3 as well as victory.
My code
Error occurring

Try to replace
import { VictoryBar, VictoryChart } from "Victory";
By
import { VictoryBar, VictoryChart } from "victory";

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.

PIXI undefined when import into react component

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

react storybook addon knobs not showing

I cant seem to be getting the #storybook addon knobs working? It doesnt seem to be decorating the actual story. Pretty much followed this
My code below.. Im using getstorybook with create-react-app
Using below packages:
#storybook/addon-actions": "^3.1.2,
#storybook/addon-info": "^3.1.4,
#storybook/addon-knobs": "^3.1.2,
#storybook/react": "^3.1.3
my setup
//.storybook/addons.js
import '#storybook/addon-knobs/register'
//.config
import { configure, setAddon, addDecorator } from '#storybook/react';
import infoAddon from '#storybook/addon-info';
setAddon(infoAddon);
function loadStories() {
require('../stories');
}
configure(loadStories, module);
//stories/index.js
import React from 'react';
import { withKnobs, text, boolean, number } from '#storybook/addon-knobs';
import { storiesOf } from '#storybook/react';
const stories = storiesOf('Storybook Knobs', module);
// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);
// Knobs for React props
stories.add('with a button', () => (
<button disabled={boolean('Disabled', false)} >
{text('Label', 'Hello Button')}
</button>
))
This should be a no brainer, but no suck luck.

Hope this helps someone, but for some reason my addons panel suddenly disappeared from view and I couldn't figure out how to get it back. I could see the addons markup being rendered in the "elements" pane in my dev tools - so I knew things were working. Somehow storybook stored a bad value in my localStorage['storybook-layout'] so that the addons were positioned waaaaayyy off screen. Running the following fixed it.
localStorage.removeItem('storybook-layout')

You probably need to create the addons.js file on the storybook config folder. (By default .storybook).
Check the Docs for knobs you need to add the following:
import '#storybook/addon-knobs/register';

Hitting D on your keyboard toggles the layout // Ray Brown
or
You should also be able to expand the sidebar by clicking and dragging on the right side.

Try removing all the query string on the url
eg. http://localhost:6006/?knob-is_block=false&knob-Disabled=false&knob-disabled=false&knob-Style%20lite=false&knob-show=true&knob-Size=md&knob-readOnly=false&knob-Style=default&knob-icon%20name=vertical&knob-Label=Hello%20Button&knob-Active=false&knob-is_loading=false&selectedKind=Button&selectedStory=default%20style&full=0&addons=0&stories=1&panelRight=0&addonPanel=storybooks%2Fstorybook-addon-knobs
to http://localhost:6006
This worked for me.

In Storybook 6.5 I was facing the same issue after manually adding the addon:
npm i #storybook/addon-knobs --dev
All I needed to do is to go to the main.js file inside the .storybook folder and add the following:
"addons": ["#storybook/addon-knobs"]
Then I stopped the already running storybook in the terminal using ctrl/cmd + c and then re-run the storybook:
npm run storybook
Hope it helps. Thank you.

Resources