egghead.io webpack angular tutorial

Question

I have problems with the tutorial webpack-angular from egghead.io. I'm in the step 3 "ES6 with Babel".

I need your help because I would like to resolve it.

I'm following your tutorial and I'm freezing in this step:

This is the message Chrome devTool where I got an error

...........

bundle.js:17416 Uncaught TypeError: __webpack_require__(...) is not a function(anonymous function) @ bundle.js:17416__webpack_require__ @ bundle.js:20Object.defineProperty.value @ bundle.js:66(anonymous function) @ bundle.js:69
Navigated to http://localhost:8080/

The directive 'Hello webpack!' is not showing

.........

This is the package.json file:

{
  "name": "webpack-angular",
  "version": "1.0.0",
  "description": "Example of using webpack",
  "main": "app/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\"",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app"
  },
  "keywords": [
    "webpack",
    "angular",
    "egghead.io"
  ],
  "author": "Pablo B.",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^1.16.2"
  }
}

................

This is the webpack.config.js file:

module.exports = {
  context: __dirname + '/app',
  entry:  './index.js',
  output:{
    path: __dirname + '/app',
    filename: 'bundle.js'
  },
  module:{
    loaders:[
      { test: /\.js$/, loader: 'babel-loader'}
    ]
  }
}

And this is the result of the terminal after running the npm start command.

webpack npm start

[email protected] start /home/pablo/Documents/tutoriales/webpack node node_modules/.bin/webpack-dev-server --content-base app

http://localhost:8080/webpack-dev-server/ webpack result is served from / content is served from /home/pablo/Documents/tutoriales/webpack/app [BABEL] Note: The code generator has deoptimised the styling of "/home/pablo/Documents/tutoriales/webpack/node_modules/angular/angular.js" as it exceeds the max of "500KB". Hash: 69ba24ec3148fc14b2e7 Version: webpack 2.2.1 Time: 3976ms Asset Size Chunks Chunk Names bundle.js 1.11 MB 0 [emitted] [big] main chunk {0} bundle.js (main) 1.1 MB [entry] [rendered] [0] ./app/directives/index.js 69 bytes {0} [built] [1] ./~/angular/index.js 47 bytes {0} [built] [2] ./app/directives/kcd-hello.js 391 bytes {0} [built] [3] ./~/angular/angular.js 1.1 MB {0} [built] [4] ./app/index.js 114 bytes {0} [built] webpack: bundle is now VALID.

Any Idea?

The main problem is to show the directive "Hello Webpack!". Why do I get the webpack require error?

Thanks in advance.

Kind regards

Pablo Alaniz Pablo Alaniz · Accepted Answer · 2017-02-02T01:45:40

I fixed it myself. I change the way to do it.

Before:

const angular = require('angular'); 
const ngModule = angular.module('app',[]); 
require('./directives')(ngModule);

After:

const angular = require('angular'); 
const ngModule = angular.module('app',[]);
require('./directives').default(ngModule);

egghead.io webpack angular tutorial

2 Answers