I am trying to use the Masonry plugin with Bootstrap5 and NuxtJS. When I follow the example here
https://getbootstrap.com/docs/5.0/examples/masonry/ and incorporate it into my own codesandbox, I notice that my demo is not in the correct masonry format. See the gaps? My sandbox
My example:
Bootstrap's example:
What do I need to do to get my demo into format shown on the Bootstrap Masonry example page?
I checked how to load the script from a CDN either globally or locally. It was working but at one condition: you needed to NOT start on the masonry page.
Meaning that if you loaded the app on a specific page, then moved to the one with the masonry it was working. But not if you started on this specific page. So, a pretty subpar solution.
This article was really helpful to understand how to wait until the CDN script is fully loaded: https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/
Then I realized that we are far better installing it directly as an NPM dependency. Therefore, I proceeded to the masonry repo. Found a great message on how to setup the whole thing in Nuxt.
And after a removal of some useless stuff and some modern dynamic import, here we are
<template>
<main>
<h1>Bootstrap and Masonry</h1>
<div class="row" id="masonry">
<!-- ... -->
</main>
</template>
<script>
export default {
async mounted() {
if (process.browser) {
let { default: Masonry } = await import('masonry-layout')
new Masonry('#masonry', { percentPosition: true })
}
},
}
</script>
The final solution is looking pretty well and there is not a lot of code. On top of that, the code is properly loaded. And you can load it on a click or any other event.
So my custom loader is not loading instantly only like a split second then it loads here is my site, my goals is to my custom components load. PS when i change ssr to false it works
here is my site: https://micahkwaka.dev
export default {
loading: '~/components/LoadingBar.vue',
loadingIndicator: false,
ssr: true,
pageTransition: {
name: 'my-page',
mode: 'out-in'
},
// Target (https://go.nuxtjs.dev/config-target)
target: 'static',
}
EDIT: This loader is when you have an SPA, to wait for it to load before showing the content. Since you're using Nuxt as an universal app (ssr + client), you will have the static content first (before the JS kicks in, and therefore your animation). So, you could make one with static SVG/CSS but the backed-in JS loader is not the solution here.
The best way would be to disable the JS to test the final result. Still, I'm pretty sure that Google will give you a better rating if you do not have any loader. You could maybe add it to your page transitions tho.
For the animation itself, start with it, then setTimeout the removal of it after 500ms or alike. Plenty ways of doing it. But you will need to have it on the initial render of your page (before the JS hydration).
Why do you set the loadingIndicator to false if you want it ?
If you want a custom one, provide a path to key as explained in the documentation: https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading-indicator/
I know I'm probably missing something really super basic here, I'm trying to run a graphql query with vue-apollo... if I use tags, it works fine
If I try to run queries from inside my code, like in the basic examples in the docs (links below) then nothing happens. The server never receives any request, and this.$apollo.queries is empty.)
Basic examples from the docs:
https://akryum.github.io/vue-apollo/guide/apollo/#queries
https://vue-apollo.netlify.com/guide/apollo/queries.html#simple-query
I've defined the query in the "apollo" property/object... how do I actually execute it when the page loads? Note that I'm using typescript, which is why it's using a "get apollo()" method.
Here's my code...
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
export default class List extends Vue {
myQueryName='my default value';
get apollo() {
return {
myQueryName: {
query: require('../graphql/listMeta.graphql'),
// prefetch: true <-- tried with and without this
}
}
}
}
</script>
<template>
<div>
<!-- THIS DOESN"T WORK ... -->
queries are: {{this.$apollo.queries}} <!-- THIS JUST SHOWS AN EMPTY OBJECT: {} -->
<hr>
myQueryName value is: {{myQueryName}} <!-- THIS JUST SHOWS "my default value" -->
<hr>
<!--
THIS DOES WORK...
<ApolloQuery :query="this.apollo.myQueryName.query" >
<template slot-scope="{ result: { loading, error, data } }"></template>
</ApolloQuery>
-->
</div>
</template>
Note that this.$apollo.queries is empty in the template, probably a clue... but still no idea why its empty. From the docs and examples I've seen it should be populated from my get apollo data method.
Looks basically the same as https://github.com/OniVe/vue-apollo-typescript-example/blob/master/pages/index.vue as far as I can tell, I don't know what the difference is.
I've tried rebuilding the project from scratch multiple times (with and without nuxt), over teh course of months and many different versions of vue/nuxt/apollo/vue-apollo... the queries never run (from memory) unless I use tags.
What am I missing?
You are missing #Component decorator, it is needed to set initial properties of Vue component, so vue-apollo can detect it when component created and make a smartquery property.
import { Component, Vue } from 'vue-property-decorator'
import listMetaDocument from '../graphql/listMeta.gql'
#Component({
name: 'List',
apollo: {
listMeta: {
query: listMetaDocument
},
},
})
export default class List extends Vue { }
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'm trying to wrap my head around a seed project for Angular 2 which has a lot of moving parts, and I came across something that I don't understand... In the index.html there are what appear to be ejs statements:
<!-- src/client/index.html -->
<title><%= APP_TITLE %></title>
Although I understand WHAT it's doing (allowing the title to be defined in a config file), I don't understand HOW it's doing it. While I do see express, I don't see ejs as a dependency in the package.json
To make it more confusing, there are similar ejs-like statements in some typescript files that look like this:
// src/client/app/system-config.ts
System.config(JSON.parse('<%= SYSTEM_CONFIG_DEV %>'));
// src/client/app/app.module.ts
#NgModule({
imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), AboutModule, HomeModule, SharedModule.forRoot()],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>' // <------- this!?!?
}],
bootstrap: [AppComponent]
})
So, this same interpolation is working outside of a template!? How does this work? What tool or package is facilitating this replacement? I can't figure it out. I believe this is the code for running the server:
/**
* Starts a new `express` server, serving the built files from `dist/prod`.
*/
export function serveProd() {
let root = resolve(process.cwd(), Config.PROD_DEST);
let server = express();
server.use(Config.APP_BASE, express.static(root));
server.use(fallback('index.html', { root }));
server.listen(Config.PORT, () =>
openResource('http://localhost:' + Config.PORT + Config.APP_BASE)
);
};
I know Express comes with EJS support out-of-the-box, however, it requires the file to have an .ejs extension. I know there is a way to force it to parse regular .html files, but that code does not seem exist in the angular seed project.
I finally figured out what it was just a few minutes after posting my question. Drumroll please...
It's gulp-template, not EJS. It's simply underscore templating that gulp is replacing with config values at build time. So, mystery solved.