When I go to render my plot that was built with Rollup, I get the following error.
I only seem to be having issues with the ResponsiveContainer component. If I remove that from the project, everything works as expected.
The only thing I could find is some people are suggesting a polyfill, but there should be no reason I need one since I'm not really doing anything out of the ordinary?
Any pointer would be super appreciated! Thanks!
Update: I tried installing 1.8.5 and everything worked.
Would still like to get the 2.x working though.
The Error:
TypeError: Failed to construct 'ResizeObserver':
Please use the 'new' operator, this DOM object constructor cannot be called as a function.
React Code:
<div style={{ width: '300px', height: '300px', userSelect: 'none' }}>
<ResponsiveContainer width={700} height="80%">
<AreaChart
width={500}
height={300}
data={data}
margin={PLOT_MARGIN}>
...
</AreaChart>
</ResponsiveContainer>
</div>
Rollup Config:
// // UMD
{
input,
output: {
file: packageJSON.browser,
format: 'umd',
sourcemap: true,
name: 'my-package-name',
globals: {
react: 'React',
},
},
plugins: [
babel({
exclude: 'node_modules/**',
}),
external(),
nodeResolve({ extensions: ['.mjs', '.js', '.jsx', '.json', '.node'] }),
commonjs(),
],
},
I had the same issue, it seems to be fixed in 2.1.12.
https://github.com/recharts/recharts/pull/2820
Related
I've followed the quill playground guide but using vuejs and it doesn't work. There's no error on the browser but a weird arrow is showing.
Example: https://codepen.io/danny1014/pen/gOLZNZQ
var quill = new Quill("#quill-container", {
modules: {
toolbar: [
[{ header: [1, 2, false] }],
["bold", "italic", "underline"],
["image", "code-block"]
]
},
scrollingContainer: "#scrolling-container",
placeholder: "Compose an epic...",
theme: "bubble"
});
Did you import css file of theme "bubble"?
Something like #import "~quill/dist/quill.snow.css";
Try using snow theme instead of bubble
i successfully implemented vue-product-zoomer in my nuxt ssr.
when i come to this page through $router everything works fine
but when i refresh page something went wrong
here is screenshot
i have code like this
<client-only>
<ProductZoomer
:base-images="images"
:base-zoomer-options="zoomerOptions"
/>
</client-only>
and scripts
zoomerOptions: {
zoomFactor: 4, // scale for zoomer
pane: 'pane',
hoverDelay: 300,
namespace: 'zoomer',
move_by_click: false,
scroll_items: 5,
choosed_thumb_border_color: 'orange',
scroller_button_style: 'line',
scroller_position: 'left',
zoomer_pane_position: 'right',
},
It happens sometimes and the only way that i found is to refresh the component, so do the following:
add key to your component
<client-only>
<ProductZoomer :base-images="images" :base-zoomer-options="zoomerOptions" :key=""key/>
</client-only>
on mounted hook increment the key
export default {
data(){
return{
key:0,
}
},
mounted(){
// You may need to do the increment in a setTimeout (as for me doing it after 2 sec because of my skeleton loader)
this.key++
}
}
Hope it works.
Im using Gridsome frame work for VUE JS
I am navigating to a new page by using this.$router.push(PATH, PARAMS)
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}})
The page route works fine - however the PROP, pageOBJ is undefined in the page as seen in the VUE inspector:
it should be an object (which is what VALUE is set to) i.e.
I've tried a number of different techniques to resolve this but have not managed to figure this out so I assume I have missed something here?
gridsome auto generates the page routes when you add a new PAGE.VUE file to the /pages folder -
Is this the issue?
Gridsome also references graphQI, are you supposed to grab the data using graph and not by pushing Props?
Any help would be amazing here - please let me know if you need any further information.
Thanks -
W
UPDATE BASED ON CURRENT ANSWERS:
I have already added props:true to the component as shown below, but the issue is still present.
CODE SNIPPET - SUMMARY:
User clicks on the SectionTitle component, this then emits the page link
(each of the SectionTitle is a object from : sections array of Object)
To see the current online version of this please look at
wtwd.ninjashotgunbear.com
<template>
<Layout>
<div class="navs" v-for="section in sections" :key="section.sectionTitle">
<!-- On click delay for screen to come ove top -->
<!-- router to be put here -->
<SectionTitle :data="section" #routeChange="reRoute($event)"/>
</div>
<PageTransition :dataObj="transitionObj"/>
</Layout>
</template>
<script>
import SectionTitle from '#/components/SectionTitle.vue';
import PageTransition from '#/components/PageTransition.vue'
export default {
metaInfo: {
title: 'Hello, world!'
},
components: {
SectionTitle,
PageTransition
},
data(){
return {
// data to be passed to the components
sections: [
{
sectionTitle: 'Clients',
sectionLink: 'clients',
sectionSubTitle: '"Some of the amazing humans I have had the pleasure of working with"',
backgroundColor: '#F08080',
titleColor: '#E65454'
},
{
sectionTitle: 'Projects',
sectionLink: 'projects',
sectionSubTitle: '"I LIKE TO MAKE PROJECTS THAT WILL TEST MY KNOWEDGE AND EXPOSE MY WEAKNESSES"',
backgroundColor: '#20B2AA',
titleColor: '#11DACF'
},
{
sectionTitle: 'Skills',
sectionLink: 'skills',
sectionSubTitle: `"LEARNING WILL NEVER END, SO LONG AS YOUR AMBITIONS ARE STOKED, AND I've got plenty of ambition"`,
backgroundColor: '#A921B2',
titleColor: '#CA14D6'
},
{
sectionTitle: 'About Me',
sectionLink: 'aboutme',
sectionSubTitle: `"My joruney becoming a developer so far"`,
backgroundColor: '#FFFFFF',
titleColor: '#D1D1D1'
},
{
sectionTitle: 'Contact Me',
sectionLink: 'contactme',
sectionSubTitle: `"If you have any questions or want to reach out about a project then i'd love to speak with you"`,
backgroundColor: '#2185B2',
titleColor: '#0076AB'
}
],
divText: null,
transitionObj: null
}
},
methods:{
reRoute(value){
// 1)A) - change the text of the div to say the section it is being moved to
this.divText = value.sectionTitle
this.transitionObj = value
// FIND center pixcle value to place text - scrolled height + windowHeight / 2 = centerPos
let centerPos = window.scrollY+(window.innerHeight/2)
// Apply secific Title color - and center possitioning
document.querySelector('.leaveScreen p').style.cssText=`color: ${value.titleColor}; top: ${centerPos}px`
// 1) animate the loading screen
let screen = document.querySelector('.leaveScreen');
screen.style.cssText=`background: ${value.backgroundColor}; left: 0%`;
// 2) re-route the page
setTimeout(()=>{
this.$router.push({path: `/${value.sectionLink}/`, params: {pageOBJ: value}}) // << says that the route name is not found
// this.$router.push(value.sectionLink)
}, 700)
}
}
}
</script>
<style lang="scss">
// **** ERROR CAUSED BY NOT INSTALLING SCSS package ****
// https://gridsome.org/docs/assets-css/ &&&& npm install -D sass-loader node-sass
// Universal Font being used - LEMON MILK
#font-face {
font-family: LemonMilk;
src: url('../assets/fonts/LemonMilk.otf');
}
* {
box-sizing: border-box;
}
.navs {
font-family: LemonMilk;
}
.SectionTitle{
cursor: pointer;
}
</style>
Pass name rather than path in this.$router.push()
this.$router.push({name: ${value.sectionLink}, params: {pageOBJ: value}})
You should add props:true to the route definition :
{
path:'/thepath/:theParam',
component:SomeComponent,
props:true
}
I'm trying to randomize/minify generated class names.
Currently I'm using a fairly vanilla vue-cli project, and I'm also using Tailwind css which I hope doesn't complicate anything.
Currently this is how far I got in my vue.config.js by reading vue-loader docs, this, and this, however this only works half way... my CSS minifies perfectly, however my vue component classes dont' change, so its like it's not parsing *.vue files.
I thought this could be because I notice it mentioning using <style scoped> but with Tailwind you don't need style tags in your components. Quite literally 100% of the css is contained in my src/assets/styles/main.pcss file, which consists of a few #import statements and that's it.
module.exports = {
css: {
requireModuleExtension: false,
loaderOptions: {
css: {
modules: {
localIdentName: '[hash:6]',
},
},
},
},
chainWebpack: config => {
// disable eslint temporarily
config.module.rules.delete('eslint');
},
};
And my tailwind config:
module.exports = {
future: {
purgeLayersByDefault: true,
removeDeprecatedGapUtilities: true,
},
plugins: [],
purge: [
'./src/**/*.html',
'./src/**/*.vue',
],
theme: {},
};
So I have two components
<TouchableInput
onPress={() => this.interestedInPicker.togglePicker()}
/>
<RNPickerSelect
placeholder={{}}
items={[
{
label: 'text',
value: 'value`,
},
{
label: 'text'
value: 'value',
},
{
label: 'text',
value: 'value',
},
]}
onValueChange={restInput.onChange}
style={styles.interestedInPicker}
value={restInput.value}
ref={ref => (this.interestedInPicker = ref)}
/>
RNPickerSelect has height of 0 so it is hidden.
When I press on the TouchableInput I want the function togglePicker to trigger. This works on iOS but logs undefined on Android. When I console.log this.interestedInPicker I can see the method I need but when I log the whole expression it is undefined. Any idea what is going on ?
I opened this as an issue for library RNPickerSelect about a month ago.
It is a known problem. The issue is that they need a way to trigger the picker programatically. You might be able to find a temporary solution HERE