in

webpack libraryTarget set as system is throwing error ‘unable to find react’ in libraries like react-redux


Describe the bug or question

When I build an application with webpack libraryTarget set to system. Libraries like react-redux are not able to find react from the provided browser module in importsmap.

To Reproduce
Use sample repo: https://github.com/anandrikka/single-spa-react-redux-issue.git

npm install
npm start

can see errors in browser developer tools.

Expected behavior
Expected that generated webpack SystemJS module to find react or react-dom from provided import-maps

Additional context
Our organization has a monorepo that uses single-spa and it works amazing. Now there are other independent applications, we want to register with monorepo for specific routes. For example:

registerApplication({
    name: 'dispatch',
    app: () => System.import('@outside-apps/dispatch'),
    activeWhen: (location) => location.pathname.startsWith('/dispatch')
  });

In index.html of monorepo

<script type="systemjs-importmap">
      {
        "imports": {
          "react": "https://cdn.jsdelivr.net/npm/react@16.8.0/umd/react.production.min.js",
          "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.8.0/umd/react-dom.production.min.js",
          "@outside-apps/dispatch": "http://localhost:4000/dist/dispatch.js"
        }
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script>

We wanted to do it using the dynamic module loading as we don’t want to build monorepo when another application has changed. The example repo provided is straight out webpack configuration of independent application



Source: https://stackoverflow.com/questions/70535427/webpack-librarytarget-set-as-system-is-throwing-error-unable-to-find-react-in

Consistent hashing with bounded loads in Golang

Starter template for Login, Register and Forgot Password using ReactJS with simple form validation