Understanding Recompose and migrate to React hooks - reactjs

Suddenly I get an npm error in the pipeline that my recompose package is not compatible with React version 17.
So I have to remove the recompose package. I try to understand why/how it's used in our codebase and what adjustments I have to make to get everything working.
For example I have a file App.tsx and App.container.ts.
import { withRouter } from 'react-router';
import { compose } from 'recompose';
import App from './App';
import { InnerProps, OuterProps } from './App.types';
import withAppCookie from './with-app-cookie';
export default compose<InnerProps, OuterProps>(withRouter, withAppCookie)(App);
We are using only the compose utility from the Recompose package.
In above case why is compose utility used and what adjustments do I have to make to get it working without this package?

Related

Creating NPM project both for Vue and React. How to import a Vue and React Hook into index.js with error

Anyone knows how I can import each of below function in Vue and React without an error?
Right now I am getting an error if I am importing vueFetch and reactFetch.
So if am importing vueFetch into a Vue project, I am getting an error for React that React is not defined and the same applies if I import reactFetch (Vue ref not defined).
import { vueFetch } from './composables/vue/vue-fetch';
import { reactFetch } from './composables/react/react-fetch';
export { vueFetch, reactFetch };
I am trying to make a Vue and React NPM package, but I only have one index file, and I need to import both Hook into the single index file. So I do not need to create 2 packages.
here is the link to the package: https://www.npmjs.com/package/use-lightweight-fetch

Why do I get "Attempted import error: 'EffectCards' is not exported from 'swiper'"?

I am using Create React App and have imported the way the documentation says to do, since Create React App doesn't support pure ESM packages yet.
import { EffectCards } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
But I get the error: Attempted import error: 'EffectCards' is not exported from 'swiper'.
EffectFade works fine, so why not EffectCards? Where else is it being exported from to be imported using Create React App?
The official documents stated that: "By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navigation, Pagination and other components, you have to install them first."
To install them:
import SwiperCore, { EffectFade, EffectCards } from "swiper";
SwiperCore.use([EffectFade, EffectCards]);
In my case ("swiper": "^8.2.2") changing import statements helped
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/effect-cards/effect-cards.scss';
import { EffectCards } from "swiper";

Typescript npm library can't export Redux store please advice

I use the Notistack library and forked it and then using VSCode to try to add a Redux store in the library that I want to expose to Apps.
I'm not so good with Typescript. I have some trouble hehe.
What I want to do is that when the app is using Notistack to show a snack message. I want to use Redux to update the message in real time, like a file up/download progress showing on the snack. It's here Notistack new Redux store(that i create here) come into play. I want Notistack to expose the Redux store to the app so the app can send redux dispatch into to Notistack Redux Store. and showing dispatched message in the Notistack SnackbarItem.tsx
(hope you understand)
When I compile in VSCode I get this error in my app:
Failed to compile.
./src/redux/root-reducer.js
Attempted import error: 'notistack' does not contain a default export (imported as 'NotisReducer').
My root-reducer in the App look like this:
import { combineReducers } from 'redux';
import NotisReducer from 'notistack';
import snackReducer from './snackbar/snack.reducer';
const rootReducer = combineReducers({
snack: snackReducer,
NotisReducer,
});
export default rootReducer;
As you see I import Notistack's NotisReducer and I think I have implemented that.
(I have used NPM link to add locally forked Notistack library into my app)
Now it looks like this here is Notistack's indext.js file where I expose Redux store as NotisReducer:
What I did in Notistack was I added a to index.d.ts:
I define the type store like this:
import * as React from 'react';
import { SnackbarClassKey } from '#material-ui/core/Snackbar';
import { ClickAwayListenerProps } from '#material-ui/core/ClickAwayListener';
import { TransitionProps } from '#material-ui/core/transitions/transition';
import { StandardProps } from '#material-ui/core';
import store from './Redux/store'; // MY STORE
...
...
export type store = store; // EXPORT IT
I'm not sure if this is correct as I could not set breakpoint in npm linked Notistack. Maybe it's to many problem now that must be fixed first.
In the file
SnackbarProvider.tsx
I did like this, importing the store type from index.d.ts):
import {
SnackbarProviderProps,
SnackbarKey,
SnackbarMessage,
OptionsObject,
RequiredBy,
ProviderContext,
TransitionHandlerProps,
store, // STORE
} from ".";
import createChainedFunction from "./utils/createChainedFunction";
export { store }; // EXPOSING IT
In the file
NotisReducer.js
I import the store to be sent to indext.js above
But as you saw above I get compiler error store is not exported.
Attempted import error: 'notistack' does not contain a default ex (imported as 'NotisReducer').
please advice :))

How to user babel emotion macro in create-react-app?

I'm trying to use emotion in my create-react-app, but getting errors when using the macro method explained here.
I just tried copying over the import code in a component like this:
import React from "react";
import styled from "react-emotion/macro";
import { css, keyframes, injectGlobal, flush, hydrate } from "emotion/macro";
import css from "#emotion/css/macro";
import styled from "#emotion/styled/macro";
function Registration(props) {
return;
}
export default Registration;
The first error I get is Parsing error: Identifier 'css' has already been declared. So I commented out the import css and import styled lines to see if it would return anything else. This gave me the error Cannot find module 'react-emotion/macro' from ....
What step am I missing? Or is there another way that I should be including emotion in the app?
Answering my own question in case anyone has the same problem. With v10 of emotion and create-react-app (I believe greater than v2), react-emotion is not required. Also, I didn't need styled, so with the following it works:
import React from "react";
import css from "#emotion/css/macro";
function Registration(props) {
return
}
export default Registration;

Is it bad Webpack practice to import all libraries that React app needs into one file?

Is it bad Webpack practice to import all the libraries that React application needs in one place, for example inside Libs.js, and then inside every application module get them all with just one import statement ?
Libs.js
import React from 'react';
import { PropTypes } from 'prop-types';
import { connect } from 'react-redux';
import { reduxForm, Field, getFormValues, change } from 'redux-form';
import isNull from 'lodash/isNull';
export default {
React: React,
PropTypes: PropTypes,
redux: {
connect: connect
},
form: {
create: reduxForm,
change: change,
getValues: getFormValues,
Field: Field
},
lodash: {
isNull: isNull
}
};
Any app module
import libs from 'common/libs';
Webpack and rollup don't need this kind of enclosed module that groups together all libraries. If you are using a bundling system and import react 20 times, the system will not to import and include the code only once, so it's easier to just import what library dependencies you have in the files where they are used.
With this approach you also get more clarity of what libraries are used by which components.
Short answer: Yes, in my opinion, it is a bad practice and I wouldn't do it in any project.

Resources