I have a ngDraggable.js library in my node_modules folder which must be included as dependency as follows:
import draggable from 'ngDraggable';
ngDraggable.js doesn't have exports so I used the work around from some SO answer which I cannot find any more. It was suggested to use an index.js file withing the same folder, which would import ngDraggable.js and export it. For some reason this file was lost and I can't remember that 2 lines of code doing this:( I tried this, but it doesn't work at all:
import ngDraggable from './ngDraggable';
export default angular.module('ngDraggable', [ngDraggable]);
Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"default":{"default":{"_invokeQueue":[],"_configBlocks":[],"_runBlocks":[],"requires":[{}],"name":"ngDraggable"}}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
http://errors.angularjs.org/1.6.1/ng/areq?p0=module&p1=not%20a%20function%2C%20got%20Object
at http://localhost:3000/index.js:17216:12
Where 'app' is the main module representing the application and "default" must the module that imports ngDraggable and exposes it for main module
I found the copy of missing file. Here's the code snippet
require('./ngDraggable.js');
module.exports = 'ngDraggable';
you can try
import * as draggable from 'ngDraggable';
Related
I have a project that I'm using Webpack for, and I am trying to use the autocomplete feature of jQuery-UI. However, whenever I import jQuery-UI into my app.js file using `import 'jquery-ui/ui/widgets/autocomplete', it breaks jQuery and I get the error:
Uncaught ReferenceError: $ is not defined.
The problem was fixed when I changed import 'jquery-ui/ui/widgets/autocomplete into require(jquery-ui/ui/widgets/autocomplete) in my apps.js file (or index.js or whatever your entry file for Webpack is).
Again, I have no idea why this works, but it does, and I can't argue with that.
Thanks to https://stackoverflow.com/a/42465244/10757677 for the inspiration.
While trying to import the collection-preview.components.jsx file in the shop-page.jsx, there occurs an error saying:
"Module not found: Can't resolve '../../components/collection-preview/collection-preview'"
URL of the code and the error is shared in the link:
I would like to know what am I missing here and why the files are not getting compiled.
Your file called collection-preview.component but you import collection-preview, just change the name to collection-preview.component, it should work
You could also drop js and jsx ending for files when importing :)
I'm trying to use a WYSIWYG editor (TUI Editor) in my Angular2+ application.
They don't provide an Angular wrapper so I've decided to create my own (based on this wrapper).
Due to some issues using npm install I saved their script file (https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.0/tui-editor-Editor-full.js) in a folder.
I've created a service to create an instance of the editor and it works fine:
import {ElementRef, Injectable} from '#angular/core';
import Editor from '../js/tui-editor-Editor-full';
#Injectable({
providedIn: 'root'
})
export class TuiService {
editor: any;
createEditor(options: object, element: ElementRef): any {
if (options) {
this.editor = new TuiEditor(Object.assign({
el: element.nativeElement
},
options));
}
return this.editor;
}
...
}
Now I wan't to add one of their extension (the table one: https://github.com/nhn/tui.editor/blob/master/docs/using-extensions.md) but I face some issues.
When I add the extension script the same way as I added the editor script file
import '../js/tui-editor-extTable';
I got these errors when building my app
WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor' in 'C:\workspace\src\js'
WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor/dist/tui-editor-Viewer' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'jquery' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'to-mark' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-code-snippet' in 'C:\workspace\src\js'
i ｢wdm｣: Failed to compile.
If you take a look at the tui-editor-Editor-full.js all these dependencies are already included is this file.
Why the tui-editor-extTable.js script does not see them ?
How can I use this extension ?
I installed jquery as a dependency of my project but it still seems not being recognized by the tui-editor-extTable.js script.
I tried to reproduce my workspace on stackblitz
Thanks for your help
I've finally decided to clone the tui-editor repository to create my own tui-Editor js file using a custom webpack config.
It includes:
all the dependencies used in the project (jquery, highlightjs...)
the table extension
So I only need to import this file in my code.
It's not the best solution and it not responds to the primary question but it works :/
I created a brand new app using creat-react-app. got it running. My company has a custom library of components in an npm repository.
I pull that in, and import one of the components. I get a failure immediately.
The error I'm getting is:
./node_modules/the module in question/index.js
Module parse failed: Unexpected token (1:7)
When I look at the index.js file of this node module, the only line there is:
export * from './src';
The ./src/index.js file exports all the components individually.
It's clear this is choking webpack or something. I haven't really seen things exported like this.
I probably have problem with webpack configuration, because the require() method in AngularJS DI doesn't work correctly. In my app use AngularJS, Webpack and ES6.
I'm trying to add a library angular-formly-templates-bootstrap. In the source code on GitHub I see the dependency added with:
const ngModule = angular.module(ngModuleName, [require('angular-formly')]);
After installing the library using Npm in the file I can see:
var ngModule = angular.module(ngModuleName, [__webpack_require__(4)]);
Unfortunately, firing this code returns me an error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:modulerr] Failed to instantiate module {"version":{"full":"1.6.9","major":1,"minor":6,"dot":9,"codeName":"fiery-basilisk"},"callbacks":{}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
I can quickly fix the error by entering the dependency name in the library code:
var ngModule = angular.module(ngModuleName, ['formly']);
At this point, everything works as it should. Obviously, this is not the right solution. The only question is why the require() method doesn't properly inject dependencies?
Require doesn't work in browser.Basically require is a node_module by which we can access other modules or files.So please if you are using it on browser side then try other things like import or self.import or injecting.
Add this to your project: require.js
and take a look at this Require Api