how to import js-pagination into aurelia project - javascript

I'm trying to use https://www.npmjs.com/package/js-pagination within aurelia project.
I did au install js-pagination and did check the aurelia.json.
That part was added to vendor-bundle:
{
"name": "js-pagination",
"main": "dist/index.js",
"path": "../node_modules/js-pagination",
"resources": [
"dist/styles.css"
]
}
the ./node_modules/js-pagination and ./node_modules/js-pagination/dist/index.js are in place
I did check the vendor-bundle.js
and it has three lines about js-pagination.
One line is a source of ./dist/index.js
and next two lines are
define("js-pagination/dist/index", [],function(){});
;define('js-pagination', ['js-pagination/dist/index'], function (main) { return main; });
My problem is:
I'm trying to use it inside my module, like
let Pagination = require('js-pagination')
and Pagination is still undefined
I did try with
import * as Pagination from 'js-pagination'
and default property of Pagination module is undefined
import {Pagination} from 'js-pagination'
does not make a show as well
I'm missing something, but cannot realize what exactly.
Please advice.

Related

AG Grid: Add license before export

We use AG Grid. I want to add our license as a side effect before exporting the React component for use, rather than having to add the license every time we use the grid component.
What I tried below doesn't work. I thought side effects would run before import/export if declared like this, but clearly my mental model was wrong. I assume the build tool may affect what happens too, we use Gulp in this particular case.
GridSupport.js (in a design package/repo)
/**
* AG Grid License
*/
import { LicenseManager } from "#ag-grid-enterprise/core";
LicenseManager.setLicenseKey('…some license key…');
// Export below happens, but no license set above :(
export { AgGridReact as default } from "#ag-grid-community/react";
Grid.js (in another package/repo)
import { AgGridReact } from 'GridSupport';
const Grid = (props) => {
// AgGridReact should be usable without printing license warnings to the console
return <AgGridReact {...props} />
}
What should I do instead?
Why not Initialize the license manager at the top level (App.js, or index.js)? it would cover all the encompassing grids.
As a side note: Just make sure to check that you are not mixing packages and modules for the grid when using enterprise package.
The question was edited to clarify that the two files were in two different packages.
We landed on adding the GridSupport.js to sideEffects in our design package/repo. This ensured that the license was set correctly as a side effect before the export happened.
package.json
{
"name": "#ourcompany/design",
"sideEffects": [
"some/path/GridSupport.js"
],
"dependencies": [
"ag-grid-community": "...",
"ag-grid-enterprise": "...",
"ag-grid-react": "..."
]
}

Cannot use newly installed plugins (node modules) in Nuxt pages/components

First off, I'm a beginner with NuxtJS and front-end development in general, so it might be that I'm missing something - though I do believe I went through all the options before posting here. Apologies in advance if that is not the case.
I've been having trouble using installed modules that I've registered as plugins. For example, take mapbox-sdk.
After installing it with npm install #mapbox/mapbox-sdk, which correctly creates #mapbox/mapbox-sdk in node_modules, I register it in nuxt.config.js:
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Of course, I also create the mapbox-sdk.js file in plugins/, containing:
import "#mapbox/mapbox-sdk";
Then, in a page (say, myMap.vue), when I try:
var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
which is the basic usage example in the documentation, I get:
mapboxSdk is not defined
in the console. This behavior extends to every single module I installed today, but is not the case for modules I had previously installed.
The reason why you're getting the error mapboxSdk is not defined is because there are a few issues with the way you've set up this plugin.
Docs here https://nuxtjs.org/docs/2.x/directory-structure/plugins/, they have some useful diagrams.
There are a couple of ways you can use this package.
Plugin
// ~/plugins/mapbox-sdk.js
import mapboxSdk from '#mapbox/mapbox-sdk'
export default (_ctx, inject) => {
// Exposing the mapboxSdk to your Nuxt app as $mapBox.
inject('mapBox', mapboxSdk)
}
Then in nuxt.config.js, same as you've already done.
plugins: [
...
"~/plugins/mapbox-sdk.js",
],
Then in your component myMap.vue
var mapboxClient = this.$mapBox({ accessToken: MY_ACCESS_TOKEN });
Directly in the component:
If you don't wish to use a plugin, the way that #kissu mentioned above https://stackoverflow.com/a/67421094/12205549 will also work.
Try adding this after the import to let Vue know that this method exists (in the same .vue file) at first
<script>
import mapboxSdk from '#mapbox/mapbox-sdk'
export default {
methods: {
mapboxSdk,
},
mounted() {
console.log('mapbox function >>', mapboxSdk)
},
}
</script>
Do you have it working in a .vue component at first ?

