React-loadable from npm and react from cdn

Is it possible to use react-loadable from npm, while using react, react-dom from a cdn?

My client/main.html

  <meta charset="utf-8">
  <meta name="description" content="Test App">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <link rel="shortcut icon" type="image/png" href="favicon.png?v1" sizes="16x16 32x32 64x64">
  <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-precomposed.png">

  <script src=""></script>
  <script src=""></script>
  <script src=""></script>
  <link rel="stylesheet" href="" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src=""></script>


  <div id="react-root"></div>
  <script src=""></script>
  <script src="" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

With this I get global React, ReactDOM and ReactRouterDOM variables.
To use these variables I changed my own code from

import Route from 'react-router-dom/Route';


const Route = ReactRouterDOM.Route;

Now with react-loadable:
I did an npm install --save react-loadable
My client however gives an Uncaught Error: Cannot find module ‘react’.
When I look at node_modules/react-loadable/index.js I see the line

var React = require('react');

So it looks like the npm module expects the local react package. It does not see/use the new React variable.
How can I get react-loadable to use the external React variable?
Is there a standard/elegant way of referencing external/cdn lib variables in meteor (eg assigning a variable name in package.json)?

Furthermore, I see there is an unpkg react-loadable script at:
However placing this script in the head of main.html gives: Uncaught ReferenceError: require is not defined.

1 Like