We're going to add in some code that is going to import react no matter what, whether or not the user
is using JSM or not, as I mentioned at the end of last video.
This is going to have a slight performance penalty.
But at the end of the day, it's going to allow a user to always show a jazz elements or eventually
a react component as well.
And it's always going to work, even if a user does not import, react or react ahead of time.
So first, let's take a look at a kind of obvious way to implement this that is unfortunately not going
to work out in the long run to back over inside my code editor.
I'll find our show function.
The problem right now is that whenever we try to make use of react, we got that error message because
we can't really be guaranteed that a user has already imported react for us.
So to make sure that react and react are always imported no matter what, we can just very easily add
in our own import statement right above the show function so we can put in upir import, react or react.
And import react, Dom.
From react on.
Now, if we save this, we can flip back over and it appears to work just fine because we are now always
importing react and react, Dom, into every single bundle we create.
We can call show as often as we want, and we're not going to get any error messages.
I can very easily change that text and we just see the updates.
This definitely works, but there's a real big downside to it.
We have now declared an important statement with react and react, Dom.
Let's say at some future point time a user decides to import, react or react on their own because they
very well might not even know that the show function exists inside of our environment.
So user might or might write out something like import react.
Or import react from react, Dom, and as soon as they do so, we're going to very quickly run into
a nasty air.
So the air here says that we have already declared react and we have already declared react, Dom.
So we essentially now have two sets of important statements we've got to import, react and react,
Dom, right here, and we've also got the exact same imports in this code that we are kind of injecting
into a user's input code.
These two sets of import statements are conflicting.
So this is the next issue we're going to have to figure out.
We need to either somehow add in or remove these two import statements based upon whether or not a user
is importing reactor reactor or we need to figure out some other way of solving this.
So let's take a pause right here and take a look at how we might resolve this little issue.