Hey people, I saw this thread which is now closed. I’m getting a bit of a different error and can’t figure how to get around it based on the info there and my own accord. HELP much appreciated!
FIRST ERROR when installing babel: no peer dependency
UNMET PEER DEPENDENCY webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN [email protected] No repository field.
FILES:
.babelrc
{ presets: [ 'react'] }
webpack.config.js
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'head'
});
module.exports = {
entry: __dirname + '/app/index.js',
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel_loader'
}
]
},
output: {
filename: 'transformed.js',
path: __dirname + '/build'
},
plugins: [HTMLWebpackPluginConfig]
};
package.json
{
"name": "root",
"version": "1.0.0",
"description": "test 3",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-react": "^6.23.0",
"html-webpack-plugin": "^2.28.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.2"
}
}
index.js
var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App');
ReactDOM.render(
<MyCompnentClass />,
document.getElementById('app')
);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Local App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
App.js
var React = require('react');
var MyComponentClass = React.createClass ({
render: function () {
return (
<h1>Hello world</h1>
);
}
});
module.exports = MyComponentClass;
In my root folder I put in the command npm run build and get this error:
stephanies-MacBook-Pro-2:root steph$ npm run build
[email protected] build /Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root
webpack
Hash: ef65566bd14e1c1cf5fa
Version: webpack 2.2.1
Time: 432ms
Asset Size Chunks Chunk Names
index.html 151 bytes [emitted]
ERROR in Entry module not found: Error: Can't resolve 'babel_loader' in '/Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root'
Child html-webpack-plugin for "index.html":
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 516 bytes {0} [built]
npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the root package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs root
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls root
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root/npm-debug.log
the debug log shows this:
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.5/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
10 verbose lifecycle [email protected]~build: CWD: /Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root
11 silly lifecycle [email protected]~build: Args: [ '-c', 'webpack' ]
12 silly lifecycle [email protected]~build: Returned: code: 2 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `webpack`
14 verbose stack Exit status 2
14 verbose stack at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:191:7)
14 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:191:7)
14 verbose stack at maybeClose (internal/child_process.js:877:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root
17 error Darwin 15.6.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
19 error node v6.10.0
20 error npm v3.10.10
21 error code ELIFECYCLE
22 error [email protected] build: `webpack`
22 error Exit status 2
23 error Failed at the [email protected] build script 'webpack'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the root package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error webpack
23 error You can get information on how to open an issue for this project with:
23 error npm bugs root
23 error Or if that isn't available, you can get their info via:
23 error npm owner ls root
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
running start shows another webpack error:
stephanies-MacBook-Pro-2:root steph$ npm run start
> [email protected] start /Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root
> webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: b343935262c738b9de89
Version: webpack 2.2.1
Time: 1065ms
Asset Size Chunks Chunk Names
transformed.js 315 kB 0 [emitted] [big] main
index.html 212 bytes [emitted]
chunk {0} transformed.js (main) 301 kB [entry] [rendered]
[35] (webpack)-dev-server/client?http://localhost:8080 5.44 kB {0} [built]
[36] ./~/ansi-html/index.js 4.26 kB {0} [built]
[37] ./~/ansi-regex/index.js 135 bytes {0} [built]
[39] ./~/events/events.js 8.33 kB {0} [built]
[40] ./~/html-entities/index.js 231 bytes {0} [built]
[44] ./~/punycode/punycode.js 14.7 kB {0} [built]
[47] ./~/querystring-es3/index.js 127 bytes {0} [built]
[50] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
[76] ./~/strip-ansi/index.js 161 bytes {0} [built]
[78] ./~/url/url.js 23.3 kB {0} [built]
[79] ./~/url/util.js 314 bytes {0} [built]
[80] (webpack)-dev-server/client/overlay.js 3.6 kB {0} [built]
[81] (webpack)-dev-server/client/socket.js 856 bytes {0} [built]
[83] (webpack)/hot/emitter.js 77 bytes {0} [built]
[84] multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js 40 bytes {0} [built]
+ 70 hidden modules
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js
Module not found: Error: Can't resolve 'babel_loader' in '/Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root'
@ multi (webpack)-dev-server/client?http://localhost:8080 ./app/index.js
Child html-webpack-plugin for "index.html":
chunk {0} index.html 541 kB [entry] [rendered]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 516 bytes {0} [built]
webpack: Failed to compile.
All this even though the build folder and new index.html IS created. Source code for the blank page that the new index.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MY First Local App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
How can I fix this???