Develop Reference

Svelte error after build in console: 'App is not defined'

I am developing an application using Svelte with Rollup and I ran into such a problem that when I compile it gives me a warning about the absence of App:
No name was provided for external module 'C:\...path...\App.svelte' in output.globals – guessing 'App'
The console displays at startup:
Uncaught ReferenceError: App is not defined
at main.js:5
My Rollup config:
Pastebin
main.js:
import App from './App.svelte';
const app = new App({
target: document.body
});
export default app;
Thanks for answers!

The issue is with the external setting in your Rollup config. You are passing a builtins function from rollup-plugin-node-builtins. Since this function returns a truthy value, Rollup assumes that every module you import is external.
The external key accepts either an array of module names, or a function which takes the module name and returns true if it should be treated as external.
See the Rollup documentation on external.
You need to pass an array here with the modules you want treated as external. Are you intending to pass a builtin-modules import here instead? I found this example in the rollup-plugin-node-resolve README.
import resolve from 'rollup-plugin-node-resolve';
import builtins from 'builtin-modules'
export default ({
input: ...,
plugins: [resolve()],
external: builtins,
output: ...
})

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.

Webpack external JS file not defined when loaded in Vue.js 2 component

I need to include a function from an external JS file in a Vue.js component. I've referenced this answer to figure out how to load the external file in my webpack config. My current setup looks like this:
webpack.dev.conf.js
const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
[...]
new HtmlWebpackExternalsPlugin({
externals: [{
module: 'iframeresize',
entry: 'https://[...]/iframeResizer.min.js',
global: 'iframeresize'
}]
})
index.html
<script src="https://[...]/iframeResizer.min.js"></script>
.vue component
import { iFrameResize } from 'iframeresize'
export default {
name: 'FMFrame',
mounted () {
iFrameResize()
}
}
However, I'm getting an error from vue-router now.
[vue-router] Failed to resolve async component default:
ReferenceError: iframeresize is not defined
[vue-router] uncaught error during route navigation:
ReferenceError: iframeresize is not defined
Is there a step I'm missing in loading the function from the external file? I can use the function when loaded directly from index.html, but then I get a warning that the function is undefined as my webpack config seems to be ignored.

I believe this is happening because you are using a "named" import. (e.g. with braces)
If you are going to use braces then the the named import must contain an export.
import {foo} from 'foo'
then foo.js should contain
export const foo = ...
So in your case you need to use a default import without the braces which will automatically get included in the export default statement.
Simply use the 'default' import syntax.
import foo from 'foo'
Not really all that important but just to help understanding, a default import can actually be imported with braces by using the special name default
import { default as foo } from 'foo';
Further if a module has several named exports in it you can import them all and then refer to them by property.
import * as foo from 'bar'; // has two named exports doThis and doThat
//reference the named exports later with..
foo.doThis();
foo.doThat();

One problem could be the import expression, change with:
import iFrameResize from 'iframeresize'
UPDATE: just reproduced the problem and the above import works correctly.
NOTE Also remember to instantiate the plugin HtmlWebpackExternalsPlugin after your instance of html-webpack-plugin (see the Usage section of the docs)
this is the plugin configuration that I've used (change the global option value):
new HtmlWebpackExternalsPlugin({
externals: [
{
module: 'iframeresize',
entry: 'https://<url_path>/iframeResizer.js',
global: 'iFrameResize'
}
]
}),

Angular CLI How to Globally define a variable [window.myVar]

I'm trying to use a module that depends on another library, whenever i tried to register the library in a component i gives me an error in the console :
Cannot read property 'imports' of undefined
The module name is: quill-image-resize-module
The library is: quill editor.
quill is an html editor.
MyComponent.ts:
import Quill from 'quill';
// add image resize module
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);
The error appeared in the console is:
image-resize.min.js:1 Uncaught TypeError: Cannot read property
'imports' of undefined
when i tried to investigate image-resize.min i found this is what causes the error:
var d=window.Quill.imports.parchment
Now i'm using Angular CLI, i found a working solution but the solution is working with webpack.config.js by declaring this in plugins array:
new webpack.ProvidePlugin({
'window.Quill': 'quill/dist/quill.js'
})
which in turns declare window.Quill Globally.
i'm not sure how to do this in CLI, but i tried to follow some articles by
declaring :
"../node_modules/quill/dist/quill.js"
in angular-cli.json file in the scripts array.
but the error is not gone?

