Skip to content

unable to build due to @angular/cli FS dependency on client side #21325

@nhhockeyplayer

Description

@nhhockeyplayer

🐞 Bug report

all client side SPA use of package 'perf_hooks, 'os', 'fs' are non-existent
we have no way of predicting what packages included in package.json use 'perf_hooks, 'os', 'fs'

so all builds fail now

  • new
  • [X ] build
  • serve
  • test
  • e2e
  • generate
  • add
  • update
  • lint
  • extract-i18n
  • run
  • config
  • help
  • version
  • doc

Is this a regression?

Yes, the previous version in which this bug was not present was: angular 11

somehow the ecosystem was breached by npm issues and then the angular 12 changes creating a rabbit hole of all dependent build tools and compilers

I use Nrwl Nx and they have mitigated some of this by governing WHICH typescript version to operate so my project does not have typescript installed as an npm package as you can see in the nx-report its found

other projects in my mono-repo build fine... API, MOBILE APPS, but the two I am failing to build happen to have a large sass scaffold that gets built near the end and I do not know to what extent thats triggering these issues

Description

cannot build anymore with angular compiler

🔬 Minimal Reproduction

any attempt to upgrade to angular 12 will produce these issues are rampant on web

🔥 Exception or Error

✔ Browser application bundle generation complete.

./node_modules/typescript/lib/typescript.js:4747:17-38 - Warning: Module not found: Error: Can't resolve 'perf_hooks' in '/Users/me/u/app/node_modules/typescript/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
	- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "path": false }


## 🌍 Your Environment

Angular CLI: 12.1.1
Node: 16.3.0 (Unsupported)
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: undefined
...

Package Version

@angular-devkit/architect 0.1201.1 (cli-only)
@angular-devkit/core 12.1.1 (cli-only)
@angular-devkit/schematics 12.1.1 (cli-only)
@schematics/angular 12.1.1 (cli-only)

Warning: The current version of Node (16.3.0) is not supported by Angular.

NX Report complete - copy this into the issue template

Node : 16.3.0
OS : darwin x64
yarn : 1.22.10

nx : 11.6.3
@nrwl/angular : 12.5.7
@nrwl/cli : 12.5.7
@nrwl/cypress : 12.5.7
@nrwl/devkit : 12.5.7
@nrwl/eslint-plugin-nx : 12.5.7
@nrwl/express : Not Found
@nrwl/jest : 12.5.7
@nrwl/linter : 12.5.7
@nrwl/nest : 12.5.7
@nrwl/next : Not Found
@nrwl/node : 12.5.7
@nrwl/react : Not Found
@nrwl/schematics : 8.12.11
@nrwl/tao : 12.5.7
@nrwl/web : Not Found
@nrwl/workspace : 12.5.7
@nrwl/storybook : 12.5.7
@nrwl/gatsby : Not Found
typescript : 4.3.5


**Anything else relevant?**


<!-- ✍️Is this a browser specific issue? If so, please specify the browser and version. -->
browsers do not support the packages specified and they need to be muted for the build to succeed which fails to mute

we are then forced to start installing WEBPACK builders and npm packages for webpack 

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions