Building a React.js App: Up and Running with React and Webpack

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 5 years ago

In this video, we’ll talk about JSX and learn the necessity of Webpack and specifically babel-loader for JSX to JavaScript transformation. We’ll also set up our basic architecture and build our very first React component.

In this video we're going to build our very first React component. But before we do that, we need to do a few other things. The very first thing I'm going to do is run npm init. What this is going to do, and I'm just pressing enter here to get through all the commands, is it's going to allow us to use npm to require modules that we need, specifically modules like React. So what I'm doing here is I'm installing a specific version of React, this is the latest version as of today, but that might change.

So this is just future-proofing this series a little bit. When this is done, what you'll notice is that we have this node modules folder, and inside that node modules folder we now have React. We can see if we take a look inside of that, so React is right here. So now any time we want to use React, we can just require it and we'll have that available to us.

One more thing we need to install is this thing called the React DOM. The same thing, I'm going to install a specific version number, and we'll talk a little bit more about what exactly is React DOM later in this lesson. Now we're going to install a bunch of dependencies related to Babel. Babel is a JavaScript compiler that's going to let us write JSX, which we'll talk about in a second, but it's also going to let us write ES2015 or ES6 as I'll refer to it.

Basically what we're doing here with Babel is we will write some code, Babel will compile that for us into something that the browser can read. So let's look at exactly how Babel is going to help us. Here we have some normal React code, we have some JavaScript stuff, and then it looks like what we have here is HTML.

This is actually called JSX, and what JSX does is it allows us to write HTML-ish looking code inside of our JavaScript, and now that's going to sound a little weird, and it might throw up some red flags in your head, but it's actually really convenient, and you'll probably learn to love it as you get more used to React. Now you'll notice inside of our node modules folder we have all this Babel stuff, and we also have our React code.

The next thing I'm going to do is make a folder called public, and then inside that folder, I'm going to make a new index.html file. If we head over to our code, this index.html file is going to be basically the root view of our application. So you'll notice here I'm just pasting in this, we have bootstrap, and we have a div with an ID of app, and then we have the only script that we're going to include is this bundle.js file.

Eventually what's going to happen is we want to take all of our code and all of our components, we want to put them through a process that's going to transpile our JSX into normal JavaScript, and then we want to spit all of that out in one file called bundle.js inside of our public folder. To do that, what we're going to do is we're going to use this very nice tool called webpack.

So I'm going to create a webpack.config.js file, and if you haven't used webpack before, what you'll need to do is head over to your terminal and run npm install webpack-g, and what that's going to do is it's going to save webpack as a global module on your computer, but since I've already done that, we don't really need to do that. Heading back to our webpack.config file, we are going to export an object that has all of our webpack configuration stuff. This is going to make a lot of sense as we start going through it.

The very first thing we want to do is we need to tell webpack where our root component is. Because if you think about React, and we'll talk a lot more about this, but React is basically composed of different components and there's always one root component that's going to render all of its children components. So we're pointing webpack to that root component so that it knows where to start processing all of our JSX.

The next thing we're going to need to do is we want to tell webpack where after it's done transpiling everything, and combining it all into one file, where to puke out that new file. So what we're going to say is once you're done compiling this, or transpiling this component and all of the children components, we want you to take that new code and throw it into bundle.js in the public folder. Then the last thing we're going to do is we need to tell it what to actually do with the main JS code and all of its children components.

What we're going to do, is we're going to use a loader, and this loader, it's the Babel loader which we downloaded earlier. Now we need to tell Babel exactly what transformation we'd like it to do to our code. If you remember earlier we downloaded a bunch of npm packages related to Babel. What we're going to do now is go ahead and create a presets of property on this query object. Presets is all the transformations that Babel is going to do to our code.

So one preset we installed earlier was the React preset, then the other one which we're not going to use initially but we're going to use later on in this lesson is called ES2015, basically that's going to allow us to write ES6 code. Now what we need to do, is let's go ahead and create our very first component. Let's make a new folder called app which is where all of our application code will live, and then let's make a new folder called components which all of our components will live in, and now let's go ahead and make a new file called main.js.

