I'm using react-quill in next.js.
Occurs an intermittent type error.
This is error message
and my code
import dynamic from "next/dynamic";
import "react-quill/dist/quill.snow.css";
const ReactQuill = dynamic(async () => await import("react-quill"), {
ssr: false,
loading: () => <p>Loading ...</p>,
});
export default function EditorComponent() {
...modules...
return (
<>
<ReactQuill theme="snow" modules={modules} />
</>
);
}
I referred to the error message and found it in .next/static/chunks/webpack.js
/******/ fn.e = function (chunkId) {
/******/ return trackBlockingPromise(require.e(chunkId));
/******/ };
/******/ return fn;
I don't know how I can fix this part and prevent the error from occurring.
Or is there another way?
Is the React-Quill Code wrong?
Is this intentional?
When I declare a ref with default value inside a pinia defineStore (and then return it) when I access it from a component is always undefined, until I perform operations on it.
The store:
import {defineStore} from "pinia";
import {ref} from "vue";
export const useSelection = defineStore("selection", () => {
const contents = ref([]);
return {
contents
};
});
The component:
<script>
import { defineComponent, computed } from "vue";
import { useSelection } from "../store/selection.js";
export default defineComponent({
name: "Test",
setup() {
const selection = useSelection();
const thereIsSelection = computed(() => {
return selection.contents.value.length > 0;
})
return {
thereIsSelection
};
},
});
</script>
With this code I always get
Cannot read properties of undefined (reading 'length') as selection.contents.value is undefined
Is this normal? Best way to solve it? A computed instead of direct access to selection.contents that returns an array if selection.contents is undefined?
You should do return selection.contents.length > 0; instead of return selection.contents.value.length > 0;
const thereIsSelection = computed(() => {
return selection.contents.length > 0;
});
selection.contents is the actual value you need, not a reference.
firstly
value should be values in
selection.contents.value.length
like this
selection.contents.values.length
secondly
for me, using ref([]) was giving me this error
Uncaught TypeError: <my state>.<my array> is undefined
changing ref([]) to ref(new Array()) made the error go away
I have a problem to include EditorJs in my NextJs app.
I've tryed this :
Editor.js
import dynamic from "next/dynamic";
let CustomEditor = dynamic(() => import("./CustomEditor"), {
ssr: false,
});
export default function Editor() {
return (
<>
{CustomEditor && (
<CustomEditor
/>
)}
</>
);
}
CustomEditor.js
import EditorJS from "#editorjs/editorjs";
const CustomEditor = () => {
return (
<EditorJS />
);
};
export default CustomEditor;
But I have this problem :
What can I do to solve this problem?
You are not using "editor-js" correctly. Look at the docs. EditorJS is not a function/class component; thus, it can't be used. I suggest you try react editor js instead. It has pre-defined components that you can use easily as so:
import { createReactEditorJS } from 'react-editor-js'
const ReactEditorJS = createReactEditorJS()
<ReactEditorJS defaultValue={blocks} />
I'm trying to use the useArgs() hook to update args. Since #storybook/client-api is deprecated, I'm using the #storybook/api library instead. However, it throws a TypeError when I try to use it in a template:
import { useArgs } from "#storybook/api";
import Button from "./Button";
export default {
title: "Button",
component: Button,
} as ComponentMeta<typeof Button>;
const ToggleTemplate: ComponentStory<typeof Button> = (args) => {
const [_, updateArgs] = useArgs();
return <Button {...args} />;
};
export const Toggle: typeof Template = ToggleTemplate.bind({});
Toggle.args = {
children: "Toggle me!",
toggle: {
toggleFunc: () => {},
value: false,
},
};
The above throws TypeError: Cannot read properties of undefined (reading 'getCurrentStoryData'). When I comment out useArgs(), the error disappears. Does anyone know what I'm doing wrong?
You are using the useArgs from the wrong package. The #storybook/api is for creating an addon, not using it in a story (Storybook Docs: Addon API). For inside a story, install #storybook/client-api and change the import to import { useArgs } from '#storybook/client-api';
I am having a TypeError (TypeError: Object(...) is not a function) when I want to dispatch an action. I'm not using any middleware and don't know what I can do to solve it. I had this error already yesterday but somehow managed to solve it (i donk know how i did this)
This is the App.js:
import React from "react";
import { store } from "../store";
import { withdrawMoney} from "../actions";
const App = () => {
return (
<div className="app">
<div className="card">
<div className="card-header">
Welcome to your bank account
</div>
<div className="card-body">
<h1>Hello, {store.getState().name}!</h1>
<ul className="list-group">
<li className="list-group-item">
<h4>Your total amount:</h4>
{store.getState().balance}
</li>
</ul>
<button className="btn btn-primary card-link" data-amount="5000" onClick={dispatchBtnAction}>Withdraw $5,000</button>
<button className="btn btn-primary card-link" data-amount="10000" onClick={dispatchBtnAction}>Witdhraw $10,000</button>
</div>
</div>
</div>
);
}
function dispatchBtnAction(e) {
store.dispatch(withdrawMoney(e.target.dataset.amount));
}
export default App;
Here is the actioncreator:
function withdrawMoney(amount) {
return {
type: "ADD_TODO",
amount
}
}
If you need here is the reducer:
export default (state, action) => {
console.log(action);
return state
}
As you can see I'm a very new to redux but I'd like to know what mistake I make all the time when dispatching an action. Thanks
I believe the issue is that you aren't exporting the withdrawMoney function, so you aren't able to call it in the component that you're attempting to import into.
try:
export function withdrawMoney(amount) {
return {
type: "ADD_TODO",
amount
}
}
Another subtle mistake that will cause this error is what I tried to do, don't accidentally do this:
import React, { useSelector, useState ... } from 'react'
it should be:
import React, { useState } from 'react'
import { useSelector } from 'react-redux'
Try to install :
npm i react#next react-dom#next and run again
const mapStateToProps = state => ({
Bank: state.Bank,
});
function mapDispatchToProps(dispatch) {
return {
dispatch,
...bindActionCreators({ getBanks, addBank }, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(BankComponent);
this worked like a Charm for me .
bit Late to party,
to me it was about casing.
export const addTodo = text => ({
type: ADD_TODO,
desc: text
});
export const removeTodo = id=> ({
type: REMOVE_TODO,
id: id
})
export const increaseCount = () => ({
type: INCREASE_COUNT
});
export const decreaseCount = () => ({
type: DECREASE_COUNT
})
when I renamed all those like
export const AddTodo = text => ({
type: ADD_TODO,
desc: text
});
export const RemoveTodo = id => ({
type: REMOVE_TODO,
id: id
})
export const IncreaseCount = () => ({
type: INCREASE_COUNT
});
export const DecreaseCount = () => ({
type: DECREASE_COUNT
})
it worked.
I spent hours debugging this, turns out I was doing this:
import React, { connect } from "react";
Instead of
import React from "react";
import { connect } from "react-redux";
It's weird the former didn't throw an error, but it will cause the problem!
First problem I see right off the bat is your reducer is not setup to do anything with the dispatched withdrawMoney action creator.
export default (state, action) => {
switch (action.type) {
case "ADD_TODO": {
return {
...state,
amount: action.amount,
};
}
default:
return state;
}
};
If this does not help, the code from your other files would be helpful.
It may not be the main issue, but it looks like you're not using the React-Redux library to work with the store. You can reference the store directly in your React components, but it's a bad practice. See my explanation for why you should be using React-Redux instead of writing "manual" store handling logic.
After updating react-redux to version 7.2.0+ I was receiving this error anytime I wrote:
const dispatch = useDispatch()
I stopped my application and re-ran it with npm start, and everything is working now.
I was using redux toolkit and for me the problem was an extra '}'
such that my 'reducers' object, in 'createSlice' function, already had a closing curly brace before my second reducer
and my 2nd reducer was actually outside the 'reducers' object,
making it not a reducer and hence not working even when you export or import it properly.
So the problem is not in your export or import, but actually where your function is defined.
This may be different for other users, but in my case this turned out to be the cause of this error.