NPM Resource Changed PR-4.4-dev Pending

User tests: Successful: Unsuccessful:

avatar C-Lodder
C-Lodder
9 Nov 2023

Summary of Changes

Replace Terser and PostCSS with ESBuild (Go) and LightningCSS (Rust) to improve build times.

Testing Instructions

  1. Run npm i
  2. Perform a sanity test to ensure there and no JS errors or styling issues

BEFORE (local machine)

Timer: Build finished in 42923 ms

AFTER (local machine)

Timer: Build finished in 26618 ms

avatar C-Lodder C-Lodder - open - 9 Nov 2023
avatar C-Lodder C-Lodder - change - 9 Nov 2023
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 9 Nov 2023
Category JavaScript Repository NPM Change
avatar C-Lodder
C-Lodder - comment - 9 Nov 2023

@wilsonge Does J4's CSS support IE11 out of the box?

If so, I'll need to make a slight change

avatar wilsonge
wilsonge - comment - 9 Nov 2023

BS5 dropped IE11 support so as far as I’m aware the css doesn’t in the core templates. Honestly I don’t remember anymore what we did for the system stuff. Based on https://github.com/joomla/joomla-cms/blob/4.4-dev/package.json#L36 I guess we did try for it? But I’m definitely not sure

avatar laoneo
laoneo - comment - 10 Nov 2023

4 does not support IE 11 anymore, so you are free to change.

avatar C-Lodder
C-Lodder - comment - 10 Nov 2023

@laoneo Thanks for clarifying. No more changes require on my part then.
Ready for review/testing.

avatar laoneo
laoneo - comment - 10 Nov 2023

Merging it as system tests are not failing and npm went trough fine.

avatar laoneo laoneo - change - 10 Nov 2023
Status Pending Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2023-11-10 12:05:50
Closed_By laoneo
Labels Added: NPM Resource Changed PR-4.4-dev
avatar laoneo laoneo - close - 10 Nov 2023
avatar laoneo laoneo - merge - 10 Nov 2023
avatar laoneo
laoneo - comment - 10 Nov 2023

Thanks!

avatar richard67
richard67 - comment - 11 Nov 2023

Last night the nightly builds for 4.4-dev failed, while the others succeeded. Trying locally on an Ubuntu shows that the first build succeeded, but then running again a build fails with:

> joomla@4.4.1 versioning
> node build/build.js --versioning

[Error: ENOENT: no such file or directory, lstat '/drone/src/build/tmp/1699693449/media/com_media/js/media-manager-es5.min.js'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'lstat',
  path: '/drone/src/build/tmp/1699693449/media/com_media/js/media-manager-es5.min.js'
}
`npm run versioning` did not complete as expected.

The same error is also shown in the log of a build by Drone (not in the builds for PRs, those do not run that nightly_build task).

@C-Lodder Possibly related to this PR? @dgrammatiko Maybe you have an idea what goes wrong?

avatar richard67
richard67 - comment - 11 Nov 2023

When running npm run versioning like the build.php script does, I get:

$ npm run versioning

> joomla@4.4.1 versioning
> node build/build.js --versioning

node:internal/modules/cjs/loader:1051
  throw err;
  ^

Error: Cannot find module 'commander'
Require stack:
- /home/richard/lamp/public_html/joomla-cms-4.4-dev/build/build.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1048:15)
    at Module._load (node:internal/modules/cjs/loader:901:27)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at Object.<anonymous> (/home/richard/lamp/public_html/joomla-cms-4.4-dev/build/build.js:19:21)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/richard/lamp/public_html/joomla-cms-4.4-dev/build/build.js'
  ]
}

Node.js v20.6.1
$
avatar dgrammatiko
dgrammatiko - comment - 11 Nov 2023

@richard67 I will publish a lightningCSS version of the PostCSS plugin (hopefully I could code it today on my way to Frankfurt)...

avatar dgrammatiko
dgrammatiko - comment - 11 Nov 2023

Error: Cannot find module 'commander'

Hmm, that's a different problem... I'll have a look

avatar richard67
richard67 - comment - 11 Nov 2023

Possibly something wrong with package-lock.json?

avatar dgrammatiko
dgrammatiko - comment - 11 Nov 2023

@richard67 can you allow the drone changes on #42331 ? (someone needs to sign that pr)

avatar richard67
richard67 - comment - 11 Nov 2023
avatar richard67
richard67 - comment - 11 Nov 2023

PR #42331 seems to fix the issue with the versioning JS which I could reproduce on my local Ubuntu. For the nightly builds it will also need joomla-projects/docker-images#72 .

avatar C-Lodder
C-Lodder - comment - 13 Nov 2023

@richard67 media-manager-es5.min.js doesn't seem to be created. I'll look into it.

avatar C-Lodder
C-Lodder - comment - 13 Nov 2023

Seems to be caused by this: https://github.com/joomla/joomla-cms/blob/4.4-dev/build/build.js#L173

When running npm run build:com_media, the media-manager-es5.js and media-manager-es5.min.js files are created (as expected).
When running npm i, the files aren't created due to process.exit(0);.

@dgrammatiko Perhaps some of the promises aren't being handled correctly?

avatar dgrammatiko
dgrammatiko - comment - 13 Nov 2023

@C-Lodder you can replace the promise.all with regular thens, but the problem was the resolution of the commander module. The latest 4.4.0 branch should work without any problems, after #42331

avatar Fedik
Fedik - comment - 13 Nov 2023

@dgrammatiko @C-Lodder it something to do with this

.then((content) => {
if (isProduction) {
// eslint-disable-next-line no-console
console.log('✅ ES2017 Media Manager ready');
writeFile(resolve('media/com_media/js/media-manager.min.js'), content.code, { encoding: 'utf8', mode: 0o644 });
return buildLegacy(resolve('media/com_media/js/media-manager.js'));
}
// eslint-disable-next-line no-console
console.log('✅ ES2017 Media Manager ready');
if (existsSync(resolve('media/com_media/js/media-manager-es5.js'))) {
rm(resolve('media/com_media/js/media-manager-es5.js'));
}
if (existsSync(resolve('media/com_media/js/media-manager-es5.min.js'))) {
rm(resolve('media/com_media/js/media-manager-es5.min.js'));
}
return copyFile(resolve('media/com_media/js/media-manager.js'), resolve('media/com_media/js/media-manager.min.js'));
})
.catch((error) => {
// eslint-disable-next-line no-console
console.error(error);
});

media-manager-es5.min.js file is removed by this code.

avatar Fedik
Fedik - comment - 13 Nov 2023

It seems NODE_ENV=PRODUCTION is ignored after recent changes.

In set NODE_ENV=PRODUCTION && node build/build.js --com-media command

process.env.NODE_ENV is undefined.

avatar dgrammatiko
dgrammatiko - comment - 13 Nov 2023

@C-Lodder @Fedik I have no clue why this fails for you. All commands work perfectly on my side:
npm i:
Screenshot 2023-11-13 at 17 53 11

npm run build:com_media
Screenshot 2023-11-13 at 17 54 34

Did you remove the node_modules folder before trying npm i?

avatar dgrammatiko
dgrammatiko - comment - 13 Nov 2023

@Fedik #42340 should fix the env variables for Node 20

avatar C-Lodder
C-Lodder - comment - 13 Nov 2023

@dgrammatiko running npm run build:com_media has always worked. However when running npm i (which not only fetches the dependencies, but also runs all build tasks), it doesn't generate the media-manager-es5.min.js || media-manager-es5.js files.

The underlying reason is https://github.com/joomla/joomla-cms/blob/4.4-dev/build/build.js#L173

I don't actually know why the process is being manually terminated to be honest. Node.js will automatically terminates when all async tasks have completed.
Running it manually will terminate everything, even if there are still pending async tasks....which clearly seem to be the case here.
The media manager babel/rollup stuff is being killed before it's complete.

I'd strongly suggest removing the line above and letting it finish gracefully.

avatar C-Lodder
C-Lodder - comment - 13 Nov 2023
avatar dgrammatiko
dgrammatiko - comment - 13 Nov 2023

@C-Lodder probably is a windows thing, Linux and macOS are fine

avatar Fedik
Fedik - comment - 13 Nov 2023

Not windows, Linux.
But it actualy works for me now

Add a Comment

Login with GitHub to post a comment