Angular-cli: 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

[animamundi]

@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

[born2net]

let me know if you have any questions @filipesilva

[animamundi]

@born2net when contributors/members ask for a simple repro, they normally mean to start a new project from scratch and trace your steps in reproducing the problem. By doing this, you isolate the problem from the rest of your application, which makes it easier for contributors to resolve. Often enough people actually realise the fault is on their side when they trace the steps to reproducing the problem.

[born2net]

Yes I can understand that however I am pretty confident that in this case there is a bug as in 4.0 there were no issues and 4.1 the error bagan, same code base, regards

[animamundi]

Regardless, you still need to provide the most simplistic steps to reproduce the problem as possible. Which means starting a new project from scratch and reproducing the problem with that rather than a full blown application that has been stripped back a bit.

[born2net]

@filipesilva will you be able to work with the existing project as its pure cli project and I removed everything as it just has a single component. The error is derived from the cli config and not the project itself. i.e., it's erroring on require because of libs that are included in packages.json which has require in them and not the project code.

[animamundi]

Sorry, I was looking at angular kitchen sink!

[born2net]

ya no it's this one: https://github.com/born2net/cli-filipesilva
cleaned up

[filipesilva]

@born2net I tried installing your example, running ng serve -o, and I saw this error:

VM536:9 Uncaught ReferenceError: require is not defined
    at eval (eval at webpackJsonp.7.module.exports (addScript.js:9), <anonymous>:9:9)
    at eval (eval at webpackJsonp.7.module.exports (addScript.js:9), <anonymous>:543:4)
    at eval (<anonymous>)
    at webpackJsonp.7.module.exports (addScript.js:9)
    at Object.217 (xml2js.js?888d:1)
    at __webpack_require__ (bootstrap ea9a8b2…:52)
    at Object.528 (scripts.bundle.js:349)
    at __webpack_require__ (bootstrap ea9a8b2…:52)
    at webpackJsonpCallback (bootstrap ea9a8b2…:23)
    at scripts.bundle.js:1

Then I changed the CLI dependency from "@angular/cli": "^1.0.1", to "@angular/cli": "1.0.0",, reinstalled everything, and I saw the same error on the browser.

This tells me that the error is not related to the CLI itself, but rather something in your application. I noticed there's a service worker running, remember to disable it if you want to see up to date results.

Also, next time when you wish to present a bug please do take the time to make a very simple repro to show it. https://github.com/born2net/cli-filipesilva has over 90 dependencies... it's very hard to try and discern if an error is due to your application or to the build system.

A good way to make a simple repro is to make a brand new application via ng new repro-app, and then add the minimum possible to see the error.

[born2net]

Thank you for the update, I will work on this some more and report my findings.
regards

[pidompa]

You can try and check if in your angular-cli.json you added some script path not valid

[geyuqiu]

To reproduce Angular v.8+:

generate Repository choosing Electron:
https://github.com/ngx-rocket/generator-ngx-rocket

changes in angular-cli.json etc.
https://stackoverflow.com/questions/45689376/accessing-filesystem-in-angular-2-app-using-electron

When it worked:
https://github.com/alxlchnr/electron-desktop-app

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}