Now up to this point what's going to happen is when we create this main.js component, you'll notice here that's just this entry. Webpack is going to say, "Hey, I have this main.js component, I'm going to take this component, I'm going to run it through these transformations, and then I'm going to spit it out in this public/bundle.js file." The very first thing is we're going to require React and we're able to do this because earlier we npm installed React, so now if we require React we have that.

Then I'm going to create a new variable called main, and I'm going to set it equal to react.createClass. What react.createClass does is it creates a React component for us, so there's a few properties you can pass in. The one that we're going to talk about in this video is called render. What render does is it specifies what the UI looks like for this specific element. So we're going to have something very basic that just says, "Hello World."

So when this component gets rendered to the view, and eventually we'll do something like this to render it. When this gets rendered to the view it's going to show "Hello World." Now we need to render this main component to the view. If you remember earlier we npm installed this thing called React DOM. What's cool about React is you're able to do things like server-side rendering. So what React DOM does, it says, "Hey React, we are going to render this component on the client with React DOM and not on the server."

Now what we need to do is we're going to say react-dom.render, we need to then give it our main component, our main parent component that we're rendering, and we need to tell it where to render to. If you'll remember earlier we create this guy, this div with an id of apps, so all we're going to do is say document.getElementByID and then select apps, and then what that will do is it will go ahead and grab this element and render the main component to it.

Now head over to your terminal and go ahead and run webpack, webpack-w, so it looks like everything's good. Now let's go ahead and open up this index.html file on the browser and what we should see is "Hello World."

Gene
Gene
~ 7 years ago

Hi Tyler,

Is that sublime text you're using? What's the color scheme? It looks nice :)

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Sublime. Brogrammer Theme with Oceanic Next Color Scheme.

Paul
Paul
~ 7 years ago

Hi and thanks for the series. How would I start the app through a server rather than open the file in the browser?

Matias
Matias
~ 7 years ago

There are a ton of node modules that'll do, but one simple option that's really easy to get up and running is Httpster. npm install -g httpster then simply run "httpster" from terminal in your JSX output directory

Daniel
Daniel
~ 7 years ago

running webpack -w resulted in 'webpack: command not found',

to make the command work, I needed to run 'npm install webpack -g'. You said it was not necessary. I believe it is. Why did you say it was not?

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

At 2:48 I specifically say that you'll need to run 'npm install webpack -g'. So not sure where you heard me say it's not necessary.

VNGRS
VNGRS
~ 7 years ago

Thanks Tyler for this amazing series. How can I use Chrome React DevTools? It was working fine when I did a project without Babel and Webpack. I wonder do we somehow need to expose to the browser that we are actually using Reactjs.

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

The original React Dev Tools is kind of finicky (as you can see by the reviews). The biggest thing is making sure you add React to the window object.

window.React = require('react'). That usually does the trick. The good news is they just released a new version that I hear is much better. It can be found here. http://facebook.github.io/react/blog/2015/08/03/new-react-devtools-beta.html

Andrew
Andrew
~ 7 years ago

You said it was not necessary in your case because you had already installed it on your machine. I think that's where Daniel misunderstood.

Matthew
Matthew
~ 7 years ago

Hi Tyler, I am getting this error message:

TypeError: Object babel has no method 'split'

Any ideas? Thanks

Yariv
Yariv
~ 7 years ago

How would you setup the github examples on windows? I tried simply to git clone + npm install. got lots of install errors due to webpack-dev-server on windows. it looks like there is a dependency to node-gyp via webpack-dev-server--> socket.io --> Engine.io --> ws --> node-gyp. I know from other npm packages that use node-gyp it is a serious pain for anyone developing on windows. I was wondering if you have any insight regarding this issue. Appreciate it. Ajar

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Hi Yariv,

Unfortunately I've always developed on Mac so I'm not of much help with this.

Yariv
Yariv
~ 7 years ago

I had a look at the result bundle.js that babel outputs. This simplest hello world example result in a js file with 20,000 lines, and its weight is over 600kb. how would you go about minify/uglify getting it ready for production deployment and how much do you think it should weigh? Thanks. Ajar

Yariv
Yariv
~ 7 years ago

Thanks Tyler. Great course!

Yariv
Yariv
~ 7 years ago

Thank you Tyler for answering. Another pressing question regarding this simple example setup: I had a look at the result bundle.js that babel outputs. This simplest hello world example result in a js file with 20,000 lines, and its weight is over 600kb. how would you go about minify/uglify getting it ready for production deployment and how much do you think it should weigh? Thanks. Ajar

Rob Simpson
Rob Simpson
~ 7 years ago

I am going to post my error with yours because there is a second page of comments that the site won't let me go to so I can add. When I run webpack -w I get an error that tells me that my 'Output filename not configured'. I have the same webpack.config.js as the screencast and taken the same steps. Can't find Google answers to this issue and can't move on with series with the error.

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Hey Rob, is your code on Github? If/When it is, send me the link and I'll take a look.

Santhosh
Santhosh
~ 7 years ago

Dear Tyler,

I followed the tutorial, but when i run "webpack -w", I am getting an error in the console which reads,

"ERROR in Entry module not found: Error: Cannot resolve module 'babel' in D:\ReactLessons\10 Github Profiles"

Can you help me with the solution.

Thanks, Santhosh Vijay

Santhosh
Santhosh
~ 7 years ago

Dear Rob,

I too faced the same issue and finally found I running the "webpack -w" from Public folder and not from the root folder.

Kindly check if you are running the "webpack -w" from the root folder where you have placed your webpack.config file.

Hope this helps!

Thanks, Santhosh Vijay www.santhoshthepro.in

Hong Chuan
Hong Chuan
~ 7 years ago

Experience the following. Need an extra module to solve it.

npm install babel-preset-react

➜ github-notetaker webpack -w Hash: efea76b1048c3a97b963 Version: webpack 1.12.2 Time: 619ms + 1 hidden modules

ERROR in ./app/components/Main.js Module build failed: SyntaxError: /Users/hongchuan/Documents/Development/react/github-notetaker/app/components/Main.js: Unexpected token (6:10) 4 | render: function() { 5 | return (

6 | <div>Hello World</div> | ^ 7 | ); 8 | } 9 | });

Jordan
Jordan
~ 7 years ago

I'm getting really stuck setting up the development environment, is there any training on things like Gulp Webpack and all of those random things on Windows?

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

DevEnv stuff is the worst. Your best bet is probably googling around for some Windows related tutorials. You're alone in thinking that the Webpack docs could be a little more friendly.

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Yup. This is a byproduct of the video running an older version. If you get stuck again, you can refer to the Github repo. It's up to date with the latest of everything. https://github.com/tylermcginnis/github-notetaker-egghead

Pyong-Hwa
Pyong-Hwa
~ 7 years ago

I got stuck, too. When I try "webpack -w", error is shown. My Error is as below.


Time: 305ms + 1 hidden modules

ERROR in ./app/components/Main.js Module build failed: SyntaxError: /home/edmond/eggheadio/buildingreactapp/app/components/Main.js: Unexpected token (6:12) 4 | render: function () { 5 | return (

6 | <div> Hello World </div> | ^ 7 | ) 8 | } 9 | });


How can I solve this?

My package.json file is as below.

{ "name": "buildingreactapp", "version": "1.0.0", "description": "", "main": "webpack.config.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.2.1", "babel-loader": "^6.2.0", "babel-preset-react": "^6.1.18", "react": "^0.14.3", "webpack": "^1.12.8" } }

Pyong-Hwa
Pyong-Hwa
~ 7 years ago

Oh, I fixed by downgrading the version of babel-loader from 6 to 5.

Sergii
Sergii
~ 7 years ago

When i run webpack -w i get error "Output filename not configured". Copied config from https://github.com/tylermcginnis/github-notetaker-egghead/blob/02-first-component-webpack/webpack.config.js

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Hi Sergii,

