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)
Related
my purpose to create a collaborative editor with Monaco editor and Convergence. I'm following these repo and example:
https://github.com/convergencelabs/monaco-collab-ext
https://github.com/convergencelabs/javascript-examples/blob/master/src/examples/monaco/monaco-adapter.js
I just import this module
import MonacoCollabExt from '#convergencelabs/monaco-collab-ext';
Then I try to create a new object from a class of this module
const contentManger = new MonacoCollabExt.EditorContentManager({
editor: editor,
onInsert(index, text) {
_model.insert(index, text);
},
remoteSourceId: 'convergence',
});
But I got an error "Cannot read property 'EditorContentManager' of undefined" Seem like MonacoCollabExt is undefined, but I already install it as dependencies and imported it. What is wrong? Thanks!
I found the solution. I used
import { EditorContentManager } from '#convergencelabs/monaco-collab-ext';
Then it's work!
I'm looking to add another property to window. I can do that with this:
// global.d.ts
import { IConfig } from './src/models';
export {};
declare global {
interface Window {
_env: IConfig;
}
}
But then when I try to reference this new property in a different file, it complains:
// src/util.ts
// Property '_env' does not exist on type 'Window & typeof globalThis'.
export const URL = `https://example.com/${window._env.path}`;
But when I combine these into the same file, everything is fine and there are no errors. Is there anyway I can have these in a separate file?
I'm using TypeScript 4.1.2.
I went down a bit of a rabbit hole but found this relevant documentation
I was able to accomplish this exactly as you have written (different type of course) in an existing angular 8 project and svelte project using their existing polyfills.ts files for my global declaration.
Are you sure you tsconfig.json is compiling everything correctly?
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: ...
})
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.
I'm trying to import reveal.js with webpack 2.2 using the imports-loader but I keep getting an error:
Uncaught TypeError: Cannot set property 'Reveal' of undefined
I'm trying to import it like this:
require('imports-loader?this=>window!reveal.js');
That should inject the global window variable as this.
The part of code causing the error is this:
(function (root, factory) {
if (true) {
root.Reveal = factory();
}
})(undefined, function () {
undefined on the last line is being passed into the function as the root parameter.
This code is how webpack is importing the reveal.js library. For some reason it seems like webpack is replacing the word this with undefined when it bundles the code together.
How can I properly import this library with webpack? I've also tried script-loader and I get the same error.
In webpack configuration:
rules: [
{ parser: { amd: false }}
]
This will prevent webpack from defining AMD define variable, which is why reveal.js is triggering that condition in its factory wrapper.
After that I also am importing reveal.js and head.js via
import head from 'headjs/dist/1.0.0/head';
import Reveal from 'reveal.js/js/reveal';
// Reveal.initialize(