systemjs: import extra amd.js,console log global variable( ex: echart, katex, jquery) is undefined.

Hi @ooooevan, good question. This error is explained in detail in these docs. What it means is that React is not in your import map.

To fix this, you need to add React to an import map on the page:

<script type="systemjs-importmap">
  {
    "imports": {
      "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
      "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js"
    }
  }
</script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/named-exports.min.js"></script>

Also, you should not rename react to React inside of your webpack externals. react is the name of the module, whereas React is the name of the global variable when used as a global var. With SystemJS, you won’t be using the React global variable but instead the systemjs module for react.

// config-overrides.js
config.output.libraryTarget= 'umd'
config.externals = {
    ...config.externals,
    react: 'react',
    'react-dom': 'react-dom',
};

Using the amd + named-exports extra is a good way of loading react. It will prevent React from creating a global variable, but will register it as an AMD module that SystemJS can understand. You can see an example of this working at https://github.com/react-microfrontends/root-config/blob/master/src/index.ejs

_Originally posted by @joeldenning in https://github.com/systemjs/systemjs/issues/2195#issuecomment-635420934_

hi @joeldenning , i have the same problem，if i use System.import(‘echarts’) do it this way is no problem, but my child app both use import echarts from ‘echarts’, don’t in global variable，how to solve this problem at not use System.import?