I am trying to play a video when developing locally with VueJS 2.
My code is the following :
<video class="back_video" :src="`../videos/Space${videoIndex}.mp4`" id="background-video"></video>
...
data :
function() {
return {
videoIndex:1
}
}
...
const vid = document.getElementById("background-video");
vid.crossOrigin = 'anonymous';
let playPromise = vid.play();
if (playPromise !== undefined) {
playPromise.then(function() {
console.log("video playing");
}).catch(function(error) {
console.error(error);
});
}
This code is causing the exception given in title. Tried in several browsers, always the same.
If I change the src by :
:src="require(`../videos/Space${videoIndex}.mp4`)"
it works.
But in that case building time is very long as I have many different videos in my videos directory, because adding require() will force to copy all videos in the running directory at build phase (vue-cli serve), and this is really annoying. In other words I want to refer videos that are outside the build directory to avoid this (but also to avoid having videos in my git).
It is interesting to note that when I deploy server side, it works perfectly with my original code
:src="`../videos/Space${videoIndex}.mp4`"
Note also that if i replace my code with simply
src="../videos/Space1.mp4"
it works too. So the video itself, or its location, are not the source of the problem.
Any clue ?
You can host your videos on a CDN to have something faster and easier to debug/work with.
Otherwise, it will need to bundle it locally and may take some time.
I've been looking through the vuelayers documentation and have found little info on to use the vl-style-icon module, which is quite important if you want to create icons on your vuelayer map.
I'm pretty sure I have proper syntax when it comes to using it but marker.png won't load in through it. I've tried accessing it as just a normal image and it works fine so it is to my assumption that it's something with my syntax.
Here is my code:
<template>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true" style="height: 400px">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:4326"></vl-view>
<vl-feature v-for="crime in crimePoints" :key="crime.id">
<vl-geom-point :coordinates="crime.coords"></vl-geom-point>
<vl-style-box>
<vl-style-icon src="./marker.png" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
</vl-feature>
<vl-layer-tile>
<vl-source-osm></vl-source-osm>
</vl-layer-tile>
</vl-map>
</template>
vl-style-box and vl-style-icon are the main points here. I have also checked to see if the points come up without vl-style-box and they do. What could be wrong with my code?
You can try like this:
<vl-style-icon :src="require('./marker.png')" :scale="0.4" :anchor="[0.5, 1]"></vl-style-icon>
</vl-style-box>
If you used Vue CLI to create your vue project include this in your vue.config.js file. First section tells webpack to parse url attribute on custom tags other than what is already configured (Source).
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').tap(options => {
options.transformAssetUrls = {
'vl-style-icon': 'src',
...options.transformAssetUrls,
};
return options;
});
}
}
Run the following command to verify the correct vue-loader configuration is there
Source
vue inspect > output.js
I am composing my web app as a number of Aurelia "feature" apps - although I'm not using Aurelia features as such. Consequently in my html markup I have two entry points pointing to different apps:
<!-- Top Navigation Bar -->
<div aurelia-app="topnav"></div>
<!-- Main App-->
<div aurelia-app="main"></div>
I am using webpack and everything works perfectly using the single "main" app. Webpack generates a JS file "main.bundle.js" which I include in the src tag.
Things are not so straightforward when I added the "topnav" app. In webpack I tell the plugin to use a different aureliaApp name:
new AureliaPlugin({ aureliaApp: "topnav"}),
and, as you can see my HTML entrypoint also calls "topnav". Webpack generates a JS file "topnav.bundle.js" which I also include. I have a file called "topnav.ts" which contains the aurelia Cionfigure function which ends:
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName("nav")));
And a pair of files "nav.ts", "nav.html" which constitute my viewmodel and view.
When I run the app aurelia loads and the "nav" module code executes. But I then get an error - see below.
The module which it reports that it cannot find is the one entered into the HTML markup.
Should this work? Have I missed something?
I should add, everything seems to work. I can create and update properties in the viewmodel and these are bound to the view. It's just that this error is thrown.
You are doing nothing wrong, just unsupported scenario. Per official doc-wiki: https://github.com/aurelia/webpack-plugin/wiki/AureliaPlugin-options#aureliaapp
You can have only 1 auto entry module with aureliaApp configuration. To solve this, you just need to add PLATFORM.moduleName('topnav') to your main.ts (and put it on root level)
Another way to do is to bootstrap manually:
// in your index.ts
import { bootstrap } from 'aurelia-bootstrapper';
// bootstrap top nav application, with one instance of Aurelia
bootstrap(aurelia => {
// do your configuration
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('topnav'),
document.querySelector('#topnav')
);
});
// bootstrap main application, with another instance of Aurelia
bootstrap(aurelia => {
// aurelia.use.standardConfiguration();
// ...
aurelia
.start()
.then(() => aurelia.setRoot(
PLATFORM.moduleName('app'),
document.querySelector('app')
)
});
Is there a way to disable the error overlay when running a create-react-app in development mode?
This is the overlay I'm talking about:
I'm asking this because im using error boundaries (React 16 Error Boundaries) in my app to display error messages when components crashes, but the error overlay pops up and covers my messages.
An alternate solution is to add the following CSS style:
iframe
{
display: none;
}
This prevents the error from showing.
We don't provide an option to disable the error overlay in development.
Error boundaries do not take its place (they are meant for production use).
There is no harm having both the development error overlay and your error boundary; simply press Escape if you'd like to view your error boundary.
We feel the error overlay provides tremendous value over your typical error boundary (source code, click to open, etc).
It is also vital as we explore enabling hot component reloading as a default behavior for all users.
If you feel strongly about disabling the overlay, you'll need to eject from react-scripts and discontinue use of webpackHotDevClient. A less intrusive method may be removing the error event listener installed by the overlay off of window.
The error overlay can be disabled by using the stopReportingRuntimeErrors helper utility in the react-error-overlay package.
First, install the react-error-overlay package:
yarn add react-error-overlay
Then in index.js — right before mounting the root React component, import the utility and invoke it like this:
import { stopReportingRuntimeErrors } from "react-error-overlay";
if (process.env.NODE_ENV === "development") {
stopReportingRuntimeErrors(); // disables error overlays
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Error overlays in create-react-app should now be disabled.
You can suppress React's error event handling by capturing the event first.
for example, by placing in public/index.html's <head>:
<script>
window.addEventListener('error', function(e){
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
</script>
Since you probably still want React's error overlay for errors outside the error boundary, consider this option:
<script>
window.addEventListener('error', function(e){
const {error} = e;
if (!error.captured) {
error.captured = true;
e.stopImmediatePropagation();
e.preventDefault();
// Revisit this error after the error boundary element processed it
setTimeout(()=>{
// can be set by the error boundary error handler
if (!error.shouldIgnore) {
// but if it wasn't caught by a boundary, release it back to the wild
throw error;
}
})
}
});
</script>
assuming your error boundary does something like:
static getDerivedStateFromError(error) {
error['shouldIgnore'] = true;
return { error };
}
The result is a behaviour that follows try...catch line of reasoning.
To solve this issue, you could use CSS:
body > iframe {
display: none !important;
}
for some reason the overlay popped up for me only now while upgrading to Webpack 5.
In any case, you can now cancel the overlay by adding in your webpack.config.js:
module.exports = {
//...
devServer: {
client: {
overlay: false,
},
},
};
Or through the CLI: npx webpack serve --no-client-overlay
Taken from here: https://webpack.js.org/configuration/dev-server/#overlay
To avoid bundling in this large dev library in prod you can use a
dynamic import:
yarn add react-error-overlay
if (process.env.NODE_ENV === 'development') {
import('react-error-overlay').then(m => {
m.stopReportingRuntimeErrors();
});
}
In config/webpack.config.dev.js, comment out the following line in the entry array
require.resolve('react-dev-utils/webpackHotDevClient'),
And uncomment these two:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
I think this makes sense but sometimes when you are typing and have an error boundary then the overlay pops up with each character stroke and is annoying. I can remove the handler I suppose.
In the file webpack.config.js, comment the line:
// require.resolve('react-dev-utils/webpackHotDevClient'),
And uncomment:
require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
In the file webpackDevServer.config.js, comment:
// transportMode: 'ws',
// injectClient: false,
hide it with adblock
It is very useful to disable the errors temporarily so you don't have to comment/uncomment parts of your code that is not used at the moment, but it definitely will be after a few more changes.
The quickest solution is to just use adblock to pick the iframe with the errors.
It is trivial to toggle it with a single click to enable / disable adblock on the given page.
It is counter-intuitive to overlay the rendered page in development mode just to inform the user the newly imported objects or the recenlty created variables are not yet used.
I would say it is an arrow to the knee for beginners :)
If you are using the latest version with react-script >= 5.0.0, you just need to add an environment variable ESLINT_NO_DEV_ERRORS=true.
https://create-react-app.dev/docs/advanced-configuration
There is no option for it.
But, if you strongly wanted to disable modal window, just comment out this line
https://github.com/facebook/create-react-app/blob/26f701fd60cece427d0e6c5a0ae98a5c79993640/packages/react-dev-utils/webpackHotDevClient.js#L173
I had the same problem and I have been digging in the create-react-app source for a long time. I can't find any way to disable it, but you can remove the listeners it puts in place, which effectivly stops the error message. Open the developerconsole and select the html tag. There you can remove the event listeners on error and unhandlerejection which is put in place by unhandledError.js. You can also close the error message by clicking the x in the upper right corner of the screen, and then you should see your message.
Gathering answers here together, I managed to solve this issue for myself.
Here is the package I created for this.
The css fix has changed:
body > hmr-error-overlay {
display: none;
}
I'll also recommend adding this block on init so that you don't get silent errors:
window.addEventListener('error', function (e) {
console.error(e.message);
// prevent React's listener from firing
e.stopImmediatePropagation();
// prevent the browser's console error message
e.preventDefault();
});
I am completely confused what I am doing wrong here.
Say I have a test file 'SimpleTest.ts' containing the following:
/// <reference path="../otherdir/simpleclass.ts" />
module MyModule.SubModule {
describe("this test", () => {
var myObject: SimpleClass = new SimpleClass("");
it("doesn't even get here!", () => {
expect(myObject).toBeDefined();
});
});
}
The class here is defined in a different file, but in the same module, like this:
module MyModule.SubModule {
export class SimpleClass {
constructor(private myMember: string) {}
}
}
So both definitions reside in the same module. Typescript compiles fine, everything looks OK.
But when I start protractor (yes, I have configured 'specs:' path to the files correctly), it stops with the error
this test
encountered a declaration exception - fail
I know that I could get it to work by using module.export and require, but this is not a good solution.
First, I loose the type checking of typescript, when I use javascript 'require', and the type checking is one of the reasons why I'm using it in the first place.
Second, I think this is bad style to mix plain javascript into typescript code.
Any help would be appreciated!
Thanks in advance,
Regards,
Jörg
Stop using internal modules.
It honestly helped me a lot when trying to understand TypeScript.
My experiences with internal TypeScript modules are answered here
.
You can read the article of Steve Fenton here for more details.
I hope this is of any help still to you.