Develop Reference

Angular 14 Webpack 5 error, unnecessary nodejs modules (I think) are preventing me from serving application

I am working in a brand new Angular 14 application. My node version is v14.20.0,
npm is 8.17.0
I'm not sure why, but for some reason I have all of these nodejs dependencies included. I've tried deleting node_modules and npm installing again, but I still run into this issue.
I've tried a number of solutions I saw online for this issue, but I can't seem to outrun this bug.
How can I find and remove the package(s) that is requiring all of these dependencies?
below is the initial error that I saw, and it occurred for a number of different packages.
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: { "zlib": require.resolve("browserify-zlib") }'
- install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "zlib": false }
This error appeared for a number of different dependencies. I was able to resolve the errors in my terminal by installing via npm, and then adding these paths to my tscongfig.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"path": [ "./node_modules/path-browserify" ],
"stream": ["./node_modules/stream-browserify"],
"http": ["./node_modules/stream-http"],
"crypto": ["./node_modules/crypto-browserify"],
"zlib": ["./node_modules/browserify-zlib"]
}
This solved the Webpack 5 errors in the terminal. However, when I went observe the application in the browser, I saw two more errors.
capability.js:1 Uncaught ReferenceError: global is not defined
at 2942 (capability.js:1:28)
at __webpack_require__ (bootstrap:19:1)
util.js:109 Uncaught ReferenceError: process is not defined
at 74 (util.js:109:1)
I resolved them by adding the below code to my polyfills.ts file
import 'zone.js'; // Included with Angular CLI.
(window as any).global = window;
(window as any).process = { env: { DEBUG: undefined }, };
now I am getting this error in the chrome console
Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')
at 8606 (response.js:43:45)
I think that the answer is to just not import whatever package contains all of these dependencies, but I don't know how to locate and remove it.
If anyone has any insight into this it would be greatly appreciated.
I would post screenshots, but my rep isn't high enough yet. If you need more information please ask.
Thank you

Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after I updated to nextjs#10.4

After I updated to nextjs 10.1.3 I had an error when I launch yarn dev.
error - ./public/static/style.scss
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /path_to/node_modules/mini-css-extract-plugin/dist/loader.js
- /path_to/node_modules/next/dist/compiled/webpack/bundle4.js
- /path_to/node_modules/next/dist/compiled/webpack/webpack.js
- /path_to/node_modules/next/dist/next-server/server/config-utils.js
- /path_to/node_modules/next/dist/next-server/server/config.js
- /path_to/node_modules/next/dist/next-server/server/next-server.js
- /path_to/node_modules/next/dist/server/next.js
- /path_to/node_modules/next/dist/server/lib/start-server.js
- /path_to/node_modules/next/dist/cli/next-dev.js
- /path_to/node_modules/next/dist/bin/next
Could not find files for /[lang] in .next/build-manifest.json
Could not find files for /[lang] in .next/build-manifest.json
event - compiled successfully
I found that similar issue but it did not solve my problem.
I removed packages and lock files, and also tried to install webpack etc reading this.
Which drove me to another error about tap what drove me to this so I remove what I just did, so back to the first error above.
Here is my next.config.js
const withSass = require('#zeit/next-sass');
const withCSS = require("#zeit/next-css");
module.exports = withCSS(withSass({
webpack(config, options) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: 'url-loader',
options: {
limit: 100000
}
}
});
return config;
}
}));

so I have similar setup as what you have i.e Next.js with Antd and Less. I got this error recently after upgrading to the latest version of nextjs (10.2.0). Fortunately for me, I stumbled on this question and clicked on the Similar issue link you attached and I got the solution from there. I resolved this by installing webpack
npm i webpack#webpack-4 --save-dev
Hopefully this would save someone else's time :). Cheers

In my case the project to be maintained consists of Next.js (9.3.2), Antd, Less, Typescript.
Simply REVERT what you have done to fix this problem first, and then run the command:
yarn upgrade next 10.2.3
yarn add webpack#webpack-4 --dev
Patience is one of the keys I got in this journey.
The scenario of updating next.js version breakdown is here:
static export;
getStaticPaths NEEDS the fetch() method in my case, even someone says it should not be done;
fetch() is browser dependent, which suppose not to be work server-side;
installing yarn add isomorphic-unfetch will not aid anything, thus upgrade next.js version is the only option
next >= 10.0.0 has the handy fix, after several hours researching, next 10.2.3 does the best, no need to change the version of typescript (^3.7.5), etc;
finally when running the command: next build && next export,
the top stack mini-css-extract-plugin/dist/loader.js locates the error Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
run yarn add webpack#webpack-4 --dev;
re-run next build && next export

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.

You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.

How to create aurelia typescript project with vs2017rc

I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.

Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.

Karma tests error "unable to init ocLazyLoad"

From the quickstart sb-admin-angular, I am trying to run the tests, but I get the error unable to init ocLazyLoad. (This is a Windows7 machine.)
The command I use to run the tests is:
$ grunt test --force
I understand from this thread that I must make sure that the path to the ocLazyLoad script is added in karma.conf.js.
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
...
'bower_components/oclazyload/dist/ocLazyLoad.min.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
I have also tried using Bower to reinstall ocLacyLoad, as suggested in the aforementioned thread. I was given a choice of versions and selected the first option:
Unable to find a suitable version for oclazyload, please choose one:
1) oclazyload#~0.5.2 which resolved to 0.5.2 and is required by sb-admin
2) oclazyload#^1.0.9 which resolved to 1.0.9
What step am I missing or corrupting here, please?

I would update oclazyload in bower.json file to version 0.6.0 or higher. Some 0.5.x version introduced this bug and it is solved at 0.6.0 version on.
Current value on bower.json value of the example was 0.5.2 which you used, too.
References:
[1] https://github.com/ocombe/ocLazyLoad/issues/122 (issue in GitHub)

It looks like this is what you are experiencing:
Error in karma testing
This should be fixed in ocLazyLoad 0.6.0.