I'm trying to use MIDI.js (because I don't know how else to play MIDI files smoothly when the browser tab is not in focus). More specifically, I'm trying a new version of MIDI.js called midicube.
Like in the readme, I do
<script src="releases/midicube.js"></script>
<script>
MIDI.loadPlugin({
// this only has piano.
// for other sounds install the MIDI.js
// soundfonts somewhere.
soundfontUrl: "./examples/soundfont/",
onerror: console.warn,
onsuccess: () => {
MIDI.noteOn(0, 60, 0);
}
});
</script>
but I get
audioDetect.js:38 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
at s (audioDetect.js:38:22)
at audioDetect.js:106:9
at Module.$t (index.js:94:5)
at mytest.html:3:6
s # audioDetect.js:38
(anonymous) # audioDetect.js:106
$t # index.js:94
(anonymous) # mytest.html:3
audioDetect.js:36 Uncaught TypeError: Cannot read properties of null (reading 'removeChild')
at Audio.<anonymous> (audioDetect.js:36:8)
Here are the lines of code that cause the error. Am I doing something wrong or is midicube outdated in some way (latest commit 3 years ago)?
Related
My task is to upgrade angular from version 10 to 12. After upgrading and following all the steps I see the following error in the console when launching the application. Unfortunately, it's not clear where exactly this error is coming from as the logs are encrypted.
How can I find out exactly where this error pops up?
ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'name')
TypeError: Cannot read properties of null (reading 'name')
at main.js:1:165605
at Object._C (main.js:1:165676)
at template (982.js:1:165355)
at U_ (main.js:1:110880)
at vc (main.js:1:109020)
at Ec (main.js:1:117150)
at main.js:1:109221
at vc (main.js:1:109232)
at Hs.create (main.js:1:162762)
at Ep.createComponent (main.js:1:158194)
at X (polyfills.js:1:17687)
at X (polyfills.js:1:17222)
at polyfills.js:1:18528
at v.invokeTask (polyfills.js:1:8270)
at Object.onInvokeTask (main.js:1:176525)
at v.invokeTask (polyfills.js:1:8191)
at v.runTask (polyfills.js:1:3329)
at A (polyfills.js:1:10654)
My Next.js React app throws an error related to webpack. There is an error that I'm getting in development mode, however, in production build, everything works just fine. I've googled a lot a have no idea whats wrong I don't use any custom webpack configs, the only thing that i have in next.config.js is
module.exports = withImages({
webpack(config, options){
return config
}
})
Unhandled Runtime Error
TypeError: Cannot read property 'call' of undefined
Call Stack
__webpack_require__
file:///home/user/polenta/ploenta.com.ua/polenta/.next/static/chunks/webpack.js (873:31)
fn
/_next/static/chunks/webpack.js (151:20)
eval
webpack-internal:///./node_modules/next/dist/client/dev/noop.js (58:41)
Object../node_modules/next/dist/client/dev/noop.js
file:///home/user/polenta/ploenta.com.ua/polenta/.next/static/chunks/0.js (11:1)
__webpack_require__
/_next/static/chunks/webpack.js (873:31)
fn
file:///home/user/polenta/ploenta.com.ua/polenta/.next/static/chunks/webpack.js (151:20)
fn.t
/_next/static/chunks/webpack.js (195:35)
```
I'm using Mozilla's l20n.js v. 3.5.0
<script defer src="/bower_components/l20n/dist/compat/web/l20n.js"></script>
and get a serious error, when script tries to parse the page.
l20n.js:2274 Uncaught (in promise) TypeError: element.querySelectorAll is not a function(…)
getTranslatables # l20n.js:2274
_translateFragment # l20n.js:2341
(anonymous function) # l20n.js:2067
translateRoots # l20n.js:2066
translateView # l20n.js:2623
(anonymous function) # l20n.js:2491
Does anyone experience the same problem? Error thrown in both Chrome and Edge.
There's a bug in the library. It was corrected but the new version is not published yet.
If you want you can correct the JavaScript file directly by replacing the content of translateRoots(), lines 2066-2068, by the following code:
var roots = Array.from(observers.get(view).roots);
return Promise.all(roots.map(function(root) {
_translateFragment(view,root)
}));
Update (26/2/2016): as stated in the comment below, now you just have to move to v3.5.1 or higher. It worked for me with FF, IE11, Chrome.
I recently tried Humanizer.Js. I added a nuget reference of the same from here, and added it in my page as <script src="~/Scripts/humanizer/humanizer.js"></script>.
However in my page load I am getting an error:
"Uncaught TypeError: Cannot read property 'prototype' of undefined" at humanizer.js:409. The stack trace looks like below:
Uncaught TypeError: Cannot read property 'prototype' of undefined
__extends # humanizer.js:409
(anonymous function) # humanizer.js:416
Humanizer.Configuration.Humanizer.Configuration # humanizer.js:422
Humanizer # humanizer.js:424
(anonymous function) # humanizer.js:426
I have also created a plunk here to replicate the error. Also note that .humanize() also doesn't work.
Any suggestions?
I just released version 1.5 on NuGet, should fix your error
I'm having trouble setting up the aurelia-dialog plugin (0.2.0) with my test Aurelia app.
Unfortunately, the README.MD file that details how to accomplish this has some serious holes. First, it doesn't mention having to inject the aureliaDialog into your class, so I tried this first:
#inject(HttpClient, DialogService)
export class MyClass{
constructor(http, dialogService) {
this.http = http;
this.dialogService = dialogService;
}
...
}
I tried to invoke the dialog box using:
this.dialogService.open({ viewModel: Prompt, model: 'Good or Bad?' })
The above results in the following errors:
Unhandled promise rejection ReferenceError: info is not defined
at Container.invoke (http://127.0.0.1:9000/jspm_packages/github/aurelia/dependency-injection#0.10.0/aurelia-dependency-injection.js:401:30)
at Array.<anonymous> (http://127.0.0.1:9000/jspm_packages/github/aurelia/dependency-injection#0.10.0/aurelia-dependency-injection.js:272:44)
at Container.get (http://127.0.0.1:9000/jspm_packages/github/aurelia/dependency-injection#0.10.0/aurelia-dependency-injection.js:329:24)
at http://127.0.0.1:9000/jspm_packages/github/aurelia/templating#0.15.1/aurelia-templating.js:3685:75
at run (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/es6.promise.js:91:43)
at http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/es6.promise.js:105:11
at module.exports (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.invoke.js:6:25)
at queue.(anonymous function) (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.task.js:40:9)
at Number.run (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.task.js:27:7)
at listner (http://127.0.0.1:9000/jspm_packages/npm/core-js#0.9.18/modules/$.task.js:31:9) Unhandled promise rejection ReferenceError: info is not defined(…)(anonymous function) # es6.promise.js:139module.exports # $.invoke.js:6queue.(anonymous function) # $.task.js:40run # $.task.js:27listner # $.task.js:31
Next, I tried to add the configuration of the plugin to my main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-animator-css')
.plugin('aurelia-dialog'); // <----- this is what I added
aurelia.start().then(a => a.setRoot());
}
Now my app doesn't start at all and produces the following error while trying (and failing) to start:
DEBUG [aurelia] Configured plugin aurelia-dialog. aurelia-logging-console.js:38
DEBUG [templating] importing resources for undefined [] es6.promise.js:139
Unhandled promise rejection Error: Cannot read property 'querySelectorAll' of undefined(…)
(anonymous function) # es6.promise.js:139module.exports # $.invoke.js:6queue.
(anonymous function) # $.task.js:40run # $.task.js:27listner # $.task.js:31
I am now at a loss of what to try next. Thanks for any insight you can offer with this issue.
I'm also hopeful that the maintainer of the aurelia-dialog plugin revises the docs to make the setup process less painful.
Thanks,
Greg
In the end, the problem turned out to be a bug in aurelia-dialog 0.2.0. Version 0.2.1 fixes the issue I couldn't resolve on my own: https://github.com/aurelia/dialog/pull/24.
The other steps that I had to follow are still necessary - you will need to inject the DialogService class and modify your main.js file to add the configuration.