at the moment i try to implement request with webpack, apparently its not straight forward i have implemented the following stubbing method form link below:
https://github.com/request/request/issues/1529
node: {
console: false,
fs: 'empty',
net: 'empty',
tls: 'empty'
}
Now the build is successful but i getting this following error in da browser and noting shows up:
Uncaught Error: define cannot be used indirect
any one have experience to successfully implement Uncaught Error: define cannot be used indirect with webpack?
$ npm install --save request#2.65.0 solved the problem for me :)
If you are using webpack with ES6 then I would recommend trying a library designed for ES6, such as https://github.com/alexrsagen/node-es6-request.
Related
I'm using the #remote-ui/react library to render my React code in a web worker. I'm using Vite for my project, but whenever I try to use JSX in my worker script, I see the following error:
Uncaught Error: #vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
I've created a minimal reproduction here.
Disabling React Fast Refresh seems to do the trick:
// vite config
{
plugins: [react({ fastRefresh: false })],
worker: {
plugins: [react()],
},
}
If by chance, anyone encountered the same error using Laravel Vite, one might forget to add #viteReactRefresh before the #vite blade directive as per the documentation.
I'm trying to install this React library:
html-2-jsx
Problem is, i don't know how to import it into React. The description says:
To use the Node.js module, require('htmltojsx') and create a new instance.
When i try to just require it in the React component, ESlint tells me:
File is a CommonJS module. It may be converted to an ES6 module.
Of course, when i try to run Webpack, i get errors.
The errors i get in Webpack:
Can't resolve 'child_process' in
'C:\xampp\htdocs\codeigniter_cms\public\node_modules\xmlhttprequest\lib'
And few errors of this kind:
Can't resolve 'fs' in
'C:\xampp\htdocs\codeigniter_cms\public\node_modules\cssstyle\lib'
How can this be done? To be honest, i find it a bit weird, that a library made for react, doesn't support ES6 import functionality.
Try adding this to your webpack config:
module.exports = {
...
node: {
fs: 'empty',
child_process: 'empty'
}
};
The warning you are seeing has nothing to do with those errors. If you'd like to fix the warning then it may require some context on where the warning occurs.
I am struggling to include stomp in my project. With both versions jmesnil/stomp-websocket or the subspequent forkJSteunou/webstomp-client.
I tried to import properly:
import Stomp from 'stompjs';//or 'webstomp-client';
import SockJS from 'sockjs-client';
and to load it like:
angular.module('app', [
uiRouter, ngTranslate, ngTranslateStaticFilesLoader, ngResource, ngFilter,
uiBootstrap, Stomp, SockJS
])
But I get the following error (with both versions):
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module {"VERSIONS":{"V1_0":"1.0","V1_1":"1.1","V1_2":"1.2"}} due to:
Error: [ng:areq] Argument 'module' is not a function, got Object
(Even if webstomp.js has "function webpackUniversalModuleDefinition(root, factory) " on top, which apparently is not fullfilling its purpose)
It is possible to bypass this errors by importing it "wildly" directly on top the controllers where used, but then all karma tests are not running (error is : Error: Cannot find module "net"), even though node: { net: 'empty', tls: 'empty', dns: 'empty' } is added to webpack.config.js.
At this point anything I am trying just feels like weird black magic.
Is there a "constellation" of lib versions, angular wrappers, etc that is know to work properly with my setup (angular 1.5 / es6 / webpack 1.14 / karma) ?
Do not add it as a dependency to your angular module. The Stomp library is not an angular module. There might be a bridge available, but I don't think it is necessary.
To use Stomp with Webpack 2, simple require it at the tomp of the file where you are using Stomp and then use it as if it was a global variable.
const Stomp = require("stompjs/lib/stomp.js").Stomp;
Inside your controller/service:
Stomp.client(...);
Edit
This solution will be a bit more difficult to unit test, because you will not be able to replace the dependency easily the "angular way". To solve that issue, you might define it in your main module file as a constant and than use the DI provided by AngularJS.
Main Module File
const Stomp = require("stompjs/lib/stomp.js").Stomp;
angular
.module('app', [
// dependencies
])
.constant('Stomp', Stomp)
// other controllers/services/etc.
Controller/Service
function MyController(Stomp) {
Stomp.client(...);
}
in this set-up, how do you transpile the angular2 library being imported from the generated ngfactory files?
the current app is a combination of the webpack + aot cookbook based on the angular docs
angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html
I have a working POC where you can replicate the issue from this repo:
https://github.com/jetlogs/Angular2-AOT-Localization
after you've done the compilation / bundling, you can open the 2 files:
non-aot.html - this is the non-aot version of the same app, and it loads fine
aot.html - this file fails with:
ng_module_factory.js?95b1:13 Uncaught SyntaxError: Unexpected token import
Expected behavior
the expected behavior is that aot.html and non-aot.html should have the same behavior
Minimal reproduction of the problem with instructions
clone the repo, then
run these commands on the working directory:
npm install
npm postinstall
npm run build
then open aot.html to reproduce the issue
Is there any way on how to fix the import statements from the imported angular2 libraries? Thanks
UPDATE:
I've tried transpiling the angular2 source files which are in ES2015 by using the babel-loader:
{
test: /\.js$/,
loader: 'babel',
include: [
/node_modules(\\|\/)#angular/
],
exclude: [
/\.umd\.js$/
],
query: {
presets: ['es2015']
}
},
it now compiles without issues with ES6 incompatibilities, however, it now encounters a new error only for aot.html:
core.umd.js?e2a5:3272Uncaught Error: No provider for NgZone!
any reason why transpiled angular2 source codes being referenced by the AOT compiler are cdausing NgZone issues?
I've updated the repo above to reflect my latest changes
UPDATE2: 10/13/16
Updated to Angular 2.1
still the same issue
The System.import syntax used in ng_module_factory.js is ES6 style module loading. Webpack 1, which you are probably using, does not support this syntax.
A workaround might be to transpile the Angular ES6 modules to ES5 with require() syntax, but you already tried this without success.
However you might consider switching to Webpack 2, which fully supports ES6 style imports and is very close to its stable release. The compilation worked for me this way without changing anything except for the webpack config which uses a new syntax for some parts.
For me it was a wrong import generated by IDE:
import { Component, Output } from "#angular/core/src/metadata/directives";
Instead of:
import { Component, Output } from "#angular/core";
I try to run ng-bootstrap for angular 2 and I receive an error to install ng-bootstrap. I believe that is a path problem.
This 404 error occur when i try to access page, and on start npm.
When angular ng-bootstrap try to load I receive a 404 error on import module:
[1] 16.08.20 20:01:00 404 GET /#ng-bootstrap/ng-bootstrap
But this module is inside node_modules. Thanks
First you should install using below command
npm install --save #ng-bootstrap/ng-bootstrap
Refer
https://ng-bootstrap.github.io/#/getting-started
Follow this issue link, it has app module and system config reference and what he did wrong
in your app.module.ts
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
and
imports: [ NgbModule]
in systemjs.config.js
**var map:** '#ng-bootstrap': 'node_modules/#ng-bootstrap'
**var packages:** '#ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
You should look at this issue, it provides a good insight on how to configure ngBootstrap with systemJS
I had the same issue, solved with a few changes to the systemjs.config.js
Getting started Angular2 RC5 with ng-bootstrap 404 Error
check out my learning angular 2 project, I have just make some demos with angular 2 and ng-bootstrap. https://github.com/beginor/learning-angular2