I have installed compression-webpack-plugin using this link and added Compression plugin in plugin section of webpack.config.js file as suggested here
When I run npm run build I am getting an error
Algorithm "brotliCompress" is not found in "zlib"
I am using node v8.11.3.
Here is the full error
C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\cli.js:93
throw err;
^
Error: Algorithm "brotliCompress" is not found in "zlib"
at new CompressionPlugin (C:\Projects\ProjName\FrontEnd\node_modules\compression-webpack-plugin\dist\index.js:171:15)
at Object. (C:\Projects\ProjName\FrontEnd\webpack\webpack.config.prod.js:67:5)
at Module._compile (C:\Projects\ProjName\FrontEnd\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (C:\Projects\ProjName\FrontEnd\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach ()
at module.exports (C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at yargs.parse (C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\cli.js:71:45)
at Object.parse (C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\node_modules\yargs\yargs.js:576:18)
at C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\cli.js:49:8
at Object. (C:\Projects\ProjName\FrontEnd\node_modules\webpack-cli\bin\cli.js:366:3)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (C:\Projects\ProjName\FrontEnd\node_modules\webpack\bin\webpack.js:156:2)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Function.Module.runMain (module.js:693:10)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! ProjName#1.0.0 build: npm run buildsprite && webpack --config ./webpack/webpack.config.prod.js --colors npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the ProjName#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\2048537\AppData\Roaming\npm-cache_logs\2021-12-29T09_59_46_237Z-debug.log
This is how I injected the plugin
new CompressionPlugin({
filename: "[path][base].br",
algorithm: "brotliCompress",
test: /\.(js|css|html|svg)$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: false,
}),
Looks like webpack team needs to update https://webpack.js.org/plugins/compression-webpack-plugin/#using-brotli link.
I replace plugin code as below as below
new BrotliGzip({
asset: '[file].br[query]',
algorithm: "brotli",
test: /\.(js|css|html|svg)$/,
threshold: 10240,
minRatio: 0.8,
quality: 11
}),
where BrotliGzip is defined as
const BrotliGzip = require("brotli-gzip-webpack-plugin");
then it worked.
Im trying to get a readble stream from youtube-dl-exec.
youtubedl(url, {
dumpSingleJson: true,
noWarnings: true,
audioFormat: 'mp3',
//audioQuality: 0,
noCheckCertificate: true,
preferFreeFormats: true,
youtubeSkipDashManifest: true,
referer: 'https://google.com'
})
.then(async output => {
let resource = createAudioResource(output); // output = YtResponse (JSON)
})
.catch(err => console.error(err));
output is typeof YtResponse (JSON with formats and urls, thumbnails etc.)
So with
let url = output.formats[0]?.url;
I can get an URL like
https://r1---sn-h0jelnez.googlevideo.com/videoplayback?expire=
But I can't stream this because it's not a readable stream..
So I tried to use youtube-dl library. But if I wan't to install it, i get this error:
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c npm run check && npm run download
npm ERR! > youtube-dl#3.5.0 check
npm ERR! > bin-version-check python '>=2'
npm ERR! Error: Invalid version range
npm ERR! at module.exports (C:\Users\Admin\Documents\Nodejs\LL-Bot-Musik\node_modules\bin-version-check\index.js:12:25)
npm ERR! at Object.<anonymous> (C:\Users\Admin\Documents\Nodejs\LL-Bot-Musik\node_modules\bin-version-check-cli\cli.js:29:1)
npm ERR! at Module._compile (node:internal/modules/cjs/loader:1101:14)
npm ERR! at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
npm ERR! at Module.load (node:internal/modules/cjs/loader:981:32)
npm ERR! at Function.Module._load (node:internal/modules/cjs/loader:822:12)
npm ERR! at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
npm ERR! at node:internal/main/run_main_module:17:47
npm ERR! A complete log of this run can be found in:
Now I don't know what I can do..
I have created a new project with ANGULAR 12, I am trying to add Jest.js to this project, but I get the next error.
TypeError: Jest: a transform must export something.
at D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\transform\build\ScriptTransformer.js:386:19
at processTicksAndRejections (internal/process/task_queues.js:93:5)
at async Promise.all (index 0)
at async ScriptTransformer.loadTransformers (D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\transform\build\ScriptTransformer.js:378:5)
at async createScriptTransformer (D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\transform\build\ScriptTransformer.js:1106:3)
at async D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\core\build\TestScheduler.js:269:31
at async Promise.all (index 0)
at async TestScheduler.scheduleTests (D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\core\build\TestScheduler.js:262:5)
at async runJest (D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\core\build\runJest.js:387:19)
at async _run10000 (D:\Refraccion\SOFTWARE----\TDD and DBB\demo1\node_modules\#jest\core\build\cli\index.js:408:7)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! demo1#0.0.0 test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the demo1#0.0.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Tom\AppData\Roaming\npm-cache\_logs\2021-06-06T22_50_07_345Z-debug.log
jest.config.js
module.exports = {
moduleNameMapper: {
'#core/(.*)': '<rootDir>/src/app/core/$1',
},
preset: 'jest-preset-angular',
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
package.json
{
"name": "demo1",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "jest",
}
}
Is there some way to fix it in ANGULAR?
Experienced the same thing when I tried to create a new project, so far it isn't compatible with the newest Angular 12 yet that I know of.
Currently learning Vue js and express js through some tutorials, I am still newbie regarding these technologies.
Anyway following the tutorials I am building a small project in which I have a folder "Client" that contains the frontend side of the project and another folder "Server" that contains the backend.
Just before pushing commits to Github, everything was fine, but once I did Github signals some vulnerabilities and after fixing them npm run dev doesn't work anymore.
tried multiples solutions but nothing worked, reinstalled suspicious modules, reinstalled node modules after running npm cache clean --force
This is the error I got
npm run dev
> client#1.0.0 dev D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88
throw new _ValidationError.default(errors, schema, configuration);
^
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
- options[0] misses the property 'patterns'. Should be:
[non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
at validate (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\node_modules\schema-utils\dist\validate.js:88:11)
at new CopyPlugin (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\copy-webpack-plugin\dist\index.js:24:30)
at Object.<anonymous> (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\build\webpack.dev.conf.js:61:5)
at Module._compile (internal/modules/cjs/loader.js:1133:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
at Module.load (internal/modules/cjs/loader.js:977:32)
at Function.Module._load (internal/modules/cjs/loader.js:877:14)
at Module.require (internal/modules/cjs/loader.js:1019:19)
at require (internal/modules/cjs/helpers.js:77:18)
at WEBPACK_OPTIONS (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:114:13)
at requireConfig (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:116:6)
at D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:123:17
at Array.forEach (<anonymous>)
at module.exports (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-cli\bin\utils\convert-argv.js:121:15)
at Object.<anonymous> (D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client\node_modules\webpack-dev-server\bin\webpack-dev-server.js:84:40)
at Module._compile (internal/modules/cjs/loader.js:1133:30) {
errors: [
{
keyword: 'required',
dataPath: '[0]',
schemaPath: '#/required',
params: [Object],
message: "should have required property 'patterns'",
schema: [Object],
parentSchema: [Object],
data: [Object],
children: [Array]
}
],
schema: {
definitions: { ObjectPattern: [Object], StringPattern: [Object] },
type: 'object',
additionalProperties: false,
properties: { patterns: [Object], options: [Object] },
required: [ 'patterns' ]
},
headerName: 'Copy Plugin',
baseDataPath: 'options',
postFormatter: null
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_099Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! client#1.0.0 start: `npm run dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the client#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\iheb\AppData\Roaming\npm-cache\_logs\2020-05-21T13_56_52_148Z-debug.log
This is the log file :
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build:server'
1 verbose cli ]
2 info using npm#6.14.4
3 info using node#v12.16.3
4 verbose stack Error: missing script: build:server
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:63:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:116:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:436:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:391:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:434:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:161:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:281:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:115:16
4 verbose stack at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
5 verbose cwd D:\projects\Fullstack web apps\VueJs ExpressJs\tab-tracker\Client
6 verbose Windows_NT 10.0.18362
7 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build:server"
8 verbose node v12.16.3
9 verbose npm v6.14.4
10 error missing script: build:server
11 verbose exit [ 1, true ]
Running npm audit gives the following :
Moderate Cross-Site Scripting
Package serialize-javascript
Patched in >=2.1.1
Dependency of uglifyjs-webpack-plugin [dev]
Path uglifyjs-webpack-plugin > serialize-javascript
More info https://npmjs.com/advisories/1426
Related dependencies
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.1.11",
I hope I provided everything for you guys, if not I will immediately provide anything to help clarify my problem, as I said I'm a newbie to web development.
UPDATE: I've trying to figure out the reason behind such error, the problem occurs after updating webpack-dev-server
Version that works :
"webpack-dev-server": "^2.9.1"
Version with errors :
"webpack-dev-server": "^3.11.0"
Is it okay if I ignore vulnerabilities found? Because trying to fix them causes this error.
Thanks
This is not an issue with webpack or webpack-dev-server itself, but with the copy-webpack-plugin plugin.
With the update to the 6.x major version came a breaking change: instead of just passing the array with the config patterns directly to the CopyWebpackPlugin constructor, your now have to wrap it in the patterns property of an object and pass that.
Old syntax:
new CopyWebpackPlugin(
[
{ from: 'src/xxx.ext', to: 'dist/xxx.ext' },
{ from: 'src/yyy.ext', to: 'dist/yyy.ext' }
]
)
New syntax:
new CopyWebpackPlugin(
{
patterns: [
{ from: 'src/xxx.ext', to: 'dist/xxx.ext' },
{ from: 'src/yyy.ext', to: 'dist/yyy.ext' }
]
}
)
They did that because the constructor now supports an additional options property:
https://webpack.js.org/plugins/copy-webpack-plugin/#options-1
After updating to 3.11 a new template appeared
plugins: [
new CopyPlugin({
patterns: [
{ from: 'source', to: 'dest' },
{ from: 'other', to: 'public' },
],
}),
],
I had the same problem. Finally, I was able to solve it using
npm install --save copy-webpack-plugin#5.1.1
If you upgrade to copy-webpack-plugin: ^6.0.3 in your package.json then following should work, when you previously copied a whole directory:
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: "[your-src-dir]/*",
to: "[your-dst-dir]/*",
},
],
}),
]
adding /* after directory target and source directory name fixed it without ignoring vulnerability, which you should never do.
Take a look at https://webpack.js.org/plugins/copy-webpack-plugin/ for more.
this works for me
at webpack.config.js file change the CopyWebpackPlugin
new CopyWebpackPlugin({
patterns: [
{ from: "fonts/**", globOptions: { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] } },
{ from: "**/*.{jpg,png}", globOptions: { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] } },
]
}),
hope I help
Reset angular toolkit version to 2.3.0 using the below command.
npm i #ionic/angular-toolkit#2.3.0 -E -D
I am facing windows not defined error while trying to configure my angluar2 application with angular-universal.
cli version is migrated from 1.7.4 -> 6.0.3
Below is the error i am getting.
E:\Personal\my_codes\dist\server.js:1721
*/},function(e,t,n){"use strict";n.r(t),n.d(t,"provideModuleMap",function(){return a}),n.d(t,"ModuleMapLoaderModule",function(){return s}),n.d(t,"MODULE_MAP",function(){return i}),n.d(t,"ModuleMapNgFactoryLoader",function(){return o});var r=n(0),i=new r.InjectionToken("MODULE_MAP"),o=function(){function e(e,t){this.compiler=e,this.moduleMap=t}return e.prototype.load=function(e){var t=this.compiler instanceof r.Compiler,n=this.moduleMap[e];if(!n)throw new Error(e+" did not exist in the MODULE_MAP");return t?this.loadFactory(n):this.loadAndCompile(n)},e.prototype.loadFactory=function(e){return new Promise(function(t){return t(e)})},e.prototype.loadAndCompile=function(e){return this.compiler.compileModuleAsync(e)},e.decorators=[{type:r.Injectable}],e.ctorParameters=function(){return[{type:r.Compiler},{type:void 0,decorators:[{type:r.Inject,args:[i]}]}]},e}();function a(e){return{provide:i,useValue:e}}var s=function(){function e(){}return e.withMap=functio
ReferenceError: window is not defined
at Object.<anonymous> (E:\Personal\my_codes\dist\server.js:1721:1147)
at n (E:\Personal\my_codes\dist\server.js:1:172)
at Object.<anonymous> (E:\Personal\my_codes\dist\server.js:2001:2400)
at n (E:\Personal\my_codes\dist\server.js:1:172)
at E:\Personal\my_codes\dist\server.js:1:579
at Object.<anonymous> (E:\Personal\my_codes\dist\server.js:1:590)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! col-ui#0.0.0 serve:ssr: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the col-ui#0.0.0 serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Any suggestion on how i can resolve this will be really helpful.
Try to use domino , that will support many inconsistency in Angular SSR.
In server.ts
const domino = require('domino');
const win = domino.createWindow(template);
global['window'] = win;
global['document'] = win.document;
global['navigator'] = win.navigator;
global['CSS'] = undefined;