Module not found issue in react

[maxdeviant]

Module not found issue in react

[shanulhabib]

I am also facing this issue today @nrishav007 previously I am using redux-persist-transform-encrypt v5.0.1 after I updated the v5.1.0 still facing the same error in "react": "^18.1.0".

[hhamza-2023]

@shanulhabib @nrishav007 faced same issue in redux-persist-transform-encrypt v5.0.1.
react = v18.1.0
node = v16.20.2

[nrishav007]

@shanulhabib @hhamza-2023 I found out the issue exactly but i need some help here. The problem is caused for line number 6. its in the exports object. If you remove the exports object then it will works fine.
"exports": {
"default": "./lib/index.js",
"types": "./lib/index.d.ts"
},
we have to do import in a different way

@maxdeviant Please help us to import properly
import {encryptTransform} from "redux-persist-transform-encrypt";
Its not working

[hhamza-2023]

I faced same issue some files are missing in package. To address the missing files issue in "redux-persist-transform-encrypt," we implemented a custom encryption solution. We created a file named reduxEnc.ts to encapsulate the encryption logic using the crypto-js library. This file exports an EncryptTransform function, which serves as a custom transform for use in Redux Persist.

Here's the content of reduxEnc.ts:
// reduxEnc.ts

import Aes from 'crypto-js/aes.js';
import CryptoJsCore from 'crypto-js/core.js';
import stringify from 'json-stringify-safe';
import { createTransform,Transform } from 'redux-persist';
import type { TransformConfig } from 'redux-persist/lib/createTransform';
const makeError = (message : string) => new Error(`redux-persist-transform-encrypt: ${message}`);


 interface EncryptTransformConfig {
    secretKey: string;
    onError?: (err: Error) => void;
}

export const EncryptTransform = (config:EncryptTransformConfig, transformConfig?:TransformConfig) : Transform<any , any> => {
    if (typeof config === 'undefined') {
        throw makeError('No configuration provided.');
    }
    const { secretKey } = config;
    if (!secretKey) {
        throw makeError('No secret key provided.');
    }
     // eslint-disable-next-line no-console
    const onError = typeof config.onError === 'function' ? config.onError : console.warn;
    return createTransform(
        (inboundState) => Aes.encrypt(stringify(inboundState), secretKey).toString(), 
        (outboundState) => {
        if (typeof outboundState !== 'string') {
            return onError(makeError('Expected outbound state to be a string.'));
        }
        try {
            const decryptedString = Aes.decrypt(outboundState, secretKey).toString(CryptoJsCore.enc.Utf8);
            if (!decryptedString) {
                throw new Error('Decrypted string is empty.');
            }
            try {
                return JSON.parse(decryptedString);
            }
            catch {
                return onError(makeError('Failed to parse state as JSON.'));
            }
        }
        catch {
            return onError(makeError('Could not decrypt state. Please verify that you are using the correct secret key.'));
        }
    }, transformConfig);
};

In store.ts, we utilize the EncryptTransform to create an encryption transform for Redux Persist. We configure the persistor with this custom transform and set up the Redux store accordingly.

Here's the relevant part of store.ts:

// store.ts

import { EncryptTransform } from './reduxEnc'; // Update the path accordingly

const encryptor: any = EncryptTransform({
  secretKey: process.env.REACT_APP_PERSIST_SECRET as string,
  onError: function (error: any) {
    console.error('Redux Persist Encryptor Error:', error);
  },
});

const persistConfig = {
  key: 'root',
  storage,
  transforms: [encryptor],
};
const persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: persistedReducer,
  devTools: process.env.REACT_APP_ENVIRONMENT === 'development',
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

This custom encryption solution resolves the missing files issue, providing a secure and functional Redux Persist setup for your application.

[aamiralihussain]

Thanks @hhamza-2023 it works for me

[nrishav007]

@shanulhabib I will update the solution if I find any except downgrade the version

[nrishav007]

@hhamza-2023 use the latest node version. in v5.0.1 there is no issue

[hhamza-2023]

@hhamza-2023 use the latest node version. in v5.0.1 there is no issue

did your issue resolved?

[nrishav007]

@hhamza-2023 not yet. trying

[maxdeviant]

@nrishav007 Are you using ESM in your project?

[nrishav007]

@maxdeviant yes

[hhamza-2023]

Thanks @hhamza-2023 it works for me

You're welcome! I'm glad to hear that it worked for you

[nrishav007]

@hhamza-2023 thanks for it