In latest angular 4.1 / cli 1.1 getting Uncaught ReferenceError: require is not defined

[born2net]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
Up to ng 4.0.1 / cli 1.0 all was great
upg to 4.1 and 1.1 and now I am getting

Uncaught ReferenceError: require is not defined
  (anonymous function)	
  (anonymous function)	
  webpackJsonp.25.module.exports	
  732	
  __webpack_require__	
  1658	
  __webpack_require__	
  webpackJsonpCallback	
  (anonymous function)	

Looking at the stack won't help much:

/*
	MIT License http://www.opensource.org/licenses/mit-license.php
	Author Tobias Koppers @sokra
*/
module.exports = function(src) {
	if (typeof execScript !== "undefined")
		execScript(src);
	else
		eval.call(null, src);
}



//////////////////
// WEBPACK FOOTER
// ./~/script-loader/addScript.js
// module id = 25
// module chunks = 11

let me add that everything works, but getting this annoying message at runtime.

Expected behavior
no error

Minimal reproduction of the problem with instructions
You can see the issue with this project:
https://github.com/born2net/studio-lite

git clone https://github.com/born2net/studio-lite.git
cd studio-lite
npm install -g @angular/cli@latest
npm install
open browser to: http://localhost:4208/

versions:

@angular/cli: 1.0.1
node: 6.9.5
os: win32 x64
@angular/animations: 4.1.0
@angular/common: 4.1.0
@angular/compiler: 4.1.0
@angular/core: 4.1.0
@angular/forms: 4.1.0
@angular/http: 4.1.0
@angular/platform-browser: 4.1.0
@angular/platform-browser-dynamic: 4.1.0
@angular/router: 4.1.0
@angular/cli: 1.0.1
@angular/compiler-cli: 4.1.0
@angular/language-service: 4.1.0
@ngtools/webpack: 1.3.1

Regards,

Sean

[nathanosdev]

@born2net I'm not sure if it's the same cause because I don't use the CLI but I had the exact same symptoms as you. I ran into this issue while following the tutorial on the Angular website for Universal with Webpack. In my Webpack config I had the target set to 'node', but if it's to be run in the browser then the target should be set to 'web'. When the target is set to 'node', webpack allows NodeJS to handle module resolution using require, when it's set to 'web' then Webpack will monkey patch all the require statements.

[born2net]

ya I am on cli so I don't have much control.
hope it gets fixed soon
regards

[madCoder24]

I am using angular-cli to build a project that uses electron and I am having a similar issue. I double-checked that I have @types/node installed as referenced by the issue #2099.

[filipesilva]

Heya, can you provide a simple repro? https://github.com/born2net/studio-lite isn't a very minimal at all and it's very hard to figure out what's wrong in the middle of a full-blown application.

Preferably a brand new project with the minimum number of changes needed to see the issue you are experiencing.

[born2net]

hi, the app is kind of big however the error is thrown before anything even loads

[born2net]

before the main module

[filipesilva]

I'm sorry but I really need a simple repro to investigate. When you have time to put one together I can have a look.

[born2net]

ok will do,
regards

[madCoder24]

@filipesilva Try this repo: https://github.com/madCoder24/sample-app If it isn't minimal enough please let me know and I can try to reduce it.

[filipesilva]

@madCoder24 it looks like you're trying to do an electron project, but I have to say we don't really have official electron support.

I ran your app with ng serve and got this runtime error:

Uncaught TypeError: fs.existsSync is not a function
    at Object.<anonymous> (index.js:6)
...

This is true, in the browser there is no fs lib. So that is the expected result.

[madCoder24]

@filipesilva Okay. I appreciate you looking at it.

[born2net]

@filipesilva ok I cut down the application to bare minimum so you can easily work oni it:
https://github.com/born2net/cli-filipesilva

Angular 2 Kitchen sink: http://ng2.javascriptninja.io
and source@ https://github.com/born2net/Angular-kitchen-sink
Regards,

Sean