Import "InitializePayload" fails in esbuild (e.g. when using Vite)

[Naartti]

trafficstars

Do you want to request a feature or report a bug? Bug

What is the current behavior? react-localize-redux cannot be built in Vite for react because there is an import of InitializePayload from LocalizeProviders which does not exist in localize. I checked react-localize-redux in my node_modules and there is no InitializePayload in localize.

node_modules/react-localize-redux/es/LocalizeProvider.js:10:131: error: No matching export in "node_modules/react-localize-redux/es/localize.js" for import "InitializePayload"
    10 │ ...age, initialize as initializeAC, INITIALIZE, InitializePayload } from './localize';

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

1. Start a new Vite project and choose React and TypeScript.
2. Install react-localize-redux.
3. Import anything from react-localize-redux.
4. Start dev server and see the error in the terminal.

What is the expected behavior? Should be able to build the code.

Which versions of react and react-localize-redux are you using? react: 17.0.2 react-localize-redux: 3.5.3

[gerhardcit]

Also run into this issue in an older system we have to fix up. Is there an alternative package to use rather that this? @Naartti , how did you solve it in the end?

[Naartti]

@gerhardcit I did a fork of this package and included it locally in my project ( https://github.com/ryandrewjohnson/react-localize-redux/pull/224 ).

[raspberric]

In case someone stumbles here for a quick fix, I managed to do the following:

optimizeDeps: {
      esbuildOptions: {
        plugins: [
          {
            name: 'patch-react-localize-redux',
            setup(build) {
              build.onLoad(
                {
                  // this made it work on windows, double check it works for you
                  filter: /react-localize-redux[\/\\]es[\/\\]localize.js/,
                },
                async (args) => {
                  const fileContents = await fs.readFile(args.path, 'utf8');
                  const patchedContents =
                    fileContents + '\nexport const InitializePayload = {};';
                  return {
                    contents: patchedContents,
                  };
                },
              );
            },
          },
        ],
      },
    },