React Setup: webpack errors


#1

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 babel-loader@6.4.1 requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.
npm WARN root@1.0.0 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

root@1.0.0 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! root@1.0.0 build: `webpack`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the root@1.0.0 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 npm@3.10.10
3 info using node@v6.10.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle root@1.0.0~prebuild: root@1.0.0
6 silly lifecycle root@1.0.0~prebuild: no script for prebuild, continuing
7 info lifecycle root@1.0.0~build: root@1.0.0
8 verbose lifecycle root@1.0.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle root@1.0.0~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 root@1.0.0~build: CWD: /Users/steph/Goucher/DA 670S WebDev Studio/ReactJS/root
11 silly lifecycle root@1.0.0~build: Args: [ '-c', 'webpack' ]
12 silly lifecycle root@1.0.0~build: Returned: code: 2  signal: null
13 info lifecycle root@1.0.0~build: Failed to exec build script
14 verbose stack Error: root@1.0.0 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 root@1.0.0
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 root@1.0.0 build: `webpack`
22 error Exit status 2
23 error Failed at the root@1.0.0 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

> root@1.0.0 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????


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.