Error with Setting Up Environment

[jessegoraya]

I went through the video series and it was great. However i'm having trouble establishing my environment as I am not able to see my react generated div tag created in the Introduction to JSX video of Section 2. I installed node.js, downloaded the start code from github, did my npm install and upon compile got the error "Breaking Change: Its's not longer allowed to omit the '-loader' when using loaders. You need to specify the file-loader instead of file. I fixed this error by changing the webpack.config.js .html loader under module from "file?name=[name].[ext]" to "file-loader?name=[name].[ext]".

However upon doing that I received an error stating "Conflict: Multiple assets emit to the same filename" error when compiling. I fixed this error by changing the output filename in the webpack.config.js from bundle.js to [name].js.

Then it compiled fine but when looking at it in the browser I noticed that there was an error stating the server has not found anything matching the request URI and mentions bundle.js. I looked at my compile in the command prompt and it appears to compile index.html but did not see app.js but did see that there was an output of html.js. Trying things i replaced bundle.js in Index.html with html.js and it compiles without the URI error but there is not react div tag in my Index.html when I view it in the browser.

Do you have any suggestions?

[ergauravgoyal]

@sayar & @codefoster please help us.I am also facing same issue

[codefoster]

@gauravgoyal1911, I'm not able to help. I've not been skilling up on React enough. If @sayar doesn't have time to help, then I would just glean the concepts from the video, but then go to something like Learn React or Wes Bos' React for Beginners to get started on your code. All good stuff.

[vikssevishnu]

Hi, Please use the below line of code to fix the multiple conflict error. In the webpack.config.js insert this line before the output tag, entry: ['./index.html', './app.js'],   output: {
path: path.join(__dirname, 'dist'), filename: 'bundle.js' },

[engmyahya]

@vikssevishnu 's fix was actually my fix.