current behavior
preact build --brotli prints the following error:
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
other relevant information
My app is a standard preact-cli 'Default' (preact-cli template).
Not using the --brotli flag builds as desired/expected.
It's clear the js files are being built to .br but with no filename.
Environment Info:
System:
OS: Windows 10 10.0.19045
CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 # 2.80GHz
Binaries:
Node: 18.12.1
npm: 8.4.1
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
npmPackages:
preact: ^10.11.2 => 10.11.2
preact-cli: ^3.4.1 => 3.4.1
preact-render-to-string: ^5.2.6 => 5.2.6
preact-router: ^4.1.0 => 4.1.0
Per the preact-cli documentation combined with the only walkthrough I could find on expected behavior I expected to see "... all the generated javascript files also have a .js.br files next to them."
Steps to reproduce the behavior:
preact build --brotli
See error
error
preact build --brotli
‼ WARN Could not find sw.js in C:\... Using the default service worker.
bundle.*****.esm.js ⏤ 91.3 kB
polyfills.*****.esm.js ⏤ 2.18 kB
route-REDACT.chunk.6bef3.css ⏤ 236 B
route-REDACT.chunk.*****.esm.js ⏤ 849 B
route-REDACT.chunk.*****.esm.js ⏤ 1.54 kB
route-REDACT.chunk.64635.css ⏤ 138 B
route-REDACT.chunk.*****.esm.js ⏤ 641 B
route-REDACT.chunk.*****.esm.js ⏤ 294 B
sw.js ⏤ 10.9 kB
sw-esm.js ⏤ 10.9 kB
polyfills.77b1f.js ⏤ 2.28 kB
index.html ⏤ 1.66 kB (-19 B)
200.html ⏤ 1.17 kB
bundle.ccccc.css ⏤ 5.36 kB
route-REDACT.chunk.230c8.css ⏤ 139 B
route-REDACT.chunk.*****.esm.js ⏤ 405 B
route-REDACT.chunk.f85cc.css ⏤ 571 B
bundle.bbbbb.js ⏤ 92.7 kB
route-REDACT.chunk.f4a3f.js ⏤ 412 B
route-REDACT.chunk.4a8c5.js ⏤ 1.36 kB
route-REDACT.chunk.56f91.js ⏤ 2.14 kB
route-REDACT.chunk.e7d3e.js ⏤ 1.16 kB
route-REDACT.chunk.68634.js ⏤ 293 B
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN asset size limit: The following asset(s) exceed the recommended size limit (195 KiB).
This can impact web performance.
Assets:
bundle.aaaaa.esm.js (376 KiB)
bundle.bbbbb.js (390 KiB)
‼ WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (195 KiB). This can impact web performance.
Entrypoints:
bundle (785 KiB)
bundle.ccccc.css
bundle.bbbbb.js
bundle.aaaaa.esm.js
`your text`‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN Conflict: Multiple assets emit different content to the same filename .br
‼ WARN asset size limit: The following asset(s) exceed the recommended size limit (195 KiB).
This can impact web performance.
Assets:
bundle.aaaaa.esm.js (376 KiB)
bundle.bbbbb.js (390 KiB)
‼ WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (195 KiB). This can impact web performance.
Entrypoints:
bundle (785 KiB)
bundle.ccccc.css
bundle.bbbbb.js
bundle.aaaaa.esm.js
Fix for this issue was release as preact-cli v3.4.3.
I am making web on pug, node.js and yarn. I can run site locally, but can't make a static build.
My console log:
yarn build:static
success Already up-to-date.
$ rimraf static/assets
$ cross-env NODE_ENV=production webpack -p --config ./build/prod.webpack.config.js
10% building 1/2 modules 1 active ...s/Yuriys Web source/src/scripts/main.jsBrowserslist: caniuse-lite is outdated. Please run next command `yarn upgrade caniuse-lite browserslist`
Hash: d386d8be808a01f7bf84
Version: webpack 4.27.1
Time: 2295ms
Built at: 03/26/2022 5:51:35 PM
Asset Size Chunks Chunk Names
main.469c995c.css 33.5 KiB 0 [emitted] main
main.469c995c.css.map 40.7 KiB 0 [emitted] main
main.469c995c.js 88.8 KiB 0 [emitted] main
main.469c995c.js.map 438 KiB 0 [emitted] main
manifest.json 218 bytes [emitted]
Entrypoint main = main.469c995c.css main.469c995c.js main.469c995c.css.map main.469c995c.js.map
[2] multi ./src/scripts/main.js 28 bytes {0} [built]
[3] ./src/styles/main.scss 39 bytes {0} [built]
[4] ./src/scripts/main.js + 2 modules 1.42 KiB {0} [built]
| ./src/scripts/main.js 92 bytes [built]
| ./src/scripts/i18n.js 689 bytes [built]
| ./src/scripts/awakeness.js 654 bytes [built]
+ 3 hidden modules
Child mini-css-extract-plugin ../Yuriys Web source/node_modules/css-loader/dist/cjs.js!../Yuriys Web source/node_modules/sass-loader/lib/loader.js!../Yuriys Web source/src/styles/main.scss:
Entrypoint mini-css-extract-plugin = *
[0] ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/styles/main.scss 33.8 KiB {0} [built]
+ 1 hidden module
(node:39801) UnhandledPromiseRejectionWarning: Error: /Users/Yuriy/Downloads/Yuriys Web source/src/pages/partials/header.pug:9:5
unknown filter ":en"
at makeError (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-error/index.js:32:13)
at filterWithFallback (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-filters/lib/handle-filters.js:47:17)
at walk.includeDependencies (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-filters/lib/handle-filters.js:20:18)
at walkAST (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:23:18)
at /Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:104:20
at Array.reduce (<anonymous>)
at walkAndMergeNodes (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:103:18)
at walkAST (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:37:19)
at walkAST (/Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:48:21)
at /Users/Yuriy/Downloads/Yuriys Web source/node_modules/pug-walk/index.js:104:20
(node:39801) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:39801) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
✨ Done in 12.62s.
Is it an issue with the config? Or can I even build a static web for GitHub pages?
I'm new to git CI and I'm trying to create a pipeline for a school project. I need to run some tests with Cypress through the CI but I get an Error: spawn ps ENOENT.
The CI job:
cypress-test-job:
image: cypress/browsers:node16.14.0-slim-chrome99-ff97
stage: test
script:
- cd frontend-webpack/
- echo "Testing frontend with Cypress"
- npm ci
- npm run test
- echo "Testing complete"
My package.json:
{
"name": "seminar-week5-client",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"build": "npx webpack-cli",
"build:dev": "npx webpack-cli --mode=development",
"start": "npx webpack serve",
"watch": "npx webpack serve",
"lint": "npx eslint src/**.js src/js/**.js",
"cy:test": "npx cypress run",
"test:headless": "npx cypress run --spec cypress/integration/ToDo_tests.js",
"test": "start-server-and-test start http-get://localhost:8080 cy:test"
},
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.3.1",
"lodash": "^4.17.11",
"sass": "^1.49.11",
"wait-on": "^6.0.1"
},
"devDependencies": {
"babel-loader": "^8.2.4",
"css-loader": "^6.7.1",
"cypress": "^9.5.3",
"eslint": "^8.12.0",
"eslint-webpack-plugin": "^3.1.1",
"html-loader": "^3.1.0",
"html-webpack-plugin": "^5.5.0",
"sass-loader": "^12.6.0",
"start-server-and-test": "^1.14.0",
"style-loader": "^3.3.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.0"
}
}
The failed output of the pipeline:
Running with gitlab-runner 14.9.0~beta.68.g1283960c (1283960c)
on green-4.shared.runners-manager.gitlab.com/default ntHFEtyX
Resolving secrets
00:00
Preparing the "docker+machine" executor
00:41
Using Docker executor with image cypress/browsers:node16.14.0-slim-chrome99-ff97 ...
Pulling docker image cypress/browsers:node16.14.0-slim-chrome99-ff97 ...
Using docker image sha256:beaac0b58885bf17f2b91ce142daaed6658aaee184bff7c8f114e2210db567cc for cypress/browsers:node16.14.0-slim-chrome99-ff97 with digest cypress/browsers#sha256:e55e133a7b66e1e0fd13b8e7db1f545771ed3a98f76fc662fce268d02ab0aff9 ...
Preparing environment
00:02
Running on runner-nthfetyx-project-34382765-concurrent-0 via runner-nthfetyx-shared-1649414442-4ad4be93...
Getting source from Git repository
00:12
$ eval "$CI_PRE_CLONE_SCRIPT"
Fetching changes with git depth set to 20...
Initialized empty Git repository in /builds/saxion.nl/hbo-ict/development-tools/web/38/.git/
Created fresh repository.
Checking out 8c002ea2 as master...
Skipping Git submodules setup
Executing "step_script" stage of the job script
02:45
Using docker image sha256:beaac0b58885bf17f2b91ce142daaed6658aaee184bff7c8f114e2210db567cc for cypress/browsers:node16.14.0-slim-chrome99-ff97 with digest cypress/browsers#sha256:e55e133a7b66e1e0fd13b8e7db1f545771ed3a98f76fc662fce268d02ab0aff9 ...
$ cd frontend-webpack/
$ echo "Testing frontend with Cypress"
Testing frontend with Cypress
$ npm ci
added 624 packages, and audited 625 packages in 55s
78 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
$ npm run test
> seminar-week5-client#1.0.0 test
> start-server-and-test start http-get://localhost:8080 cy:test
1: starting server using command "npm run start"
and when url "[ 'http-get://localhost:8080' ]" is responding with HTTP status code 200
running tests using command "npm run cy:test"
> seminar-week5-client#1.0.0 start
> npx webpack serve
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/builds/saxion.nl/hbo-ict/development-tools/web/38/frontend-webpack/src' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
[BABEL] Note: The code generator has deoptimised the styling of /builds/saxion.nl/hbo-ict/development-tools/web/38/frontend-webpack/node_modules/lodash/lodash.js as it exceeds the max of 500KB.
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
<i> [webpack-dev-middleware] wait until bundle finished: /
asset app.bundle.js 2.19 MiB [emitted] [minimized] [big] (name: main) 1 related asset
asset a5441281b140aaf5cb21.png 80.6 KiB [emitted] [immutable] [from: src/images/delete.png] (auxiliary name: main)
asset index.html 419 bytes [emitted]
runtime modules 27.5 KiB 13 modules
orphan modules 19.9 KiB [orphan] 9 modules
javascript modules 987 KiB
modules by path ./node_modules/ 980 KiB
modules by path ./node_modules/style-loader/dist/runtime/*.js 5.75 KiB 6 modules
modules by path ./node_modules/webpack-dev-server/client/ 56.8 KiB 4 modules
modules by path ./node_modules/webpack/hot/*.js 4.4 KiB 4 modules
modules by path ./node_modules/html-entities/lib/*.js 115 KiB 4 modules
modules by path ./node_modules/css-loader/dist/runtime/*.js 3.52 KiB 3 modules
+ 4 modules
modules by path ./src/ 6.81 KiB
./src/app.js + 1 modules 2.64 KiB [built] [code generated]
./src/styles/appStyle.scss 2.41 KiB [built] [code generated]
./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/appStyle.scss 1.76 KiB [built] [code generated]
./src/images/delete.png 42 bytes (javascript) 80.6 KiB (asset) [built] [code generated]
webpack 5.72.0 compiled successfully in 19130 ms
> seminar-week5-client#1.0.0 cy:test
> npx cypress run
[STARTED] Task without title.
[SUCCESS] Task without title.
[310:0408/104418.838935:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
[310:0408/104418.839032:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
[310:0408/104418.846171:ERROR:bus.cc(392)] Failed to connect to the bus: Failed to connect to socket /run/dbus/system_bus_socket: No such file or directory
[475:0408/104418.911107:ERROR:gpu_init.cc(453)] Passthrough is not supported, GL is swiftshader, ANGLE is
tput: unknown terminal "xterm npm_config_loglevel warn npm_config_unsafe_perm true"
====================================================================================================
(Run Starting)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Cypress: 9.5.3 │
│ Browser: Electron 94 (headless) │
│ Node Version: v16.14.0 (/usr/local/bin/node) │
│ Specs: 1 found (ToDo_tests.js) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
────────────────────────────────────────────────────────────────────────────────────────────────────
Running: ToDo_tests.js (1 of 1)
[310:0408/104421.132271:ERROR:bus.cc(392)] Failed to connect to the bus: Address does not contain a colon
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist#latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
My ToDo list
✓ can add new todo items (10167ms)
✓ can remove todo items (7887ms)
✓ Try adding duplicate item (3738ms)
✓ Delete the rest (2554ms)
4 passing (25s)
(Results)
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ Tests: 4 │
│ Passing: 4 │
│ Failing: 0 │
│ Pending: 0 │
│ Skipped: 0 │
│ Screenshots: 0 │
│ Video: true │
│ Duration: 24 seconds │
│ Spec Ran: ToDo_tests.js │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
(Video)
- Started processing: Compressing to 32 CRF
Compression progress: 68%
- Finished processing: /builds/saxion.nl/hbo-ict/development-tools/web/38/frontend (20 seconds)
-webpack/cypress/videos/ToDo_tests.js.mp4
Compression progress: 100%
tput: unknown terminal "xterm npm_config_loglevel warn npm_config_unsafe_perm true"
====================================================================================================
(Run Finished)
Spec Tests Passing Failing Pending Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔ ToDo_tests.js 00:24 4 4 - - - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
✔ All specs passed! 00:24 4 4 - - -
node:events:498
throw er; // Unhandled 'error' event
^
Error: spawn ps ENOENT
at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
at onErrorNT (node:internal/child_process:478:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
at onErrorNT (node:internal/child_process:478:16)
at processTicksAndRejections (node:internal/process/task_queues:83:21) {
errno: -2,
code: 'ENOENT',
syscall: 'spawn ps',
path: 'ps',
spawnargs: [ '-A', '-o', 'ppid,pid,stat,comm' ]
}
Uploading artifacts for failed job
00:02
Uploading artifacts...
frontend-webpack/cypress/videos/*.mp4: found 1 matching files and directories
Uploading artifacts as "archive" to coordinator... 201 Created id=2310380359 responseStatus=201 Created token=gaMq6mXk
Cleaning up project directory and file based variables
00:01
ERROR: Job failed: exit code 1
I downloaded one Angular project from the Internet with an Angular select component.
Here is the original example:
https://material.angular.io/components/select/overview#resetting-the-select-value
They have a demo on the following link:
https://stackblitz.com/angular/qodvbqymxae
I downloaded that demo to my computer, but when doing:
$ ng serve
I get the error:
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\entry_resolver.js:131:11)
at Promise.resolve.then.then (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:239:54)
at process._tickCallback (internal/process/next_tick.js:109:7)
as you can see on the following full output:
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-01-07T09:15:56.348Z
Hash: 93425b9cdaae6fb908b2
Time: 10331ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 2.93 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 154 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial] [rendered]
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\entry_resolver.js:131:11)
at Promise.resolve.then.then (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:239:54)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.
webpack: Compiling...
Date: 2018-01-07T09:15:58.101Z
Hash: c2a123371dfcb5513a4e
Time: 884ms
chunk {inline} inline.bundle.js (inline) 5.79 kB [entry]
chunk {main} main.bundle.js (main) 2.93 kB [initial]
chunk {polyfills} polyfills.bundle.js (polyfills) 636 bytes [initial]
chunk {styles} styles.bundle.js (styles) 154 kB [initial]
chunk {vendor} vendor.bundle.js (vendor) 854 kB [initial]
ERROR in Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\entry_resolver.js:131:11)
at Promise.resolve.then.then (D:\_System\Hatuey\Desktop\angular-material-select\node_modules\#ngtools\webpack\src\angular_compiler_plugin.js:239:54)
at process._tickCallback (internal/process/next_tick.js:109:7)
webpack: Failed to compile.
On the README.md file provided by: stackblitz.com (when export) they say:
This project was generated with Angular CLI version 1.2.1.
On my local computer I get the following:
$ ng version
...
Angular CLI: 1.5.4
Node: 6.11.2
OS: win32 x64
Angular: 5.1.3
...
If you want to try by yourself, you can do:
$ mkdir angular-material-select
$ cd angular-material-select
$ git clone git#github.com:napolev/angular-material-select.git .
$ npm install
$ ng serve
How do I make this demo project work?
Extract AppModule from main.ts into it's own file app.module.ts
Extract DemoMaterialModule from main.ts into it's own file
Add DemoMaterialModule to AppModule's imports list
I created a simple webpack project for a Typescript library : https://github.com/lbar/test-webpackts-issue
On linux, npm run build finishes successfully:
> rimraf dist && webpack --progress --profile
10% 0/1 build modulests-loader: Using typescript#1.8.10 and /tmp/testwebpack/tsconfig.json 8030ms1217ms optimi5ms emit
Hash: 8eac1502f3b7a9a19be2
Version: webpack 1.13.1
Time: 2596ms
Asset Size Chunks Chunk Names
index.js 816 bytes 0 [emitted] index
index.js.map 6.07 kB 0 [emitted] index
/tmp/testwebpack/dist/index.d.ts 31 bytes [emitted]
/tmp/testwebpack/dist/src/info.d.ts 49 bytes [emitted]
+ 2 hidden modules
On Windows, npm run build is blocked during 'emit' phase. The output is :
> rimraf dist && webpack --progress --profile
10% 0/1 build modulests-loader: Using typescript#1.8.10 and C:\tmp\testwebpack\tsconfig.jso
1836ms build modules
3ms seal
7ms optimize
3ms hashing
7ms create chunk assets
79ms additional chunk assets
19ms optimize chunk assets
837ms optimize assets
95% emit
The version of node differs: 6.2.2 on Windows and 4.4.5 on Linux. I don't know if it may be the cause.
Has anyone an idea about the problem? Issue in webpack, ts-loader or typescript?
One more thing, call to tsc is working on both systems.
Thanks for your help
This problem is caused by an issue in ts-loader: https://github.com/TypeStrong/ts-loader/issues/185
A Pull Request is waiting fixes for project core team.
Webpack can use "awesome-typescript-loader" to avoid this issue.