Did you verify the rest of your code is correct? With that error it can be something very minor like this issue - http://anujnair.com/blog/12-output-filename-not-configured-error-from-webpack

Preethi Kasireddy
Preethi Kasireddy
~ 7 years ago

I get the same issue as a few others when I run 'webpack -w' in the root directory.

ERROR in ./app/components/Main.js Module build failed: SyntaxError: /Users/peekay/Desktop/Coding/egg-head-react/app/components/Main.js: Unexpected token (6:6) 4 | render: function(){ 5 | return (

6 | <div> | ^ 7 | Hello World 8 | </div> 9 | )

Here's my github repo: https://github.com/iam-peekay/react-notetaker

Preethi Kasireddy
Preethi Kasireddy
~ 7 years ago

Ah, wait. I switched to version 5.1.3 and it seems to have fixed the issue. Looks like other people have been running into the same issue: https://github.com/babel/babel-loader/issues/68

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Thanks for posting the solution! The JS world moves so quick.

egghead eggo
egghead eggo
~ 7 years ago

The lesson video has been updated!

Preethi Kasireddy
Preethi Kasireddy
~ 7 years ago

Just a side note: Run 'webpack -w' from your root directory. I was being an idiot and running from the components folder and sat there for 30 minutes wondering why it doesn't work :)

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

I should have mentioned that. Sorry!

Pavel Topinka
Pavel Topinka
~ 7 years ago

Hi,

I have problem to see the result. Everything works fine but when I open html file there is nothing. When I open debug tool I can see only in console

bundle.js:1 Uncaught SyntaxError: Unexpected token ILLEGAL in-page-script.js:1 Uncaught SyntaxError: Unexpected token ILLEGAL

I can't see problem.

Can you help me please?

Pavel

Pavel Topinka
Pavel Topinka
~ 7 years ago

Fixed,

I have to add into index.html this line with charset specified.

<script src="bundle.js" charset="utf-8"></script>
Anson
Anson
~ 7 years ago

Tried running "webpack -w" in the root "github-notetaker-egghead" directory and am getting a "ERROR in Entry module not found: Error: Cannot resolve module 'babel' " error. Any help? Thanks!

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Have you compared your code to that in the Repo? Also, make sure you npm installed everything correctly, including babel.

Anson
Anson
~ 7 years ago

Turns out it was an npm issue. I didn't have one of the babel presets installed properly. It's all fixed now. Thanks!

Luis
Luis
~ 7 years ago

get webpack-dev-server with npm install --save-dev webpack-dev-server

in package.json add this: "scripts": { "start": "webpack-dev-server" }

in your webpack.config.js add this: devServer: { inline: true, port: 3333 }, in the command line type npm start

In the browser go to http://localhost:3333/

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

I like to strip out everything that isn't 100% necessary when teaching since unneeded tools often confuse beginners. But yes, webpack-dev-server is great.

scott
scott
~ 7 years ago

So, I thought I'd just grab the source from github and follow along. Unfortunately, the source on github seems to have little to do with the lessons. Some things are similar, but almost all the files seem to be different. What's up? Is there a better way to follow this?

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

The master branch is the code for video 17. Each video is separated into branches, so that branches for this video is https://github.com/tylermcginnis/github-notetaker-egghead/tree/02-first-component-webpack

Ashwin
Ashwin
~ 7 years ago

Great video! Could you share your editor settings with us?

Ashwin
Ashwin
~ 7 years ago

Changing the test: /\.jsx$/ to make the x optional (i.e. test: /\.jsx?$/) will fix a lot of the webpack -w issues without having to downgrade your babel loader to version 5

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Woo. https://twitter.com/tylermcginnis33/status/610920794189889536

jon madison
jon madison
~ 7 years ago

where's the mythical "open in browser" selection on Sublime Text?

jon madison
jon madison
~ 7 years ago

Found out from a friend. SideBarEnhancements package.

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Make sure your webpack config file matches that in the github repo and make sure that you've npm installed the correct packages as well.

Dane Iliff
Dane Iliff
~ 7 years ago

I had to change test: from /.jsx$/ to /.jsx?$/

what is this part doing? thanks

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

It's telling webpack which files to run through your loaders.

dhruvghulati
dhruvghulati
~ 7 years ago

Hey Tyler :)

