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
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>
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 am trying to include a css file in my main storybuild during development. Just like we do in normal HTML file, (could be in js way too).
For rest of the packages/components I am using styled components but want to import one at global level too.
I tried in importing webpack but didn't succeed.
Expectation:
The mentioned css file (placed in public) should be available in browser during development.
Edit 1:
Following this repo as boilerplate.
https://github.com/serhii-havrylenko/monorepo-babel-ts-lerna-starter/blob/master/README.MD
Add this to your App.js or main.js
var env = process.env.NODE_ENV || 'dev';
if(env === 'dev') {
import '../path_dev_style.css';
}
I installed the cordova-plugin-sqlserver library in the following address.
https://www.npmjs.com/package/cordova-plugin-sqlserver
But I do not know how to import it into the project.
Eg.
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { BaglantiProvider } from '../../providers/baglanti/baglanti';
import { SqlServer } from 'what shall i write ???????? ';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
constructor(public navCtrl: NavController, public baglanti : BaglantiProvider) {
}
test(){
SqlServer.init("192.168.0.120", "SQLEXPRESS", "sa", "01234567", "dinademo", function(event) {
alert(JSON.stringify(event));
}, function(error) {
alert(JSON.stringify(error));
});
}
}
If you installed the plugin correctly (ionic cordova plugin add https://github.com/SergioDosSantos/cordova-plugin-sqlserver.git
), you should have access to the object via a global variable called SqlServer. You cannot import it as a module.
Because there is not type definition for that object you cannot call it directly (like window.SqlServer): TypeScript will complain that it doesn't exist.
You must at least declare it first (above the #Component decorator):
declare var SqlServer: any;
Now you can use it in your component but you will not benefit from TypeScript: no completion, no checking. For that you would have to create a type definition file.
the correct way to reference it from inside the code is:
(<any>window).SqlServer
1) Inside your project, open "config.xml". This will bring you to a tab with options down the side (see image below for reference).
Use the side option "Plugins", then click "Custom" out of the "Core / Custom / Installed" pages.
2) Select "Git" as your method to retrieve the plugin - it may ask you to install git, just install as normal - you'll need to save your project and close down visual studio in order to install it. Once it's finished, open your project and browse to the same location.
This time, you'll see the option "Enter a Git repository location for the plugin you want to install", as seen in the image below.
Enter this URL:
https://github.com/SergioDosSantos/cordova-plugin-sqlserver.git
Click the little arrow button to the right hand side of the textbox "-->" and it will install the plugin.
Image of the screen after a successful installation:-
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.