Menu
I am a beginner to react. While setting up the installation and loading up all the dependencies, I finally run the npm start command but this generates the error ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in 'C:\Users\me\Documents\React\react-playlist' I have performed all the installation steps correctly. I have also attached the screenshot of the project folder. I also got webpack installed globally v 3.10.0 but that also didn't work. I also tried by inserting resolve loaders code in package.json file but that also didn't work. Here is the error picture.
P.S.: I'm following this tutorial
Below is the code of my project. Package.json file:
{
"name": "react-playlist",
"version": "1.0.0",
"description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iamshaunjp/react-playlist.git"
},
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/iamshaunjp/react-playlist/issues"
},
"homepage": "https://github.com/iamshaunjp/react-playlist#readme",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
Webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'env']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
} };
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React - Novice to Ninja!</title>
</head>
<body>
<script src="/app/bundle.js"></script>
</body>
</html>
861
asked Sep 09 '26 08:09
It looks like module.loaders section of your webpack config is for older versions of webpack while you are using the latest (3.10.0). This is how it should look with the latest webpack for your configuration:
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "src")
],
use: {
loader: 'babel-loader'
},
options: {
presets: ['react', 'es2015', 'env']
}
},
{
test: /\.css$/,
use: {
loader: 'style-loader!css-loader'
}
}
]
All webpack options are described in the docs in the configuration section here.
132
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