I'm going through this now as I want to build something in React.js this weekend. I found that you didn't say npm install with the --save command (so these modules go into the package.json). When I did npm install --save-dev babel-core I see my package.json as { "name": "notetaker-react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.4.5" }, "dependencies": { "react": "^0.14.6", "react-dom": "^0.14.6" } }

which is different to the package.json on github. Should I manually alter the package.json? Note I also installed the latest versions of react, react-dom and babel, not versioned. Finally, I ran webpack -w and at the end of my terminal output I get Output filename not configured... what should webpack be doing anyways? Generating a bundle.js file into the public folder so I can view the HTML of index.html?

Jennie
Jennie
~ 7 years ago

Is that correct that bundle.js file was crazy generated "19654" lines when I key in "webpack -w"? (just for one div !!?)

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Yo. The --save-dev and --save only matter if someone else is going to clone your code from somewhere like Github. Basically your package.json is a list of dependencies that your project needs. So it allows you to, instead of pushing up all of those dependencies (in node_modules) to github, you just declare what your project needs (in package.json) then when someone goes to use your project they simply npm install and it will download all of those packages. But, since you're most likely not sharing this project with anyone, not using --save-dev or --save will still download the dependencies it just won't save them to package.json. As far as webpack -w not working, check to make sure your code is the same as the one in the repo (located here and on the other branches)

Iuliia Kotlenko
Iuliia Kotlenko
~ 7 years ago

Thank you for the great video, I just start to learn React and this lessons really amazing!

