To display the component version in storybook stories I import the version from whatever component's package.json:
import { version } from '#my-foo/abc/package.json';
My IDE complains about this with the following message and I want to know where it is getting packageId from because I could just pull the version from there w/o that import. But, I can't figure out where it is from? Is it like a ts-lint special var and only available in like a ts-lint context or what? Any insight appreciated!
Related
I'm trying out a new way to integrate react-intl with NextJS. I've had a lot of problems with the example from the official repo. Basic translations work. But whenever I navigate to a page with a german translation I see this error:
Error: [#formatjs/intl Error MISSING_DATA] Missing locale data for locale: "de" in Intl.DateTimeFormat. Using default locale: "en" as fallback. See https://formatjs.io/docs/react-intl#runtime-requirements for more details
at new MissingDataError (/Users/**s/Code/hr-tool/hr-nextjs/node_modules/#formatjs/intl/src/error.js:45:23)
at Object.createIntl (/Users/**/Code/hr-tool/hr-nextjs/node_modules/#formatjs/intl/src/create-intl.js:39:17)
at Object.createIntl (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-intl/src/components/provider.js:59:27)
at new IntlProvider (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-intl/src/components/provider.js:79:27)
at processChild (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3305:14)
at resolve (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
at ReactDOMServerRenderer.render (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
at ReactDOMServerRenderer.read (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
at renderToString (/Users/**/Code/hr-tool/hr-nextjs/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
at Object.renderPage (/Users/**/Code/hr-tool/hr-nextjs/node_modules/next/dist/next-server/server/render.js:52:851) {
code: 'MISSING_DATA'
The solution is to add polyfill for the language data as described here. But I'm having problems installing the polyfill. The error message won't disappear. The next docs say to apply polyfills as a top-level import in the app.js file. This did not work. I also tried loading the polyfills asynchronously from getInitialProps (also did not work). I'm quite stuck. Maybe you can help.
I just started experimenting with Nativescript and am using the Playground to test things and see how it works.
What I wanted to do: add the moment.js module for formatting date/time
What I tried:
1. added the moment package. This appears to have worked because Playground now shows the moment folder along with files (package.json, ender.js, moment.js, etc) and subfolders.
2. In my code I used this snippet to require "moment"
var Moment = require("moment");
This failed though because I get an error of
Error: Could not find module 'moment'. Computed path '/var/mobile/Containers/Data/Application/xxxx/Documents/Playground/LiveSync/app/tns_modules/moment'
Any suggestions on what I need to change to get it to find 'moment'? I checked in package.json and it has the name as "moment".
The default require statement will search for the module form the tns_modules directory that was packed with the app during build time. So with Playground you could use relative path.
For example, if you want to use it on app.js which is in the root level,
var Moment = require('./moment');
I installed bootstrap-colorpicker npm package and I'm trying to import to my meteor app.
I did read "Using npm packages" and I tried to use their example: "import moment from 'moment';". but the problem is the there is a hyphen/dash in the middle of the name and it throws an error.
where should I look in the package to know how to import a npm package?
here is what i did:
import bootstrap-colorpicker from 'bootstrap-colorpicker';
Template.Test.onRendered(function() {
$('#m-color-picker').colorpicker();
});
I want the #m-color-picker to turn into a color picker, but it gives me error for the hyphen/dash.
You can use any name you like for the module in your code, eg
import bootstrapColorpicker from 'bootstrap-colorpicker';
or
import colorpicker from 'bootstrap-colorpicker';
Easy as that
For the second part of your question:
Usually the 'getting started' part of the README file should tell you how to import a module, although some older packages only mention how to require a package, which I presume is where you are coming from.
Quite often the default export will be what you need, so for example, referring to the momentjs web site:
var moment = require('moment');
You can usually assume this:
import moment from 'moment';
Basically this is taking the top level object from the module.
Your specific package doesn't seem to export anything, but just has some side-effects (perhaps it monkey-patches itself into jQuery?), so you can even drop the first part of the import and just say:
import 'bootstrap-colorpicker';
You know, I spend more time just trying to get things set up to work with Angular than I do actually developing with Angular. There must be an easier way... :(
Currently, I am using the aspnetcore-spa template, creating a project with the command "dotnet new angular" - this is version 1.0.3, which adds Angular 4.1.2 to the npm dependencies. This works great to get a project running quickly. But now I want to add PrimeNG to take advantage of their form controls. I have been struggling with this all day, and would love it if anyone could provide some assistance.
Here is what I have done in my current effort (the latest of many, starting fresh each time):
1) Added to the package.json file: "primeng": "4.1.0-rc.2"
2) Added 'primeng/primeng' to the webpack.config.vendor.js file's vendor collection.
3) Added the following to my test module (which is in turn referenced in app.module.shared.ts so I can route to it via my RouterModule):
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
And in the html for the module, in an attempt to use the file uploader control, I have (from their site - https://www.primefaces.org/primeng/#/fileupload):
<p-fileUpload name="myfile[]" url="./upload.php"></p-fileUpload>
4) ran "webpack --config webpack.config.vendor.js" from a command prompt at the root of the project folder, which completed with no errors.
Then I hit F5 to run the project, and I got this error:
Exception: Call to Node module failed with error: Error: Template parse errors:
'p-fileUpload' is not a known element:
1. If 'p-fileUpload' is an Angular component, then verify that it is part of this module.
2. If 'p-fileUpload' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. (" type="button" (click)="onclick()" class="ui-button-info" label="Click Me">Click Me</button>-->
So, in an effort to comply, I added a reference to the ngprime module to the app.module.shared.ts file, like this (I don't really know how I should reference the module...):
import { FileUploadModule } from 'primeng/primeng';
But got the same exact error.
What am I missing???
Any help would be most appreciated.
I finally have this working, using the asp-prerender-module to get server-side rendering, and not having to rely on the asp-ng2-prerender-module (see my last comment). The trick, I found, was to reference the FileUploaderModule in the app.module.shared.ts file like this:
import { FileUploadModule } from 'primeng/components/fileupload/fileupload';
rather than like this:
import { FileUploadModule } from 'primeng/primeng';
The reason this matters is that the latter method of referencing will load all other components as well (see explanation here: https://www.primefaces.org/primeng/#/setup), and SOME of the PrimeNG components can not be rendered on the server due to DOM-related references (things like "window", which do not exist on the server). See the discussion here for more on this: https://github.com/primefaces/primeng/issues/1341
This change, combined with the other steps listed in my answer and, of course, actually referencing the directive in app.module (thank you #pankaj !) made everything work correctly at last. Only took me about 7 hours to figure it out. :(
Some modules just seem to be invisible to Flow. For example I have react-native-overlay installed via npm into my node_modules directory but I get a whole bunch of errors like this from Flow:
[js/components/DatePickerOverlay.js:18
18: let Overlay = require('react-native-overlay');
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ react-native-overlay. Required module not found
This module doesn't have types so it would be fine if I could just get Flow to ignore it entirely.
Here's my .flowconfig (based on React Native's one):
https://gist.github.com/almost/20c6caf6d18d0e5c689f
As you can see I'm on flow 0.20.1 and I have module.system=haste (as required by React Native)
I tried adding a //$FlowIgnore comment to the import lines but then Flow complains about an unneeded ignore comment! I also tried creating a react-native-flow.js.flow file with a dummy export which seemed to work at first but then after a flow restart stopped working.
Any ideas for how to either help Flow find this module or make it ignore the import line completely?
Looks like you're ignoring it here: https://gist.github.com/almost/20c6caf6d18d0e5c689f#file-flowconfig-L42-L50
If you don't mind manually typing it up, add a react-native-overlay.js to your interfaces and type up a couple signatures.
This is happening because the library doesn't exist in flow-typed.
A simple fix could be creating the following entry in the .flowconfig file:
[ignore]
<PROJECT_ROOT>/libdefs.js
[libs]
./libdefs.js
If using flowtype < 0.60.0 add in libdefs.js
// #flow
declare module "react-native-overlay" {
declare var exports: any;
}
Or if using flowtype > 0.60.0
declare module 'react-native-overlay' {
declare module.exports: any;
}
Note: any is an unsafe type so you can always take advantage of improve the definition of the library
Hope that helps,