I want to load a component to my React application externally from my webpack bundled file. To elaborate my point, here is a sample HTML file that I want to have:
<!doctype html>
<html>
<head> ... </head>
<body>
<div id="app"></div>
<script src="/dist/app.js"></script>
<script src="/external-component/timer-component.js"></script>
</body>
</html>
I basically want to be able to load timer component but still make that component to be dependent on app.js (webpack bundled file) since app.js has React. In other words, I want timer component to know that React exists. My current timer-component file is the following (taken from ReactJS website):
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { secondsElapsed: 0 };
}
tick() {
this.setState(prevState => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return React.createElement(
"div",
null,
"Seconds Elapsed: ",
this.state.secondsElapsed
);
}
}
I keep getting error that React doesn't exist. If I try to import React:
const React = require('react');
// or
import React from 'react';
I get an error that require (or import) is undefined. What's the proper way to do it? My understanding is that webpack app.js file kind of creates namespaces, so React component does not really see the outside world. Only the components inside webpack file see React. If this is the case, how can I expose react to the outside world?
I think you want to use the "script-loader" plugin for Webpack. I use it to do just this and it works great.
https://github.com/webpack/script-loader
It's a great way to keep all the stuff out of index.html and put all your requires in one place, e.g. my seed project index.js has all this in it, and in other projects all I have to do is add scripts here when I need. They don't even have to be npm installed, you can just have a script in your project and load it into the bundle this way.
(One of my projects using webpack's script-loader)
require('!!script!core-js/client/shim.js');
require('!!script!zone.js/dist/zone.js');
require('!!script!reflect-metadata/temp/Reflect.js');
require('!!script!rxjs/bundles/Rx.js');
require('!!script!@angular/core/bundles/core.umd.js');
require('!!script!@angular/common/bundles/common.umd.js');
require('!!script!@angular/compiler/bundles/compiler.umd.js');
require('!!script!@angular/platform-browser/bundles/platform-browser.umd.js');
require('!!script!@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js');
require('!!script!@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js');
require('!style!css!./css/styles.css');
require('!style!css!./css/animate.css');
require('!style!css!bootstrap/dist/css/bootstrap.css');
require('./app/main');
Somewhere in your app.js, declare react as a global variable.
window.React = React
This way you can access it from other components.
Another way to do this would be externalizing react from the webpack build and including it via a script tag in the page.
To externalize react, include this in your webpack config
externals: {'react': 'React'}
Include this in your html to access react globally.
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>