I watched all videos and did all the same, but I realized, when I try to find a new user, the part with bio just refresh (repos and notes the same, just after reloading the whole page these parts also refresh. Did I miss something?

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Hi! Thanks for the kind words. As far as you're error, make sure you're calling e.preventDefault() in any function where you're routing. For example,

handleSubmit(e){
    e.preventDefault();
    const username = this.usernameRef.value;
    this.usernameRef.value = '';
    this.props.history.pushState(null, "/profile/" + username)
  }

I believe I forgot that in the video.

Joshua
Joshua
~ 7 years ago

Thanks for this amazing theme Tyler!

Jeremy Zilar
Jeremy Zilar
~ 7 years ago

Can you provide some clarity around which node modules to install, and how to install the right bable version?

I am getting errors when I run 'webpack -w', and everything I am reading seems to point to the wrong versions of bable being installed.

Many thanks,

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Hi Jeremy. Everything you need should be in the package.json file found HERE. Make sure you install a local version of babel or it will default to a globally installed one which might be out of date.

justin
justin
~ 7 years ago

I got

Error: Cannot find module 'npmlog' at Function.Module._resolveFilename (module.js:337:15) at Function.Module._load (module.js:287:25) at Module.require (module.js:366:17) at require (module.js:385:17) at /usr/local/bin/npm:19:11 at Object.<anonymous> (/usr/local/bin/npm:76:3) at Module._compile (module.js:435:26) at Object.Module._extensions..js (module.js:442:10) at Module.load (module.js:356:32) at Function.Module._load (module.js:311:12)

when running npm init. Is this something wrong on my end?

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

Most likely on your end. Have you taken a look at this issue? https://github.com/nodejs/node/issues/2814

justin
justin
~ 7 years ago

You're right. I upgraded node from 4.2.3 to 5.1.1 and the problem is gone.

Amidamaru
Amidamaru
~ 7 years ago

Hi Tyler, I passed through your guidelines in this video. But I have a small question. How can you know which is an appropriate version of those dependency packages? I mean babel version... and the other packages are touched upon in your lesson. Why it should go with this babel version but not another version....? Thank u.

Danny
Danny
~ 7 years ago

Sublime. Brogrammer Theme with Oceanic Next Color Scheme.

Best theme and colours EVER

Jun
Jun
~ 7 years ago

This post so useful! I was stuck at the component folder and running 'webpack -w' over and over...

Itai
Itai
~ 7 years ago

Hi Taylor, Which terminal program are you using? It looks nice.

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

iTerm 2 😃

Itai
Itai
~ 7 years ago

Thanks! Really enjoy the series, by the way.

Brian Ray
Brian Ray
~ 7 years ago

post error

Brian Ray
Brian Ray
~ 7 years ago

Tyler,

Thanks for the tutorial. Were you able to find Rob's error? Webpack -w is throwing the same Output filename not configured error. My code is on github @https://github.com/b-rays/roofersxchange. Cheers, Brian.

Sergei
Sergei
~ 7 years ago

Brian,

Not sure if this will fix all issues, but for starters your github repo seems to be missing the app/components/main.js file, and your webpack.config.js file is pointing into a directory different from the one shown in the video (you are using app/app/main,js over app/components/main.js)

Sergei
Sergei
~ 7 years ago

Tyler,

Great introduction, but when I open index.html at the end of the exercise I'm not getting any kind of hello world. I've got no errors on webpack or chrome devtools. Any idea what could be wrong? link below https://github.com/sgarcia-dev/react-examples

daphsta
daphsta
~ 6 years ago

Hi Sergei, I've been having the same problem as above and it seems like React is not loaded hence not connecting to the React devtools in Chrome. I'll be keen to see if you have found a solution to this problem

Philip John
Philip John
~ 6 years ago

sudo xcodebuild -license

fixed my numerous node-gyp errors and permission errors on a mac

Jonathan Ankiewicz
Jonathan Ankiewicz
~ 6 years ago
ERROR in Loader /Users/jankiewicz/Desktop/FRONTEND/Data Display/marketing display data/node_modules/babel-core/index.js?{"presets":["es2015","react"]} didn't return a function

I am having trouble finding a resolve for this, any recommendations?

Arvin
Arvin
~ 6 years ago

I simply can't get anything going here. Cloned your repo, then "npm install webpack -w" in the root, then webpack -w and nothing but errors.. I'm really frustrated here.

Arvin
Arvin
~ 6 years ago

-bash: webpack: command not found

Please help.

Scozzi
Scozzi
~ 6 years ago

Trying to install the babel packages to begin this course, and I'm getting some serious errors coming back from trying to install xo with npm. How can you effectively deal with constant dependency issues?

Scozzi
Scozzi
~ 6 years ago

Trying to install the babel packages to begin this course, and I'm getting some serious errors coming back from trying to install xo with npm. How can you effectively deal with constant dependency issues?

Jen
Jen
~ 6 years ago

ReactDOM.render(<Main />, document.getElementByID('app'))' should be: ReactDOM.render(<Main />, document.getElementById('app')) (lowercase 'd' in ID) ...just thought I would mention it - I kept getting: bundle.js:64 Uncaught TypeError: document.getElementByID is not a function(…) Thanks so much - this is great!

Taher
Taher
~ 6 years ago

Hi Tyler, First off, Great series! incredibly helpful! i built an entire app from scratch from what you put on there and it's great! I'm having some trouble getting it to run on a server though. I'm using the express server with passportjs for authentication, but i don't know how to integrate the router that i wrote based off of your tutorial with the express server... i was wondering if you could provide some insight/direction there. I know it was suggested to use a different server to someone else who posted earlier but i'm kind of stuck with express because i have all of my authentication running off of it.

Thank you

Metal
Metal
~ 6 years ago

Mines working(see the "Hello World" on chrome) only if I change webpack.config.js

loader: 'babel' to 'babel-loader'

Siva
Siva
~ 6 years ago

Thanks for the post. I was facing the same issue. finally got this working.

Pabba Anubharath
Pabba Anubharath
~ 6 years ago

Thanks a lot, I resolved my issue by changing babel to babel-loader.