Getting "Error resolving module specifier" when importing react-redux into Preact project

[louh]

When using Redux Toolkit with a Preact app, I get this error in the browser console:

Uncaught TypeError: Error resolving module specifier: react-redux

This error is thrown when attempting to import {Provider} from 'react-redux;. This crashes the app immediately; nothing is rendered. I also see that react-redux does not appear to be in web_modules when I run snowpack build. When the bundler is running, it does not output any error messages; it only throws this error in the browser.

I can recreate a minimal case to display this error from create-snowpack-app. Here are the steps to duplicate:

1. Create a Preact app.

$ npx create-snowpack-app test-case --template @snowpack/app-template-preact

2. Install Redux dependencies.

$ cd test-case
$ npm install @reduxjs/toolkit react-redux --save

The dependency versions in my package.json are as follows:

{
  [...]
  "dependencies": {
    "@reduxjs/toolkit": "^1.4.0",
    "preact": "^10.4.6",
    "react-redux": "^7.2.1"
  },
  "devDependencies": {
    "@snowpack/app-scripts-preact": "^1.8.2",
    "@testing-library/jest-dom": "^5.5.0",
    "@testing-library/preact": "^1.0.2",
    "jest": "^25.4.0",
    "prettier": "^2.0.5",
    "snowpack": "^2.7.5"
  }
}

3. Update Snowpack configuration with React aliases. This is the contents of snowpack.config.json:

{
  "extends": "@snowpack/app-scripts-preact",
  "plugins": [],
  "alias": {
    "react": "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat"
  }
}

4. Add a very minimal store. Create ./src/store.js:

import { configureStore, createSlice } from '@reduxjs/toolkit';

const slice = createSlice({
  name: 'slice',
  initialState: {
    test: 'foo',
  },
});

const store = configureStore({
  reducer: {
    app: slice.reducer,
  },
});

export default store;

5. Import the <Provider> component and store object into App.jsx:

import { h } from 'preact';
import logo from './logo.png';
import './App.css';

// Add these imports to the `App.jsx` created by `create-snowpack-app`
import { Provider } from 'react-redux';
import store from './store';

function App() {
  // Wrap the existing <div> with the imported <Provider> component
  return (
    <Provider store={store}>
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.jsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://preactjs.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn Preact
          </a>
        </header>
      </div>
    </Provider>
  );
}

export default App;

6. Run npm start (alias for snowpack dev) and then open the page in the browser.

What I expect to see: The rendered bootstrapped application.

What I see: Nothing. The page is blank. When I open the console I see Uncaught TypeError: Error resolving module specifier: react-redux.

Things I've tried:

• I removed the aliases (step 3). This bundles react-redux as expected, however, the app crashes because it expects to find react (which is not present because I'm using preact.) This causes me to suspect aliasing may be a culprit.

Things I did not try:

• I have not rewritten the store to remove the dependency on Redux Toolkit. This is because, when I encountered the issue previously, I was in the middle of porting a larger application from React to Preact (which was already using Snowpack). If this is indeed the problem, I will have to consider removing this dependency, but I want to exhaust other avenues of inquiry first (including any dumb mistakes I might have made or incorrect assumptions in the above example) before I attempt changing the Redux code.

Hope anyone has insights to share. Thanks!

[hxtruong6]

I have same problem with you

[CarlensB]

How did you end up fixing it?