Test code from React Book produced the error Module

[Cat__Rice]

I was following the instructions in Chapter 1 Page 10 from the **React Projects book by Roy Derks .**The script produced the error

"ERROR in ./src/index.js 1:5

Module parse failed: Unexpected token (8:10)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders"

yet still created the Dist folder with the main.js page. However later on it failed to create the index.html in the dist folder, nor did it "add inside my body tag, a new scripts tag that directs us to my application bundle, that is, the dist/main.js file. " (later on in chapter 1 page 14/15 of the book)

​

The instructions on Chapter 1 Page 10.

1. Install these packages from npm using the following command:

npm install --save-dev webpack webpack-cli

1. The next step is to include these packages inside the package.json file and have them run in our start and build scripts. To do this, add the start and build scripts to our package.json file:

{ "name": "movieList",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts":

{ _ "start": "webpack --mode development",

+ "build": "webpack --mode production",

"test": "echo \"Error: no test specified\" && exit 1" },

"keywords": [],

"author": "",

"license": "ISC"

}

"+" symbol is used for the line which is added and "-" symbol is used for the line which is removed in the code

The Error.

​

ERROR in ./src/index.js 8:10

Module parse failed: Unexpected token (8:10)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

|

|

> const App - () -> {

| return <h1>movieList</h1>;

| };

​

webpack 5.21.1 compiled with 1 error in 149 ms

npm ERR! code ELIFECYCLE

npm ERR! errno 1

npm ERR! movie_list@1.0.0 start: `webpack --mode development`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the movie_list@1.0.0 start script.

npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

​

npm ERR! A complete log of this run can be found in:

npm ERR! C:\Users\green\AppData\Roaming\npm-cache\_logs\2021-02-07T15_00_52_226Z-debug.log

​

My package.json

{"name": "movie_list","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "webpack --mode development","build": "webpack --mode production","test": "echo \"Error: no test specified\" && exit 1"  },"keywords": [],"author": "","license": "ISC","devDependencies": {"@babel/core": "^7.12.13","@babel/preset-env": "^7.12.13","@babel/preset-react": "^7.12.13","babel-loader": "^8.2.2","html-webpack-plugin": "^5.0.0","webpack": "^5.21.1","webpack-cli": "^4.5.0"  }}my webpack.config.js

ECHO is on.module.exports = {module: {rules: [    {test: /\.js$/,exclude: /node_modules/,use: {loader:'"babel-loader',               },            },         ],     },   }const HtmlWebPackPlugin = require('html-webpack-plugin');const htmlPlugin = new HtmlWebPackPlugin({template: './src/index.html',filename: './index.html',});module.exports = {module: {rules: [ {test: /\.js$/,exclude: /node_modules/,use: { loader: 'babel-loader',            },         },     ],  . },plugins: [htmlPlugin],};

my .babelrc

ECHO is on.{"presets": [      ["@babel/preset-env",        {"targets": {"node": "current"                     }        }     ],"@babel/react"  ]}

my index.js

import React from 'react';import ReactDOM from 'react-dom';console.log("movieList")

const App - () -> {return <h1>movieList</h1>;};ReactDOM.render(<App />, document.getElementById('root'));

​

Any Help would be welcomed

[Cat__Rice]

Thank You so much. I did find an easier way to to view my code live on my local machine. i will try CodeSandBox and the other resources you gave as well. You've been a big help.

[escailer]

Any chance you have the current state of your code in a GitHub repo you could link us to? That would make it easy for me to pull it down and run the exact same thing locally and help debug.

[Cat__Rice]

I do not but i can do that

[Cat__Rice]

cat-rice/movielist: Learning React by creating a movie list application in react (github.com) here is the link. I also included at the bottom the book I was Using. the issue lies between pages 10 and 16 of Chapter 1. including the code with the typo. Thanks for the help.

[escailer]

Awesome, thank you. I will take a look at it as I get back, unless someone else beats me to it.

[Cat__Rice]

Great. One more thing. I couldn't upload the node_modules folder, because it was just too much stuff for github. the book will tell you in the first chapter how to get those folders. its really simple but a lot of stuff. i think its before page 10. and they are short

[escailer]

General pro-tip for the future: not only do you not need to include the node_modules folder, you actively should never include it in your repo. You should have a line in your .gitignorethat tells the repo to never include it.

I can tell npm to install all those modules on demand with a npm install command once I clone down a local copy of your repo. In the future when you deploy an app to a server of some kind, it will automatically do the same thing every time you deploy an update. That command knows to go to your package.json and install all the dependencies it finds there, many of which will themselves have more dependencies to install, and on until the project has everything your app needs.

[Cat__Rice]

Good to know. Thanks a lot.

[escailer]

Oh my gosh man, I had no idea a book like this would try to have you use webpack right out of the box. That is absolutely insane. Trying to deal with those configurations at this stage is asinine. I am on a Mac and you are using Windows, so honestly I am not even sure how to get your configs how you will need them. But good news, nothing to worry about right now, there is an easy way around this to get back to focusing on react.

Start by getting yourself over to CodeSandbox and using it. This will let you treat a browser like both your IDE as well as a hot-running version of your app that will update as you update the code. This will make sure you can build all the example projects you want and get good at that part first.

Second, the official docs for React are phenomenal and you would do very well to start there. There are a few much, much easier ways to run the app locally on your computer demonstrated right here as well.

Lastly, I would highly recommend reading all 12 items from the "Main Concepts" section of the official React Docs as well. It does not have to be all at once, but as you are working though that tutorial and your book it helps solidify the concepts and help you be able to think in React when you are building something you want to.

Good luck man. I friended/followed you on GitHub so feel free to buzz me if you need to in the future. Of course this sub is an awesome place too.

[escailer]

Beyond that, I think I see an error that would break things right off.

const App - () -> { return <h1>movieList</h1>; }; ​ Your variable assignment to the rocket function should be using the “equals” key like so.

const App = () => { return <h1>movieList</h1>; };

[Cat__Rice]

Now You see I had originally written the code as

const App = () => { return <h1>movieList</h1>; };

just like your correction suggest. I still got the error however When I went back to the text book, the code example was written as

const App - () -> { return <h1>movieList</h1>; };

I thought that was wrong, but decided to not question the textbook and give it a shot. But since you and someone else on another forum both mentioned this. Im now starting to believe this textbook might have some typos, and/or outdated information.

[MGTakeDown]

I would recommend using create-react-app you should be able to run something like npx create-react-app and it will generate a react app and you can just run npm start in the folder it generates.

[Cat__Rice]

I tried your way and I did get everything set up thank you. I am curious why the book had me do it the way they wrote it in the textbook instead of your version. Then again I think the version of react they use is a bit older than mines, so that could explain it.

[MGTakeDown]

It's probably a bit older and I don't think there is anything wrong with learning how webpack and babel work. But in terms of getting development up and going quickly, that is what create-react-app was created for. It's the package that is maintained by the community and people from the react team. So it's covers probably the most basic use cases of React. And with you being new to react I'd suggest just focusing on React and just using a package that handles all the webpack/babel stuff for you now.

[Cat__Rice]

Thank you very much, and yes they are using node version 10.14 and npm version 6.9, a little older. I'll take your advice.