myComp.ts
import * as Quill from 'quill';
import ImageResize from 'quill-image-resize-module';
ngAfterViewInit(){
window['Quill'] = Quill;
window['Quill'].register({'modules/imageResize': ImageResize});
this.quillObj = new Quill(this.textEditorDiv, {
debug: 'error',
modules: {
ImageResize: true,
toolbar: options
},
theme: 'snow'
})};
While angular build ts compiler uses Quill separate instance for register function that causes the issue of undefining so to avoid that use Global singleton Quill obj. (Using Global window object in angular is not good style as per standard)

Using Angular 1.x with TypeScript 1.5 and SystemJS

I'm trying to use Angular 1.x with TypeScript 1.5.3 and SystemJS. The index.html page is set up to System.import('bootstrapper') which should start things up.
bootstrapper.ts gets compiled to bootstrapper.js and works fine as long as it doesn't use angular (i.e. doing just a console.log() works ok)
Now, I'd like to import and use angular to bootstrap it. I've already done jspm install angular and I also installed some typings for angular using tsd. The typings are referenced at the top of the bootstrap.ts file.
Unfortunately doing import angular from 'angular' doesn't compile, I get Module "angular" has no default export. My questions are:
Why doesn't import angular from 'angular' compile? Looking in the angular.d.ts file I see declare module 'angular'{ export = angular; } which, if I understand correctly, is a default export from the module angular of a variable (defined above in the typings file) declare var angular: angular.IAngularStatic
I noticed that doing import 'angular' compiles and then I can actually reference angular and do e.g. angular.module(...), but I don't think I understand correctly how this works. Shouldn't import 'angular' do a "bare import", i.e. running a module only for its side effects? If that's the case, does that mean that this import actually registers angular in the global scope?
I'm pretty sure I don't understand correctly how modules/type definition files work in Typescript, thanks in advance for an explanation.

Firstly, the following is my preferred way to use AngularJS 1.5 with TypeScript and SystemJS:
index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
SystemJS.import('app')
.then(function (app) {
app.bootstrap(document);
})
.catch(function (reason) {
console.error(reason);
});
</script>
app/main.ts
import angular from 'angular';
const app = angular.module('app', []);
export function bootstrap(target: Element | Document) {
angular.bootstrap(target, [app.name], { strictDi: true });
}
tsconfig.json
{
"compilerOptions": {
"module": "system",
"allowSyntheticDefaultImports": true,
....
}
}
config.js (loader config, simplified)
SystemJS.config({
transpiler: "typescript",
packages: {
"app": {
"main": "main.ts",
"defaultExtension": "ts",
"meta": {
"*.ts": {
"loader": "typescript"
}
}
}
}
});
Notes:
If you are using JSPM 0.17 specify "plugin-typescript", not "typescript" for the loader and transpiler or just run $ jspm init and select a transpiler.
The you can import angular as a default, but it will still register itself on the global scope.
The reason you are getting syntax errors is because angular, and its angular.d.ts declaration file contains a CommonJS style export = declaration to allow for module and global namespace based usage. SystemJS, for maximum compatibility, interpolates this into a default export at runtime.
The TypeScript compiler needs to be made aware of this. This can be done by setting "module": "system", and/or specifying "allowSyntheticDefaultImports": true. I have done both for the sake of exposition and explicitness.
If you aren't using jspm, you just need to tell system JS where to find the typescript using map or package config
SystemJS.config({
map: {
"typescript": "node_modules/typescript"
}
});

[...] if I understand correctly, is a default export from the module
angular of a variable
Nope, that's not what's happening. Angular exports the entire namespace as the export, if that makes sense.
import angular from 'angular' is attempting to import the default from the module.
What you want is import * as angular from 'angular'; which imports the entire export as a variable.