I am having trouble accessing some functionality of Highcharts when using webpack to bundle my code/dependencies.
When I try to extend Highcharts like this:
import * as HC from "highcharts";
HC.Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
console.log("Hello World!");
I get the following error:
Uncaught TypeError: Cannot read property 'Pointer' of undefined
at Object.<anonymous> (bundle.js:1)
at i (bundle.js:1)
at bundle.js:1
at bundle.js:1
All other functionality of Highcharts works without problems, but the above is not possible.
Without webpack it works, but I want to bundle my libraries.
Related
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'm using vue.js & getting Uncaught TypeError while adding css-style in my vue-component.
It seems fine when I either import css in script or just remove css-style from component.
I've no depth understanding about webpack configuration. So, should I do any changes on webpack.config.js file?
The error I'm getting
app.js:64 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (app.js:64)
at Object../node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/welcome.vue?vue&type=style&index=0&lang=css& (1.273ca42a3c140f025ab6.js:77)
at __webpack_require__ (app.js:64)
at Object../node_modules/style-loader/index.js!./node_modules/css-loader/dist/cjs.js?!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src/index.js?!./node_modules/vue-loader/lib/index.js?!./resources/js/views/welcome.vue?vue&type=style&index=0&lang=css& (1.273ca42a3c140f025ab6.js:93)
at __webpack_require__ (app.js:64)
at Module../resources/js/views/welcome.vue?vue&type=style&index=0&lang=css& (1.273ca42a3c140f025ab6.js:267)
at __webpack_require__ (app.js:64)
at Module../resources/js/views/welcome.vue (1.273ca42a3c140f025ab6.js:216)
at __webpack_require__ (app.js:64)
at async Promise.all (:8000/index 0)
Vue Component:
<template>
<div class="section">
Lorem Ipsum.
</div>
</template>
<script>
// Works fine if I import css
import '_ANYCSS_'
export default {
//
}
</script>
<!--getting TypeError if I add style section-->
<!--I've tried scoped and scss mode, neither works-->
<style>
.section {
color: red;
}
</style>
Webpack Configuration webpack.config.js:
let mix = require('../src/index');
let ComponentFactory = require('../src/components/ComponentFactory');
new ComponentFactory().installAll();
require(Mix.paths.mix());
Mix.dispatch('init', Mix);
let WebpackConfig = require('../src/builder/WebpackConfig');
module.exports = new WebpackConfig().build();
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
I'm having trouble installing this -> https://github.com/tildeio/router.js in my MVC project.
I first just loaded these two scripts:
vendor/deps/route-recognizer.js
dist/router.js
Added the line:
var router = new Router();
I ended up with the following console errors:
Uncaught ReferenceError: define is not defined ***route-recognizer.js:1***
Uncaught TypeError: Cannot read property 'Promise' of undefined ***router.js:2084***
Uncaught ReferenceError: Router is not defined
I then loaded these scripts:
vendor/loader.js
vendor/deps/backburner.js
vendor/deps/rsvp.js
vendor/deps/route-recognizer.js
dist/router.js
I get these errors:
Uncaught TypeError: Cannot read property 'Promise' of undefined ***router.js:2084***
Uncaught ReferenceError: Router is not defined
This is code where the 'Promise' error occurs:
define("route-recognizer", [], function() { return {"default": RouteRecognizer}; });
define("rsvp", [], function() { return RSVP;});
-->define("rsvp/promise", [], function() { return {"default": RSVP.Promise}; });
Is there a promise.js I need as well? I found a promise.js in the RSVP.js package but loading gives me another error.
Was having the same problem.
There seem to be a code change according to this post for router.js to work as a standalone.
Grab the laters rsvp, route-recognizer and router and create a router object like so
<script src="routerjs/rsvp-latest.js"></script>
<script src="routerjs/route-recognizer.js"></script>
<script src="routerjs/router.min.js"></script>
<script>
var router = new Router["default"]();
</script>
With the following code:
Template.home.rendered = function() {
$("#newsfeed").tinyscrollbar();
};
calling the plugin from this meteor packaging of tinyscrollbar
I get the following exception:
Exception from Deps afterFlush function
function: TypeError: Cannot read property 'offsetHeight' of undefined
at Scrollbar.update
(a full trace is at this pastebin)
I will be happy to provide more information as needed!
Did you add all the required html to your page?