React-loadable from npm and react from cdn

help
1

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

My client/main.html

<head>
  <meta charset="utf-8">
  <title>TEST</title>
  <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="https://unpkg.com/react@latest/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router-dom/4.1.1/react-router-dom.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://unpkg.com/reactstrap/dist/reactstrap.min.js"></script>

</head>

<body>
  <div id="react-root"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

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';

to

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:
https://unpkg.com/react-loadable
However placing this script in the head of main.html gives: Uncaught ReferenceError: require is not defined.

1 Like