React is not defined when using SystemJS

Question

React is not defined when using SystemJS

734 Views Asked by Musadarj At 06 May 2022 at 08:57

I was trying using SystemJS to load React but it didn't loaded instead throwing an error message in Console > 'React is not defined'
I've read their documentation also searching through similar questions but doesn't satisfy my need, did i miss something?
Here's is what I was tried

<!DOCTYPE html> <html lang="en"> <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>React 18 with SystemJS</title>

<script src="dependencies/systemjs-6.12.1.min.js"></script>
<script type="systemjs-importmap"> {
  "imports": {
    "react" : "/react.production-18.min.js" 
  , "reactDOM" : "/react-dom.production-18.min.js"
} }
</script>
</head><body>
  <div id="root">

  <script type="systemjs-module">
System.import('react');
System.import('reactDOM');

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
} }
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
  </script>

</div></body></html>

Edit1: I'm using SystemJS version 6.12.1

Original Q&A

There are 1 best solutions below

**A G** · Answer 1 · 2022-05-06T10:00:35.230000

You need a bit more configuration to get it going. It is also recommended to keep react code in separate files.

Full working example here.

SystemJS configuration for react:

System.config({
    baseURL: '//npm.jspm.io/',
    // CDN resolves
    paths: { 
        'npm:*': '//npm.jspm.io/*',
        'unpkg:*': '//unpkg.com/*',
        'jsdelivr:*': '//cdn.jsdelivr.net/g/*',
        'jsdelivr-npm:*': '//cdn.jsdelivr.net/npm/*'
    },
    meta: {
        '*.scss': { loader: "sass" }
    },
    map: {
        // The Application path
        'index': INDEX + '?' + Date.now(),
        // SystemJS plugins
        'plugin-babel': 'unpkg:systemjs-plugin-babel@0/plugin-babel.js',
        'systemjs-babel-build': 'unpkg:systemjs-plugin-babel@0/systemjs-babel-browser.js',
        // 'scss': 'npm:scss',
        // Application modules
        'react': 'jsdelivr:react@15/react.js',
        'react-dom': 'jsdelivr:react@15/react-dom.js'
    },
    packages: {
        'https://npm.jspm.io/' : { defaultExtension: 'js' },
        'https://cdn.rawgit.com/*' : { defaultExtension: false },
        'https://unpkg.com/' : { defaultExtension: false },
        './index.scss' : { defaultExtension: false },
    },
    transpiler: 'plugin-babel', 
    babelOptions: {
        sourceMaps: false,
        stage0: true,
        react: true
    }
});

React is not defined when using SystemJS

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in SYSTEMJS

Trending Questions

Popular # Hahtags

Popular Questions