I'm facing an error while trying to build kurento-client-js with Webpack 2 + babel.
WARNING in ./node_modules/kurento-client/lib/register.js
60:20-33 Critical dependency: the request of a dependency is an expression
On execution it results in
Uncaught Error: Cannot find module "."
I believe that the issue itself is сaused by require inside /lib/register.js
//kurento-clinet/lib/register.js
if (constructor == undefined)
return register(require(name));
And the code that cause errors:
//kurento-clinet/lib/index.js
//this module requires kurento-client resulting in circular reference
register('kurento-client-core')
The kurento bower package contains distributive built with the browserify.
I wonder if anyone tried to build kurento-client-js using webpack. Please share your experience.
EDIT:
Circular dependency error stack trace:
Uncaught TypeError: Cannot read property 'MediaObject' of undefined
at Object._typeof (KurentoClient.js:42)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object._typeof (index.js:44)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object.module.exports (HubPort.js:21)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object._typeof (index.js:32)
at ...
First of all webpack complains about a dynamic dependency (which cannot be resolved when building the bundle). It's not a circular dependency.
I got it working like this:
1) in your app's main.js require manually all the modules which the register() function might need
require('kurento-client-core')
require('kurento-client-elements')
require('kurento-client-filters')
const kc = require('kurento-client-core/lib/index.js')
console.log(kc)
2) use this webpack plugin to completely ignore unresolved/dynamic require() calls
//in webpack.config.js
plugins:[
function() {
this.parser.plugin('call require', function(expr) {
if (expr.arguments.length !== 1) {
return;
}
const param = this.evaluateExpression(expr.arguments[0]);
if (!param.isString() && !param.isConditional()) {
return true;
}
});
}
//... other plugins
]
Webpack2 will warn about old plugin format, but it does work
Credits go to:
https://stackoverflow.com/a/42527120/646156
Related
I'm attempting to move my javascript files to Webpack. I'm not very familiar with Webpack so I am not sure that I have coded any of this correctly. I am trying to load jquery-ui, popper, and bootstrap 4. However, I am getting an error when requiring Popper. Please note that I am using the Wepacker gem for Ruby on Rails.
I have included the following code in my environment.js file to include jQuery automatically in each file.
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}))
module.exports = environment
This part works. So, from there I ran yarn add jquery-ui.
Then in my /pack/application.js file I included require('jquery-ui').
From my js file the following code prints to my console:
$(document).ready(function(){
if (jQuery.ui) {
console.log("loaded");
}
});
After this I tried installing and requiring popper with yarn add popper.
Then calling popper from inside my document.ready function I get an error:
$(document).ready(function(){
console.log(window.Popper)
});
The error:
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ubuntu/environment/node_modules/path-platform/path.js: 'return' outside of function (32:2)
30 | if (_path.posix) {
31 | module.exports = _path;
32 | return;
| ^
33 | }
34 |
35 | // resolves . and .. elements in a path array with directory names there
at Parser.raise (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:6420)
at Parser.parseReturnStatement
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10370)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10057)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10572)
at Parser.parseBlock (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10556)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10085)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseIfStatement
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10363)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10054)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10572)
at Parser.parseTopLevel (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:9940)
at Parser.parse (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:11447)
at parse (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:11483)
at parser (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/normalize-file.js:168)
at normalizeFile (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/normalize-file.js:102)
at runSync (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/index.js:44)
at runAsync (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/index.js:35)
at process.nextTick (home/ubuntu/environment/node_modules/#babel/core/lib/transform.js:34)
at process._tickCallback (internal/process/next_tick.js:61)
at Object../node_modules/path-platform/path.js (index.js:82)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:1)
at Object../node_modules/parents/index.js (index.js:39)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:19)
at Object../node_modules/module-deps/index.js (index.js:623)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:3)
at Object../node_modules/browserify/index.js (index.js:846)
Here is my pack/application.js file
require("#rails/ujs").start()
require("#rails/activestorage").start()
require('jquery-ui')
require('popper')
I just did the same thing, then realized what the issue was. popper is some kind of advanced browser testing library in Node. Bootstrap depends on popper.js , which is a tooltip popup library for the browser.
So to fix this, you'll want to:
yarn remove popper
yarn add popper.js
I have cloned #material-ui-pickers to my repository at Princezhm/material-ui-pickers. I had to modify a behaviour of the library to fit my needs, but now moving to my project, it doesn't work.
My previous package JSON was:
blablabla....
"dependencies": {
"#material-ui/pickers": "~3.1.2",
}
blablabla....
Now it is:
blablabla....
"dependencies": {
"#material-ui/pickers": "github:Princezhm/material-ui-pickers",
}
blablabla....
Before, I was importing everything like this:
import { MuiPickersUtilsProvider } from '#material-ui/pickers';
but now I get:
Uncaught Error: Cannot find module '#material-ui/pickers'
at webpackMissingModule (index.js?69d2:1)
at eval (index.js?69d2:1)
at Module../administration/src/index.js (main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:2197)
at __webpack_require__ (main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:727)
at fn (main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:101)
at Object.1 (main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:78738)
at __webpack_require__ (main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:727)
at main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:794
at main-b9602ab4b6e8fc30983a.js?b9602ab4b6e8fc30983a:797
Does anyone know why? If I remove the package and re-install it from material-ui, it works again.
I have a react app that streams data from a csv file. The relevant function looks like this:
loadCSV(url){
Papa.parse(csv,
{download: true,
worker: true,
step: row =>
{this.setState({data: [...this.state.data, row.data]})}});}
}
This gives me the following error:
Uncaught ReferenceError: window is not defined
at Object.<anonymous> (index.js:1881)
at Object.<anonymous> (index.js:1891)
at __webpack_require__ (index.js:30)
at index.js:73
at index.js:76
at webpackUniversalModuleDefinition (index.js:3)
at Object../node_modules/react-scripts/node_modules/react-error-overlay/lib/index.js (index.js:10)
at __webpack_require__ (bootstrap f5513196fd3608c5177f:678)
at fn (bootstrap f5513196fd3608c5177f:88)
at Object../node_modules/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js (webpackHotDevClient.js:24)
The error seems to be due to the "worker: true" line, because it works when I remove that. After some Googling, it seems that using workers can cause issues when making react apps with "create-react-app", but I'm really confused about what the proper solution is.
Window and document object are not available in node env . if you are running on server then you have to add check for client and server.
I am following this quite lengthy but very informative post about setting up a web application using the following technology stack:
es 6
node + express
handlebars
react + react router
webpack + babel
The sample code can be found here.
I have been following along and it went quite well, I did understand the most important concepts. However, I am getting an error when I am trying to run it (after I downloaded it using git clone) like so:
$ npm install
$ npm start
The generated output including the error is:
> react-ssr-example#0.0.1 start /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> npm-run-all --parallel gulp server
> react-ssr-example#0.0.1 server /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> node-dev app/babel-server.js
> react-ssr-example#0.0.1 gulp /Users/nburk/Developer/node/templates/react-universal-web-apps-simple
> gulp
[19:10:39] Using gulpfile ~/Developer/node/templates/react-universal-web-apps-simple/gulpfile.js
[19:10:39] Starting 'build:scss'...
[19:10:39] Starting 'build:watch:app'...
TypeError: Cannot read property 'filename' of undefined
at Object.obj.(anonymous function) [as runInThisContext] (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:25:55)
at Object.<anonymous> (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/graceful-fs/fs.js:10:13)
at Module._compile (module.js:425:26)
at Module._extensions..js (module.js:432:10)
at nodeDevHook (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:58:7)
at require.extensions.(anonymous function) (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/babel-core/lib/api/register/node.js:214:7)
at Object.nodeDevHook [as .js] (/Users/nburk/Developer/node/templates/react-universal-web-apps-simple/node_modules/node-dev/lib/hook.js:58:7)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
[19:10:39] Finished 'build:watch:app' after 12 ms
[19:10:39] Starting 'lint:app'...
[ERROR] 19:10:39 TypeError
[19:10:39] Starting 'server'...
Does anyone see what I am missing? I have no clue where even to start, the filenames in the error don't really tell me anything...
Update
I checked for the file where the error occurs (/node_modules/node-dev/lib/hook.js), here's the code that causes it:
/**
* Patch the specified method to watch the file at the given argument
* index.
*/
function patch(obj, method, optionsArgIndex) {
var orig = obj[method];
if (!orig) return;
obj[method] = function () {
var opts = arguments[optionsArgIndex];
var file = typeof opts == 'string' ? opts : opts.filename;
if (file) callback(file);
return orig.apply(this, arguments);
};
}
You are getting that error because you are trying to access a property of a variable whose value is undefined. In your case, opts is getting the value undefined from var opts = arguments[optionsArgIndex]; this line and you cannot access a property of an undefined variable.
Wrap this up in try-catch or add checks before accessing nested properties of objects. It is generally considered a bad approach in JavaScript to access nested variables directly.
For example, instead of var a = b.c.d; you should use var a = (a && a.b && a.b.c) || <some default value>;
In the first case, if b or c is undefined, your app will crash, however, if b or c is undefined in the second case, a will be assigned the default value which you provided
You can solve this problem simply by explicitly force previous version of node-dev by doing this:
npm i node-dev#3.0.0 --save-dev
Fix#130 https://github.com/fgnass/node-dev/issues/130 brings some other mentioned by #rramakrishnaa bugs.
I am using Browserify to wrap everything up. I have just upgraded from 1.2.23 to 1.3.0 and am now getting the following errors:
Firefox Error
TypeError: angular.module is not a function
var app = angular.module('login-Controller', ['Views']);
----------^
Clearly says that angular is not defined. So I outputed the output from angular
var angular = require('angular'),
console.info(angular); // Object {} ='s an empty object
Does this mean that angular is no longer compatible with browserify? If it is, how can I get it working?
Detailed Error from Chrome
Uncaught TypeError: undefined is not a function main.js:25868 C:\var\www\stage.mayfieldafc.com\src\site\js\users\loginCntrl.js.angularmain.js:1 smain.js:1 (anonymous function)main.js:28 ./src/site/js/app.js.angularmain.js:1 smain.js:1 emain.js:1 (anonymous function)
main.js:183 Uncaught Error: [$injector:modulerr] Failed to instantiate module mays due to:
Error: [$injector:nomod] Module 'mays' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=mays
at http://localhost:3000/js/main.js:183:12
at http://localhost:3000/js/main.js:1900:17
at ensure (http://localhost:3000/js/main.js:1824:38)
at module (http://localhost:3000/js/main.js:1898:14)
at http://localhost:3000/js/main.js:4167:22
at forEach (http://localhost:3000/js/main.js:438:20)
at loadModules (http://localhost:3000/js/main.js:4151:5)
at createInjector (http://localhost:3000/js/main.js:4077:11)
at doBootstrap (http://localhost:3000/js/main.js:1587:20)
at bootstrap (http://localhost:3000/js/main.js:1608:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=mays&p1=Error%3A%20…at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fjs%2Fmain.js%3A1608%3A12)main.js:183 (anonymous function)main.js:4190 (anonymous function)main.js:438 forEachmain.js:4151 loadModulesmain.js:4077 createInjectormain.js:1587 doBootstrapmain.js:1608 bootstrapmain.js:1502 angularInitmain.js:25682 (anonymous function)main.js:2845 triggermain.js:3116 eventHandler
Markup
html(ng-app='mays)
As mentioned by #JeffB, you can use browserify-shim to (hopefully temporarily) remedy this problem.
First, npm install --save-dev browserify-shim. Then, add the following to your package.json:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"angular": "./node_modules/angular/angular.js"
},
"browserify-shim": {
"angular": "angular"
}
This should then let you require and access Angular as expected.
The problem is that angular haven't updated their npm packages to be compatible with browserify just yet.
My fix was disgusting but its working. I simply downloaded v1.3.0 and pasted it into:
node_modules\angular\lib\angular.min.js
Now browserify will compile and use the latest version. This I hope is a temporary fix until they update the package.
It looks like you're defining the module name to be 'login-Controller' in your script, but calling it 'mays' in your markup. I would expect to see something like this:
//declare app in main.js
angular.module('name-of-app', [<modules>])
<!-- call your app in markup -->
<html ng-app="name-of-app"></html>
//jade
html(ng-app='name-of-app')