Ref: https://github.com/mjackson/react-stdio
The latest version of react-stdio
is agnostic to your specific JS build steps
(e.g. what bundler and transforms you use), and instead requires you to provide
fully-compiled components that a standard node environment is able to process.
This is very smart, since not everyone is using Babel (hard-coded in a previous
version).
However, I'm having trouble figuring out the best way to integrate my components
that are bundled through Webpack, especially since they have reliance on one another.
For example, say I have two components <Button>
and <Teaser>
(which requires <Button>
).
My instinct is to put both components as entry points in my Webpack config, so that
they will be exported as individual compiled modules for react-stdio
. But this causes the
Webpack error a dependency to an entry point is not allowed
. (See sample Webpack config below).
I'm aware that you can trick Webpack into allowing this by wrapping the entry values in an array (see webpack/webpack#300) but I don't want to rely on a hack like this for core app functionality.
Can anyone think of a good clean way to get around this? How can I use Webpack to export individual components (many of which rely on each other) so that react-stdio can consume them as vanilla JS modules?
Instead of listing both
Button
andTeaser
as entry points, just bundle them one at a time: