Upgrade webpack to version 5 #6690

alexander-schranz · 2022-07-10T15:26:58Z

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Fixed tickets	parts of #6343
Related issues/PRs	~~requires #6688~~, sulu/skeleton#201
License	MIT
Documentation PR	sulu/sulu-docs#

What's in this PR?

Upgrade webpack to version 5.

Why?

Support latest version of webpack.

TODO

Remove dependencies to util, process packages via isemail package.
Remove dependency to Buffer package see own js
Undo changes of 822516f
Fix Build with skeleton
Replace Email Validator

alexander-schranz · 2022-07-10T17:54:51Z

While it did first look good to build with webpack 5 there are issues with the isemail package. There are currently 3 node packages which we require util, process, Buffer. This is not longer supported. The workarounds via webpack and browserify didn't work in combination with skeleton. So we will currently keep on webpack 4 until resolving this. Issues.

niklasnatter · 2022-07-11T10:19:07Z

I think I would be okay with replacing the isemail if this is a blocker in the future. Where did we use the Buffer class in out code? 🤔

alexander-schranz · 2022-07-10T15:27:53Z

package.json

        "mobx": "^4.0.0",
        "mobx-react": "^5.0.0",
        "moment-timezone": "^0.5.14",
-        "optimize-css-assets-webpack-plugin": "^6.0.1",


replaced by css-minimizer-webpack-plugin: https://github.com/NMFR/optimize-css-assets-webpack-plugin

alexander-schranz · 2022-07-10T15:28:06Z

package.json

        "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
        "autoprefixer": "^9.8.6",
        "babel-eslint": "^10.0.2",
        "babel-jest": "^26.3.0",
        "babel-loader": "^8.0.6",
-        "clean-webpack-plugin": "^4.0.0",


think we not longer need this with clean: true

alexander-schranz · 2022-07-10T15:28:42Z

package.json

@@ -87,10 +86,9 @@
        "stylelint": "^13.2.1",
        "stylelint-config-standard": "^22.0.0",
        "url-search-params-polyfill": "^8.0.0",
-        "webpack": "^4.27.0",
-        "webpack-clean-obsolete-chunks": "^0.4.0",


The clean: true is the new way for this: https://github.com/GProst/webpack-clean-obsolete-chunks

alexander-schranz · 2022-07-10T16:28:40Z

webpack.config.js

-                                // set path to public root from bundled css: https://github.com/sulu/sulu/pull/6225
-                                publicPath: path.relative(outputPath, '.'),


not longer required as all pathes in css/js are relative

this is nice 🥳 i think the reason we dont need it anymore is because we configure the MiniCssExtractPlugin with a relative filename option

alexander-schranz · 2022-11-29T23:26:55Z

src/Sulu/Bundle/AdminBundle/Resources/js/components/Url/Url.js

@@ -4,8 +4,8 @@ import {observer} from 'mobx-react';
 import {action, computed, observable} from 'mobx';
 import classNames from 'classnames';
 import log from 'loglevel';
-import IsEmail from 'isemail';


Was never planned by the package to support browsers. They only support node based applications.

alexander-schranz · 2022-11-29T23:27:42Z

src/Sulu/Bundle/AdminBundle/Resources/js/utils/Email/validateEmail.js

+        return false;
+    }
+
+    return /^(.+)@(.+)$/.test(value);


This is very dump regex. Not sure how strict we should even implement things here. /cc @sulu/core-team

We definitely should not be too strict in case of supporting also local and intranet domains @localhost, @massive.local, ...

Looks like there is a official regex by whatwg:

https://html.spec.whatwg.org/#valid-e-mail-address

Its also used inside the safari webkit browser: https://github.com/WebKit/WebKit/blob/e205a844146bab749642d1b88974b706fe4d9e7e/Source/WebCore/html/EmailInputType.cpp#L38-L39

alexander-schranz · 2022-11-29T23:51:30Z

package.json

@@ -89,14 +88,12 @@
        "react-styleguidist": "^11.0.5",
        "react-test-renderer": "^17.0.0",
        "regenerator-runtime": "^0.13.3",
-        "style-loader": "^2.0.0",


I removed this as it seems not longer be used by us, think the css extract is working differently for us. And in the skeleton it was not even installed.

maybe it was used by react-styleguidist? 🤔

okay i think this was a leftover from a previous ckeditor configuration that was copied from their documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/integrating-from-source.html

yes did see it in the ckeditor and I was thinking that I already once had that case. That I tried to use the style-loader but did then come to the conclution that it isn't compatible or require for our setup.

alexander-schranz · 2022-11-30T00:29:37Z

src/Sulu/Bundle/AdminBundle/Resources/js/utils/Ajv/formats/tests/idnEmailValidator.test.js

-test('Email address with emojis should pass validation', () => {
-    expect(idnEmailValidator('🤌@😎')).toBe(true);
-});
-


Test was introduced by @luca-rath in #5815 but even browsers yet does not support this. So I think we can safely remove it:

UPGRADE.md

Co-authored-by: Niklas Natter <niklas.natter@gmail.com>

niklasnatter · 2022-11-30T15:53:32Z

src/Sulu/Bundle/AdminBundle/Resources/js/components/BlockCollection/blockCollection.scss

@@ -42,7 +42,7 @@

 .selectMultipleButtonContainer {
    display: flex;
-    justify-content: end;


was this change intentional?

yes autoprefixer did complain that flex-end is supported better then end and has same effect and did output a warning message about this line.

webpack.config.js

niklasnatter · 2022-11-30T16:42:32Z

webpack.config.js

-            publicPath,
+            clean: true,
+            path: path.resolve(projectRootPath, publicDir, outputPath),
+            filename: '[name].[chunkhash].js',
        },
        stats: 'minimal',
        performance: {
            hints: false,
        },
        devtool: argv.mode === 'development' ? 'eval-source-map' : 'source-map',


the build process works for me and the result looked good during my testing 🥳
unfortunately, it looks like our npm run watch task does not work anymore. right now, i see the changes only after restarting the watch task

the output of my console indicates that the change was detected, but no changes are written to the filesystem if i change the sulu source code

okay i suspect that this is somehow caused by the location of the code of Sulu 😢 if i change the code of the assets/admin/app.js file, the watch task works as expected. maybe files are not reloaded if they are located within the node_modules folder?

okay it looks like we are running into this issue: webpack/webpack#11612
adding the following to the configuration fixes the behaviour of the watch task:

snapshot: { // detect changes in "node_modules/@sulu": https://github.com/webpack/webpack/issues/11612 managedPaths: [], },

Co-authored-by: Niklas Natter <niklas.natter@gmail.com>

niklasnatter

🥳

alexander-schranz · 2022-12-01T08:42:20Z

🎉

alexander-schranz force-pushed the feature/upgrade-webpack-5 branch 3 times, most recently from abc680a to 1538bb9 Compare July 10, 2022 16:32

alexander-schranz mentioned this pull request Jul 10, 2022

Upgrade webpack to version 5 sulu/skeleton#176

Closed

alexander-schranz marked this pull request as draft July 10, 2022 17:52

alexander-schranz mentioned this pull request Jul 10, 2022

Outdated javascript dependencies #6343

Open

1 task

alexander-schranz added the DX Affecting the end developer label Jul 10, 2022

alexander-schranz force-pushed the feature/upgrade-webpack-5 branch from 822516f to 3e75f1b Compare November 29, 2022 23:21

alexander-schranz mentioned this pull request Nov 29, 2022

Upgrade Webpack to Version 5 sulu/skeleton#201

Merged

alexander-schranz changed the base branch from 2.5 to 2.6 November 29, 2022 23:23

alexander-schranz force-pushed the feature/upgrade-webpack-5 branch 4 times, most recently from b370efc to 0611b07 Compare November 29, 2022 23:35

Upgrade Webpack to Version 5

a1d2edb

alexander-schranz force-pushed the feature/upgrade-webpack-5 branch from 0611b07 to a1d2edb Compare November 29, 2022 23:38

Remove style-loader

e89dbf4

alexander-schranz commented Nov 29, 2022

View reviewed changes

alexander-schranz requested a review from niklasnatter November 29, 2022 23:52

Update regex for check email

7d6bd19

alexander-schranz marked this pull request as ready for review November 30, 2022 00:14

alexander-schranz commented Nov 30, 2022

View reviewed changes

alexander-schranz force-pushed the feature/upgrade-webpack-5 branch from db9855e to c276099 Compare November 30, 2022 00:30

Remove not longer supported emoji email validation

2fd8226

alexander-schranz force-pushed the feature/upgrade-webpack-5 branch from c276099 to 2fd8226 Compare November 30, 2022 00:31

Fix typo in UPGRADE file

0d94dfa

niklasnatter reviewed Nov 30, 2022

View reviewed changes

UPGRADE.md Outdated Show resolved Hide resolved

niklasnatter reviewed Nov 30, 2022

View reviewed changes

UPGRADE.md Outdated Show resolved Hide resolved

Apply suggestions from code review

b2733d9

Co-authored-by: Niklas Natter <niklas.natter@gmail.com>

niklasnatter reviewed Nov 30, 2022

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

niklasnatter reviewed Nov 30, 2022

View reviewed changes

alexander-schranz and others added 2 commits December 1, 2022 08:26

Update webpack.config.js

300f090

Co-authored-by: Niklas Natter <niklas.natter@gmail.com>

Add managedPaths to detect changes

d278f02

niklasnatter approved these changes Dec 1, 2022

View reviewed changes

niklasnatter merged commit 71e9312 into sulu:2.6 Dec 1, 2022

alexander-schranz deleted the feature/upgrade-webpack-5 branch December 1, 2022 08:42

alexander-schranz added this to the Release 2.6 milestone Feb 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade webpack to version 5 #6690

Upgrade webpack to version 5 #6690

alexander-schranz commented Jul 10, 2022 •

edited

alexander-schranz commented Jul 10, 2022

niklasnatter commented Jul 11, 2022

alexander-schranz Jul 10, 2022

alexander-schranz Jul 10, 2022

alexander-schranz Jul 10, 2022

alexander-schranz Jul 10, 2022

niklasnatter Nov 30, 2022

alexander-schranz Nov 29, 2022

alexander-schranz Nov 29, 2022 •

edited

alexander-schranz Nov 30, 2022

alexander-schranz Nov 29, 2022 •

edited

niklasnatter Nov 30, 2022

niklasnatter Nov 30, 2022

alexander-schranz Nov 30, 2022

alexander-schranz Nov 30, 2022

niklasnatter Nov 30, 2022

alexander-schranz Nov 30, 2022

niklasnatter Nov 30, 2022

niklasnatter Nov 30, 2022

niklasnatter Nov 30, 2022

niklasnatter Nov 30, 2022 •

edited

niklasnatter left a comment

alexander-schranz commented Dec 1, 2022

		// set path to public root from bundled css: https://github.com/sulu/sulu/pull/6225
		publicPath: path.relative(outputPath, '.'),

Upgrade webpack to version 5 #6690

Upgrade webpack to version 5 #6690

Conversation

alexander-schranz commented Jul 10, 2022 • edited

What's in this PR?

Why?

TODO

alexander-schranz commented Jul 10, 2022

niklasnatter commented Jul 11, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexander-schranz Nov 29, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexander-schranz Nov 29, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

niklasnatter Nov 30, 2022 • edited

Choose a reason for hiding this comment

niklasnatter left a comment

Choose a reason for hiding this comment

alexander-schranz commented Dec 1, 2022

alexander-schranz commented Jul 10, 2022 •

edited

alexander-schranz Nov 29, 2022 •

edited

alexander-schranz Nov 29, 2022 •

edited

niklasnatter Nov 30, 2022 •

edited