react-virtualized, SystemJS and CDN

1
votes

I would like to use react-virtualized in a web application via cdnjs and SystemJS.

From all the examples that I have seen, it seems that react-virtualized and react libs are loaded locally, then bundled with Webpack before being included in a web page. Now I would like to use it via cdnjs without Webpack by simply importing it with SystemJS. But when I tried that I am getting errors saying that it can't find React.

I was wondering if anyone has tried this before, and whether this is supported at all by react-virtualized. Thanks.

UPDATE: For clarity, I have included some code to show what I am trying to do.

index.html:

...
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.0-alpha.1/system.js"></script>
  <script>
    System.config({
        map: {
            "react":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js",
            "react-dom":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js",
            "react-virtualized":"https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"
        }
  </script>
</head>
...

main.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column} from 'react-virtualized';
...
2
reactjsreact-virtualized

2 Answers

2
votes

What you are doing is possible using the UMD build of react-virtualized. You can see an example of that being done here. In order for it to work though, you'll need to also import UMD builds of react-with-addons and react-dom since react-virtualized depends on them.

For example:

<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>

The react-virtualized UMD build expects React and ReactDOM to be loaded in the global space.

Alternately there should be a way with SystemJS to expose react-dom and react-with-addons as globals for libraries like react-virtualized to consume. I'm not a SystemJS user, but I think it might be something like this:

System.config({
  meta: {
    'path/to/react-virtualized.js': {
      globals: {
        React: 'path/to/react-addons-shallow-compare.js',
        ReactDOM: 'path/to/react-dom.js'
      }
    }
  }
});
0
votes

It's been a while, but I had some time to look at this again. Thanks to @brianvaughn's suggestion, I have managed to resolve this with the following:

System.config({
   meta: {
      "react-virtualized": {
         exports: "ReactVirtualized",
         format: "global",
         globals: {
            React: "react",
            ReactDOM: "react-dom"
         }
      }
   },
   map: {
      "react":    "https://unpkg.com/react@16/umd/react.production.min.js",
      "react-dom":"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
      "react-virtualized":"https://cdnjs.cloudflare.com/ajax/libs/react-virtualized/9.10.1/react-virtualized.min.js",
   }
})

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import * as ReactVirtualized from 'react-virtualized';

let Table = ReactVirtualized.Table;
let Column = ReactVirtualized.Column;
let AutoSizer = ReactVirtualized.AutoSizer;
...