After registering component with reduxForm, react-intl FormattedMessages are not updating after locale change in state:
import React from 'react';
import { reduxForm } from 'react-redux-form';
import { Form } from 'reactstrap';
import { FormattedMessage } from 'react-intl';
const ExampleForm = ({ handleSubmit }) => (
<Form onSubmit={handleSubmit}>
<h2>
<FormattedMessage id="example.title" />
</h2>
...
</Form>
);
// When added reduxForm FormattedMessages are not displaying
// correct translation after language locale change through reducer
export default reduxForm({
form: 'example',
})(ExampleForm);
// If I I am using without reduxForm everything works correctly
// export default ExampleForm;
Does anyone have experience with this? For me they update only when I leave route and return or just refresh the page of course as I am writing my locale to localStorage in actions and reading it in store initializing.
Lib versions:
"react": "^16.3.2",
"redux": "^4.0.0",
"react-redux": "^5.0.7",
"redux-form": "^7.3.0",
"react-intl": "^2.4.0",
"react-intl-redux": "^0.7.0",
injectIntl is needed to wrap reduxForm:
import { FormattedMessage, injectIntl } from 'react-intl';
export default injectIntl(reduxForm({
form: 'example',
})(ExampleForm));
Related
This is the error I get and I have no idea why, so please help. I will add the snippet of code and the package.json bellow:
import React from "react";
import { Provider } from "react-redux";
import { store } from "../state";
import RepositoriesList from "./RepositoriesList";
function App() {
return (
<Provider store={store}>
<div>
<h1>Search for a Package</h1>
<RepositoriesList />
</div>
</Provider>
);
}
export default App;
I was having this issue with Node 16.16:
"react-redux": "7.2.4",
"#types/react-redux": "7.1.16",
seems to have resolved upgrading both packages:
"react-redux": "7.2.9",
"#types/react-redux": "^7.1.25",
(or just react-redux 8.x which no longer requires #types/react-redux).
I'm unsure of details/reasons, but their seems to be a flag for this at the top of the docs now: https://react-redux.js.org/using-react-redux/usage-with-typescript which links to this thread https://github.com/facebook/react/issues/24304#issuecomment-1094565891
Struggling to wrap my head around this issue. I am using the built in CSS modules for my components in Nextjs. When i lazy load my component that has a CSS module, I get the error CSS Modules cannot be imported from within node_modules..
If I replace ${asset.name} with the value button, i.e dynamic(() => import(#preamp/assets/Button)), nextjs will compile.
The code will execute correctly if i dont use CSS modules. It will lazy load dynamic components in. Only when i add the file to the project.
If i hardcode the import path it compiles. I only have this issue when I use a template literal string.
Any help is highly appreciated.
import React from 'react';
import dynamic from 'next/dynamic';
const asset = { name: 'Button' };
const NewComponent = dynamic(() => import(`~/assets/${asset.name}`), {
ssr: false,
});
export default function index() {
return (
<div className="grid-container">
<div className="grid-x grid-margin-x">
<div className="cell medium-6 large-6">
<NewComponent />
</div>
<div className="cell medium-6 large-6">12/6/8 cells</div>
</div>
</div>
);
}
Button.js
import React from 'react';
import styles from './Test.module.css';
export default function Index() {
return <div className={styles['btn-primary']}>Test Div</div>;
}
EDIT:
If I move the Test.module.css into a different folder, it will compile. I havent seen any documentation or reasoning why the CSS modules has to live in a particular area.
button.js updated
import React from 'react';
import styles from '~/test/Test.module.css'; // <-- Moved into a different folder
export default function Index() {
return <div className={styles['btn-primary']}>Test Div</div>;
}
Project specs:
"dependencies": {
"classnames": "^2.3.1",
"eslint-plugin-prettier": "^3.4.1",
"eslint-plugin-react": "^7.27.0",
"next": "^12.0.3",
"next-transpile-modules": "^9.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.43.4"
},
Using node v14.17.3
Just wanted to post my answer. If you are going to use dynamic imports, then import paths themselves cannot be dynamic. I've added more information here.
https://github.com/vercel/next.js/issues/31271
I have this simple code to show the text field:
I get the error
Error in /turbo_modules/react#16.13.0/cjs/react.development.js (1465:13)
Invalid hook call.
The code is at this link https://stackblitz.com/edit/react-6dgvfj?file=UserForm.js
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import TextField from '#material-ui/core/TextField';
const UserForm = props => {
return (
<div>
This is userform component.
<TextField id="standard-basic" label="Standard" />
</div>
);
}
export default UserForm;
react and react-dom packages always get released in pair. So they are bound to be of same release, to work together. In your case, react was of 16.12.0 and react-dom of 16.13.0
Your package.json
"dependencies": {
"#material-ui/core": "^4.9.5",
"#types/react": "^16.8.6",
"react": "^16.13.0",
"react-dom": "16.12.0"
},
change it to
"react": "16.13.0",
"react-dom": "16.13.0"
I have a Formik form where I have two Datepickers from formik-material-ui-pickers
import {Field, Form} from "formik";
import React from "react";
import Button from "#material-ui/core/Button";
import { TextField } from "formik-material-ui";
import { DatePicker } from "formik-material-ui-pickers";
import InputAdornment from "#material-ui/core/InputAdornment";
import "./drillForm.css"
export function DrillForm(props) {
return (
<Form className="drillForm" onSubmit={props.handleSubmit}>
<div className="fieldSet">
<DatePicker label="Fabricacíon" name="built" />*
<DatePicker label="Garantía" name="warranty" />
</div>
</Form> );
}
If I remove any of them the remaining Datepicker work like a charm but if I try to use them together they race into this repeating error
index.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
in PickerWithState (created by FormikMaterialUIDatePicker)
in FormikMaterialUIDatePicker (at drillForm.jsx:23)
in div (at drillForm.jsx:21)
in div (at drillForm.jsx:12)
in form (created by Form)
...
This is the component where I get the data and render the Form
import React, { useEffect } from "react";
import { useHistory} from "react-router";
import { useDispatch, useSelector } from "react-redux";
import { Formik } from "formik";
import {actions as drillActions} from "../../../ducks/drills";
import CircularProgress from "#material-ui/core/CircularProgress";
import {DrillForm} from "../../elements/forms/drillForm";
import Paper from "#material-ui/core/Paper";
import "./drillEdit.css"
import moment from "moment";
export default function ({idx}) {
const history = useHistory();
const dispatch = useDispatch();
const {username, token} = useSelector(({user})=> user);
const [drill, updating, errors] =
useSelector(({drills})=> [drills.drills[idx], drills.update, drills.errors]);
useEffect(
() => {
dispatch(drillActions.get(username, token, idx));
}, []
);
console.log("form Drill", {...drill});
return (
<Paper className="editForm">
<div>
<h1>{drill?drill.name:"Collecting Data"}</h1>
<h2>{drill?"Edit your drill " : "It may take few seconds"}</h2>
</div>
<div>
{drill?
<Formik
initialValues={drill}
initialErrors={errors}
onSubmit={(values, actions) => {
dispatch(drillActions.update(username, token, values));
actions.setSubmitting(false);
}}
>
{formikProps => <DrillForm {...formikProps} history={history}
updating={updating}/>}
</Formik>
: <CircularProgress/>
}
</div>
</Paper>);
These are my dependencies:
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/styles": "^4.8.2",
"#material-ui/pickers": "^3.2.10",
"#reduxjs/toolkit": "^1.2.3",
"formik": "^2.1.2",
"formik-material-ui": "^2.0.0-alpha.2",
"formik-material-ui-pickers": "^0.0.4",
"material-ui-popup-state": "^1.5.1",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-observable": "^1.2.0",
"remote-redux-devtools": "^0.5.16",
"#date-io/moment": "1.3.13",
I installed font-awesome via npm.
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.15",
"#fortawesome/free-solid-svg-icons": "^5.7.2",
"#fortawesome/react-fontawesome": "^0.1.4",
"axios": "^0.18.0",
"jquery": "^3.3.1",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-scripts": "2.1.5"
},
But how can i use icon in my app.
<i className="fas fa-home" ></i>
<b> Trang chủ </b>
but it didn't work.
From the documentation, it looks like you first need import each icon that you want to use and register it with the Font Awesome library. Then when you want to use an icon, import FontAwesomeIcon as a React component and then render it as such.
For example:
In App.js:
import { library } from '#fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faHome } from '#fortawesome/free-solid-svg-icons'
library.add(faHome)
Then in your component file:
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
export default props => {
return (
<span>
<FontAwesomeIcon icon="home"/>
<b>Trang chu</b>
</span>
)
}