Develop Reference

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 ?

How do I manually include "#material/drawer" into my component?

I am trying to manually include the #material/drawer npm package into my Ember app. I tried following this guide but I'm running into some weird errors in my Chrome dev console:
Uncaught SyntaxError: Unexpected token *
Uncaught ReferenceError: define is not defined
The first is from the imported node_modules/#material/drawer/index.js file and the second is from my generated shim.
My component code:
import Component from '#ember/component';
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '#material/drawer';
export default Component.extend({
init() {
this._super(...arguments);
const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
}
});
In my ember-cli-build.js:
app.import('node_modules/#material/drawer/index.js');
app.import('vendor/shims/#material/drawer.js');
My generated shim:
(function() {
function vendorModule() {
'use strict';
return {
'default': self['#material/drawer'],
__esModule: true,
};
}
define('#material/drawer', [], vendorModule);
})();
What exactly am I doing wrong? It almost seems as though raw ES6 code got imported rather than compiled into my JS build output.
I also read this SO post but there are too many answers and I'm not sure which to do. It seems this specific answer is what I'm trying to do but not verbatim enough.

Creating a shim only ensures that ember-cli gets an AMD module, which you then can import in your app files.
If the npm package needs a build or transpiling step beforhand, this won't work.
You need a way to get the package build within the ember-cli build pipeline.
Luckily there are addons which can take care of this for you: ember-auto-import and ember-cli-cjs-transform.
You may have also heard of ember-browserify, which does the same thing, but it's deprectaed in favor of ember-auto-import.
I'd suggest you try ember-auto-import:
ember install ember-auto-import
You then should be able to import as you tried:
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '#material/drawer';
No shim or app.import needed, as ember-auto-import will take care of this for you.

Custom Uppy Plugin

I'm trying to make a custom Uppy React plugin but I'm getting the following error
'TypeError: Cannot call a class as a function'
import Plugin from 'uppy/src/core/Plugin';
export default class DropZone extends Plugin {
}
I am then consuming the component as follows:
import React from 'react';
import Uppy from 'uppy/lib/core/Core';
import DropZone from '../DropZone';
const uppy = new Uppy({ debug: true });
uppy.run();
export default class FileManager extends React.Component {
render() {
return (<DropZone uppy={uppy} />);
}
}
I've cut down the code for simplicity. I looked at the implementation of the uppy DragDrop plugin and followed its implement but still get the same error.
Has anyone had experience writing a react plugin for Uppy? as I'm lost as to how I can resolve this error.
Thanks

I've successfully created a plugin using the following import statement:
import { Uppy, Plugin, PluginOptions, UppyFile } from "#uppy/core";
It's not clear from your question whether you're using the npm package or have downloaded manually, but in my case I installed Uppy using:
npm i #uppy/core

First of all, in your "DropZone" plugin, you'll need to implement at least the install() and uninstall() methods (those get called by uppy).
Second, if you want to tell uppy to use your plugin, you need to do something like:
const uppy =
new Uppy({ debug: true })
.use(DropZone)
.run();
I suggest simply looking at the source code for other plugins to understand how they work, there are different kinds of Plugins - Providers for files management, GUI plugins for display in the Dashboard, etc...
Hope this helps

ReactJS - How to set property on window?

I've encountered an unfamiliar scenario. In my React project, I imported a 3rd party vendor api file. However, the vendor api makes internal calls using the Q promise library, which is not included. The api expects window.Q to be set and is a direct dependency of the api. I can't seem to figure out how to set this on window properly so that when I import the vendor file at the top of my source file and use it, it doesn't throw this error:
TypeError: undefined is not an object (evaluating '$q.defer')
global-variables.js:
Note: I imported the vendor library in this file because ds is a global variable created in the file for the consumer to make calls with.
import '../../vendor/vendor-library';
const globals = {
DATA_SERVICE: ds,
};
export default globals;
user.js:
import globals from '../globals/global-variables';
const userApi = {
getCurrentUser() {
return globals.DATA_SERVICE.getDataForCurrentObject('User', 'ID');
},
};
export default userApi;
I tried doing this at the top of my project entry point but it didn't solve the problem:
index.js:
import q from 'q';
window.Q = q;
Any help would be greatly appreciated.

I would recommend using an extension provided by either webpack or whatever other bundler you are using to bundle your javascript to provide Q as a global.
In webpack this can be done with the webpack.ProvidePlugin
Example:
module.exports = {
module : {
...
},
plugins : [
new webpack.ProvidePlugin({
Q: "q",
"window.Q": "q",
}),
],
};
In this case "q" is the name of the Q library from npm, which you would have to add as a dependency to your project.

How to import Parse JS sdk into ionic 2 beta

am trying to import JS sdk into ionic 2 app, but i keep getting parse is undefined
In ionic 1.x ,parse js sdk is loaded via
<script ..parse.js </script>
and exposed as a global var, how do import in ionic 2 ,am using the npm module ,and tried
import * as parse from 'parse'

Do npm install parse --save in your project directory
Then import parse using
import { Parse } from 'parse';
It is better to create an parse provider.
You can use this starter template as a guide. It is a simple GameScores application in ionic to get you started.
https://github.com/Reinsys/Ionic-Parse
It shows how to create and read data from parse server. I also includes paging with ion-infinite-scroll scrolling.

After searching for a solution I came up with my own.
After installing the package and the typings, I opened the index.js of the node-module ionic-gulp-scripts-copy and added 'node_modules/parse/dist/parse.min.js' to the defaultSrc array.
Then, in my index.html, I included the script above the cordova.js.
Now I just need to declare var Parse: any; in every Component I want to use the SDK in.
For example, in my app.ts:
import {Component} from '#angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
import{LoginPage} from './pages/login/login';
declare var Parse: any;
#Component({
template: '<ion-nav [root]="rootPage"></ion-nav>',
})
export class MyApp {
private rootPage: any;
private parse;
constructor(private platform: Platform) {
//this.rootPage = TabsPage;
this.rootPage = LoginPage;
platform.ready().then(() => {
console.log("Platform ready!");
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
Parse.initialize('myStartUp', 'someKey');
Parse.serverURL = 'http://localhost:1337/parse';
});
}
}
ionicBootstrap(MyApp);
I do not think this is the way it should be used, but in the end I can use the SDK pretty easy and without much lines of implementation code.