We are able to bundle, react and react, Dom, but whenever we do, we're seeing a little warning message
from yes, as defined process node in the when bundling for the browser.
It'd be nice to make this little warning message go away.
I'm going to just kind of assume that you might be familiar with what this warning message is all about.
If you're not familiar with it, I would encourage you to just do a very quick Google search on the
warning itself.
And you'll see a lot of articles that say, hey, here's what this warning is all about.
Essentially, all we have to do is set up it's build to define the value of process and node envy whenever
we are doing this bundling stuff.
This is very well supported inside of s built very quickly.
Go back to the build documentation and then over here.
On the built section, I'll go down a little bit and there's an option right here for define define
allows us to define essentially a value inside of code whenever we are doing this bundling process.
So in this example, they have right here, if there is any variable inside the code that we're bundling
of debug.
So if there's a variable that says debug that value or that variable will be replaced with the hardcoded
value of true, instead you can see that in this case, the JavaScript that they are attempting to bundle
is debug and require Hooke's.
They then attempt to do the bundle or really in this case, they're doing a transformer transpired.
Wherever debug is found right there, it will be replaced with true yes, build will also attempt to
do a little bit of almost kind of like code execution.
It's not quite executing your code, but it's going to say if you have true right there and require
Hoke's well, true and require hooks would resolve 100 percent of the time to be just require hooks.
So the output would be what you see right there, just require hooks.
And that entire debug statement has gone away.
You can also see the opposite down here as well.
If DEBUG were to be set to false, we would have false and require hooks, require hooks would never
be executed.
So the resulting code would be simply false.
And that's what we get out right there.
If all this stuff is confusing, don't sweat it.
This is just a little technicality around building a bundle.
Again, you can take a look at some documentation if you Google that warning message right there.
And we'll tell you a little bit more about all this stuff.
So all we really have to do is set up this define option when we are bundling our code and make sure
that we define this process N.V. node in value, that's it.
So to do that, I'm going to go backward.
My editor are actual bundling is occurring, remember, inside of our index file.
So here's where we do that bundle step.
That is inside the unclick function.
So right after our plug and stuff, I'm going to add in a defined section, we're going to put in a
string key right here of process.
N.V. Noad, M.V. And remember, process has one seed inside of it, should not have processed just one
seed.
And we're going to put in a value that has to be a string of production if we put in just production
that will replace any instance of Process N.V. with the word production or like the variable production,
we don't want to replace it with a variable of production.
We want to replace it with a string of production.
So I'm going to wrap this string right here inside with a set of double quotes as well.
That means whenever we find that string inside of our code or replace it with that right there, replace
it with a string of production.
We're also going to do this for one other value as well, if we ever find the variable lobal inside
of our code.
We're going to replace it with window to this right here is just a very similar step.
This is done automatically by Web.
There are actually many different NPM modules that you probably already install and make use of where
this substitution is done for you by Web pack.
And these different modules do not work correctly if you are trying to refer to global.
So just a little kind of bookkeeping thing right there.
If you didn't, I know you might be.
As you're watching this video, you might always be kind of curious of how in the world would I ever
figure that out?
Well, pretty much the way you would figure this out is eventually as you start to bundle some other
modules, you might bundle eventually some module that says, hey, keyword global is not defined or
this variable is not defined.
And so you would say, hey, there, for some reason a reference to global inside of my code, Google
that message or something like that.
And eventually you would stumble across something that says, oh yeah, if you're bundling your code,
you need to replace any instance of a variable of global with window if you're trying to run this code
inside the browser.
Yes, let's save this.
Refresh.
Submit and no more warning messages.
You will also notice if you Google over this code, that there will no longer be any I said Google,
if you do a search over this code, there will not be any references whatsoever to node underscore envy
because they have all been replaced with production.
And even if you search for production, you might not actually see the string or any reference to it
inside of this code.
The reason for that is, as we just saw on the defined documentation, yes, build is going to try to
find where there might be some potentially unreachable code and automatically print it out.
Just to show this to you really quickly, let's comment out that.
Define right there.
Save it.
Run our code again.
Bundle.
I'm going to do another search on here for production, and now you'll notice that we do, in fact,
have a couple of different checks for production.
So when we do that, define that right there is going to be replaced with a string of production.
So the hardcoded string production is built is going to see that.
We're trying to see if production is not equal to production.
And it's going to say, well, of course, it's equal.
So it's going to do potentially some pruning of all this code.
OK, that's enough information, all this stuff and why we are putting to find inside there, let's
save this with that uncommented, good improvement.
We don't have those warnings anymore.
Let's take a pause right here and start making some more improvements in just a moment.