Why is element-ui importing the entire library? | Large bundle size

So, I am trying to import a few components from Element-ui on demand, but for some reason it keeps importing the entire library (docs about importing on demand here). See image below.
I already followed this post on how to import individual elements from ElementUI.
I installed the element-ui library with npm.
Then in my main.js file I import components on demand as follows:
import 'element-ui/lib/theme-chalk/button.css';
import 'element-ui/lib/theme-chalk/popover.css';
import { Button } from 'element-ui';
import { Popover } from 'element-ui';
Vue.use(Button)
Vue.use(Popover)
I installed the babel-plugin-component dependency. It uses the following config in .babelrc
{
"presets": [
[
"es2015",
{
"modules": false
}
]
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
I also use the Message function quite a lot. I used to import this in every component I use the function like they have stated in their documentation:
import { Message } from 'element-ui';
But I've read somewhere that that also imports the entire lib. So I changed that to this:
import Message from 'element-ui/packages/message';
But whatever I do, my bundle (and specifically ElementUI) keeps getting bigger...
What am I missing here?

SystemJS, using importmap with module, that needs react

I have created a javascript library with webpack, that outputs a systemjs module. This module has a dependency on react, which I specified as an external.
The resulting javascript file starts like this:
System.register(["react"], function(__WEBPACK_DYNAMIC_EXPORT__) {
var __WEBPACK_EXTERNAL_MODULE_react__;
return { ....
Additionally I have an app, that uses SystemJS during runtime to load that module. In order to provide the react dependency, I have defined an importmap:
{
"imports": {
"react": "https://unpkg.com/react#16.11.0/umd/react.production.min.js"
}
}
And the part, where I import the module, looks like this:
const modulePromise = System.import(MODULE_URL);
modulePromise.then(module => {
console.log('module loaded successfully!');
});
The problem now is, that the console.log is never called, because I get a TypeError, that says, that "Component is not a property of undefined", which tells me, that somehow react has not correctly been passed to my module.
To be precise, in the browser network tab I see, that my module and the react import is indeed loaded, but somehow it is not correctly processed.
Has anyone an idea, what i might be doing wrong?
OK, so eventually I solved this myself, although a bit different.
First, I did not use the unpkg link anymore, but I actually include React as a library in my main app.
And I changed my importmap to:
<script type="systemjs-importmap">
{
"imports": {
"react": "app:react",
"react-dom": "app:react-dom"
}
}
</script>
Also in the main app I use System.set(...) from SystemJs to tell SystemJS where to find the 'app:react' and 'app:react-dom' dependencies:
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'systemjs/dist/system.min';
...
System.set('app:react', { default: React, __useDefault: true });
System.set('app:react-dom', { default: ReactDOM, __useDefault: true });
And now, if I load my module with that external react dependency through SystemJS, it works.

Getting 'Module not found' although file exists

I downloaded the angular starter and ran the app and it ran well. Now I Added a new file "people.service.ts" located in "src/app/services/people.service.ts".
When I try to import it, I get an error:
Module not found: Error: Can't resolve 'services/people.service' in
'/path-to-project/angular-starter-master/src/app'
This is the code I use to import it (in src/app/app.module.ts):
import {PeopleService} from 'services/people.service';
I'm sure that there's no typos because the IDE recognizes it. There isn't any TypeScript error in the entire project. The file 'services/people.service' does contain a class named PeopleService.
Any help will be profoundly appreciated. Please let me know if you need any additional information.
The problem is that you're using absolute path instead of a relative path. Change the import to the following:
import {PeopleService} from './services/people.service';
TypeScript 2.0+
In TypeScript 2.0 you can add a baseUrl property in tsconfig.json:
{
"compilerOptions": {
"baseUrl": "."
// etc...
},
// etc...
}
Then you can import everything as if you were in the base directory:
import {PeopleService} from 'services/people.service';
On top of this, you could add a paths property, which allows you to match a pattern then map it out. For example:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"services/*": [
"services/validation/*"
]
}
// etc...
},
// etc...
}
Which would allow you to import it from anywhere like so:
import {PeopleService} from 'services/people.service';
From there, you will need to configure whatever module loader you are using to support these import names as well. Right now the TypeScript compiler doesn't seem to automatically map these out.
You can read more about this in the github issue. There is also a rootDirs property which is useful when using multiple projects.
OR
You can directly change the absolute path to relative path like this:
import {PeopleService} from './services/people.service';

Categories

Resources