search

qgis / qwc2-demo-app

QWC2 demo application
Other
243 stars 155 forks source link

Breaking Change: webpack < 5 #324

Closed mhaelsig closed 2 years ago

mhaelsig commented 2 years ago

When I run 'yarn install' before compilation of my project, I get the following error messages during compilation of the local version:

"ERROR in ./qwc2/stores/StandardStore.js 26:0-22 Module not found: Error: Can't resolve 'url' in '/home/mhaelsig/QGIS/ QGIS_Server/qwc2-app-mhc9/qwc2/stores'

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:

ERROR in ./qwc2/utils/ConfigUtils.js 18:0-22 ... ERROR in ./qwc2/utils/LayerUtils.js 31:0-22 ... ERROR in ./qwc2/utils/PermaLinkUtils.js 20:0-22 ... ERROR in ./qwc2/components/PluginsContainer.jsx 38:0-22 ... ERROR in ./qwc2/plugins/Authentication.jsx 35:0-22" ...

If I restore 'node-modules' and yarn.lock from backup and avoid 'yarn install', I can compile. What do I have to update to avoid these error messages?

manisandro commented 2 years ago

See https://github.com/qgis/qwc2-demo-app/blob/master/UpgradeNotes.md#update-to-qwc2-submodule-revision-eb5e358-25102021

mhaelsig commented 2 years ago

Hi, thank you for your fast response deep in the night!

I have applied these changes already in October 2021 and everything worked fine since then. But the issue which I describe came up around end of January.

Kind regards Michael Hälsig

-- Dr. Michael Hälsig Diefenbachstr. 9 81479 München

Tel.: +49 89 79199563 Mob.:+49 171 333 7558 Am Montag, 21. Februar 2022, 20:55:05 CET schrieb Sandro Mani:

See https://github.com/qgis/qwc2-demo-app/blob/master/UpgradeNotes.md#update-to -qwc2-submodule-revision-eb5e358-25102021

-- Reply to this email directly or view it on GitHub: https://github.com/qgis/qwc2-demo-app/issues/324#issuecomment-1047186610 You are receiving this because you authored the thread.

Message ID: @.***>

manisandro commented 2 years ago

Hmm strange, works fine here. If you add

url: require.resolve("url/")

to the resolve.fallback section in webpack.config.js does it help?

Mangoesmapping-GeorgeCorea commented 2 years ago

I am not sure if this is related. On a fresh Ubuntu 20.4 machine, the webpack hangs for hours on

webpack 5.59.1 compiled with 6 errors in 22467 ms

If I go to localhost:8081 while this is hung - I get Invalid Host header

The yarn install worked without errors after I updated NodeJS as I got

error css-loader@6.4.0: The engine "node" is incompatible with this module. Expected version ">= 12.13.0". Got "10.19.0"
error Found incompatible module.

I used nvm install v17.5.0

Here's the full error

root@vmi741672:~/qwc2-demo-app# root@vmi741672:~/qwc2-demo-app# yarn install
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.58s.
root@vmi741672:~/qwc2-demo-app# yarn start
yarn run v1.22.17
$ npm run tsupdate && npm run themesconfig && npm run iconfont && webpack serve --mode development --progress --host 0.0.0.0 --port 8081

> QWC2App@2021.11.24 tsupdate
> node qwc2/scripts/updateTranslations.js

Generating translations for qwc2
Wrote qwc2/translations/de-DE.json
Wrote qwc2/translations/de-CH.json
Wrote qwc2/translations/en-US.json
Wrote qwc2/translations/es-ES.json
Wrote qwc2/translations/fr-FR.json
Wrote qwc2/translations/fi-FI.json
Wrote qwc2/translations/hu-HU.json
Wrote qwc2/translations/it-IT.json
Wrote qwc2/translations/pl-PL.json
Wrote qwc2/translations/pt-BR.json
Wrote qwc2/translations/pt-PT.json
Wrote qwc2/translations/ro-RO.json
Wrote qwc2/translations/ru-RU.json
Wrote qwc2/translations/sv-SE.json
Wrote qwc2/translations/tr-TR.json
Wrote qwc2/translations/cs-CZ.json
Wrote qwc2/translations/no-NO.json
Wrote qwc2/translations/ca-ES.json
Wrote static/translations/de-DE.json
Wrote static/translations/de-CH.json
Wrote static/translations/en-US.json
Wrote static/translations/es-ES.json
Wrote static/translations/fr-FR.json
Wrote static/translations/it-IT.json
Wrote static/translations/pl-PL.json
Wrote static/translations/pt-BR.json
Wrote static/translations/pt-PT.json
Wrote static/translations/ro-RO.json
Wrote static/translations/ru-RU.json
Wrote static/translations/sv-SE.json
Wrote static/translations/tr-TR.json
Wrote static/translations/cs-CZ.json

> QWC2App@2021.11.24 themesconfig
> node qwc2/scripts/themesConfig.js

Reading themesConfig.json
Parsing WMS GetProjectSettings of http://qwc2.sourcepole.ch/ows/uster/bauprojekte
Using WMS GetMap to generate thumbnail for http://qwc2.sourcepole.ch/ows/uster/bauprojekte
Parsing WMS GetProjectSettings of http://qwc2.sourcepole.ch/ows/qwc_demo

Created themes.json

> QWC2App@2021.11.24 iconfont
> node qwc2/scripts/makeIconkit.js

Done!
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8081/
<i> [webpack-dev-server] Content not from webpack is served from '/root/qwc2-demo-app/static' directory
assets by path assets/ 145 KiB
  assets by path assets/img/ 138 KiB 14 assets
  asset assets/forms/form.ui 6.73 KiB [emitted] [from: static/assets/forms/form.ui] [copied]
  asset assets/templates/legendprint.html 137 bytes [emitted] [from: static/assets/templates/legendprint.html] [copied]
  asset assets/css/qwc2.css 0 bytes [emitted] [from: static/assets/css/qwc2.css] [copied]
assets by path translations/*.json 135 KiB 15 assets
assets by path *.json 39.8 KiB
  asset themes.json 24.7 KiB [emitted] [from: static/themes.json] [copied]
  asset config.json 15 KiB [emitted] [from: static/config.json] [copied]
asset dist/QWC2App.js 11.8 MiB [emitted] (name: QWC2App)
asset api_examples.js 4.47 KiB [emitted] [from: static/api_examples.js] [copied]
asset index.html 2.27 KiB [emitted]
asset templates/legendprint.html 137 bytes [emitted] [from: static/templates/legendprint.html] [copied]
orphan modules 133 KiB [orphan] 96 modules
runtime modules 27.5 KiB 14 modules
modules by path ./node_modules/ 7.57 MiB 1397 modules
modules by path ./qwc2/ 1.52 MiB 273 modules
modules by path ./js/ 22 KiB
  modules by path ./js/*.jsx 1.53 KiB 3 modules
  modules by path ./js/*.js 20.4 KiB 2 modules
modules by path ./icons/build/ 20.6 KiB
  ./icons/build/qwc2-icons.css 2.51 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./node_modules/string-replace-loader/index.js??ruleSet[1].rules[0].use[2]!./icons/build/qwc2-icons.css 5.45 KiB [built] [code generated]
  ./icons/build/qwc2-icons.woff?e7d5f8f8c3f19c7c6dee3ffd8c2e7535 12.6 KiB [built] [code generated]
./static/translations/en-US.json 7.7 KiB [built] [code generated]
readable-stream (ignored) 15 bytes [built] [code generated]
util (ignored) 15 bytes [built] [code generated]
util (ignored) 15 bytes [built] [code generated]

ERROR in ./qwc2/stores/StandardStore.js 26:0-22
Module not found: Error: Can't resolve 'url' in '/root/qwc2-demo-app/qwc2/stores'

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: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./qwc2/components/StandardApp.jsx 57:0-52 336:4-22 337:19-36
 @ ./js/app.jsx 10:0-54 13:50-61

ERROR in ./qwc2/utils/ConfigUtils.js 18:0-22
Module not found: Error: Can't resolve 'url' in '/root/qwc2-demo-app/qwc2/utils'

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: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./qwc2/components/StandardApp.jsx 65:0-47 113:16-41 124:29-54 292:52-84 306:6-35
 @ ./js/app.jsx 10:0-54 13:50-61

ERROR in ./qwc2/utils/LayerUtils.js 31:0-22
Module not found: Error: Can't resolve 'url' in '/root/qwc2-demo-app/qwc2/utils'

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: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./qwc2/components/SearchBox.jsx 68:0-45 707:24-51 710:88-115 1021:52-76
 @ ./js/appConfig.js 25:0-50 80:16-25
 @ ./js/app.jsx 11:0-36 14:13-22

ERROR in ./qwc2/utils/PermaLinkUtils.js 20:0-22
Module not found: Error: Can't resolve 'url' in '/root/qwc2-demo-app/qwc2/utils'

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: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./qwc2/components/StandardApp.jsx 69:0-70 107:8-24 161:10-25 295:40-59 342:27-46
 @ ./js/app.jsx 10:0-54 13:50-61

ERROR in ./qwc2/utils/ServiceLayerUtils.js 34:0-22
Module not found: Error: Can't resolve 'url' in '/root/qwc2-demo-app/qwc2/utils'

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: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./qwc2/plugins/API.jsx 53:0-59 81:6-34
 @ ./js/appConfig.js 52:0-41 111:17-26
 @ ./js/app.jsx 11:0-36 14:13-22

ERROR in ./qwc2/plugins/Authentication.jsx 35:0-22
Module not found: Error: Can't resolve 'url' in '/root/qwc2-demo-app/qwc2/plugins'

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: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./js/appConfig.js 49:0-63 108:28-48
 @ ./js/app.jsx 11:0-36 14:13-22

6 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.59.1 compiled with 6 errors in 20362 ms
mhaelsig commented 2 years ago

Hi, unfortunately, both corrections do not work:

(in webpack.config.js) resolve: { extensions: [".mjs", ".js", ".jsx"], fallback: { stream: require.resolve("stream-browserify"), url: require.resolve("url/"), buffer: require.resolve("buffer/"), path: require.resolve("path-browserify"), timers: require.resolve("timers-browserify")

leads during compilation to

[webpack-cli] Error: Cannot find module 'url/' Require stack:

and

resolve: { extensions: [".mjs", ".js", ".jsx"], fallback: { stream: require.resolve("stream-browserify"), url: false, buffer: require.resolve("buffer/"), path: require.resolve("path-browserify"), timers: require.resolve("timers-browserify")

leads to

Uncaught TypeError: urlWEBPACK_IMPORTED_MODULE8default().parse is not a function

webpack://QWC2App/./qwc2/stores/StandardStore.js?:83 StandardApp webpack://QWC2App/./qwc2/components/StandardApp.jsx?:368 React 17 webpack://QWC2App/./js/app.jsx?:19 jsx http://localhost:8081/dist/QWC2App.js?d106636e9715b3f2566f:41 __webpack_require__ http://localhost:8081/dist/QWC2App.js? d106636e9715b3f2566f:18708 http://localhost:8081/dist/QWC2App.js?d106636e9715b3f2566f: 19776 http://localhost:8081/dist/QWC2App.js?d106636e9715b3f2566f: 19778 in the browser console. Thank you for further hints. Michael Hälsig -- Dr. Michael Hälsig Diefenbachstr. 9 81479 München Tel.: +49 89 79199563 Mob.:+49 171 333 7558 Am Montag, 21. Februar 2022, 21:10:36 CET schrieb Sandro Mani: > Hmm strange, works fine here. If you add > > url: require.resolve("url/") > > to the resolve.fallback section in webpack.config.js does it help? > > -- > Reply to this email directly or view it on GitHub: > https://github.com/qgis/qwc2-demo-app/issues/324#issuecomment-1047197358 > You are receiving this because you authored the thread. > > Message ID: ***@***.***>
manisandro commented 2 years ago

Does yarn add -W url help?

mhaelsig commented 2 years ago

Hi, thank you - this made it.

These two changes:

in webpack.config.js I added the line 'url: require.resolve("url/"),'

resolve: { extensions: [".mjs", ".js", ".jsx"], fallback: { stream: require.resolve("stream-browserify"), url: require.resolve("url/"), buffer: require.resolve("buffer/"), path: require.resolve("path-browserify"), timers: require.resolve("timers-browserify")

and called 'yarn add -W url' before I called 'yarn install'.

Have a nice day!

Michael Hälsig

-- Dr. Michael Hälsig Diefenbachstr. 9 81479 München

Tel.: +49 89 79199563 Mob.:+49 171 333 7558 Am Dienstag, 22. Februar 2022, 08:06:31 CET schrieb Sandro Mani:

yarn add -W url

manisandro commented 2 years ago

Is url: require.resolve("url/") actually required with yarn add -W url'?

Mangoesmapping-GeorgeCorea commented 2 years ago

Unfortunately it's still hanging at the same point for me.

Mangoesmapping-GeorgeCorea commented 2 years ago

In the install process I see

warning " > ***@***.***" has unmet peer dependency ***@***.***/core@ ^7.0.0". warning "workspace-aggregator-9c9945b5-0611-4c40-993b-bddf71dcf18c > qwc2 > ***@***.***" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0-0".

Should we do something to address this?

manisandro commented 2 years ago

@georgecorea This

error css-loader@6.4.0: The engine "node" is incompatible with this module. Expected version ">= 12.13.0". Got "10.19.0"

looks like an issue with your node environemnt.

Regarding the peer dependencies, some dependencies do indeed specify incorrect peer dependencies. Not much I can do about that in qwc2 itself.

Mangoesmapping-GeorgeCorea commented 2 years ago

Thanks, I fixed this as per my first post and then added the fixes mentioned but it still hangs.

-- Although all care is taken to ensure the accuracy and completeness of the information in this document, no responsibility will be taken by Mangoesmapping, for any personal, professional or financial damage arising from the use of the document or any omissions, errors or inaccuracies contained therein.

manisandro commented 2 years ago

I'd take this to webpack upstream with a minimal reproducer.

Mangoesmapping-GeorgeCorea commented 2 years ago

Thanks.

Is there anything else you did before installation that's different from the instructions?

I followed the process in https://github.com/qgis/qwc2-demo-app/blob/master/doc/QWC2_Documentation.md

I had the node version error and used https://stackoverflow.com/a/68996724 to resolve that issue.

-- Although all care is taken to ensure the accuracy and completeness of the information in this document, no responsibility will be taken by Mangoesmapping, for any personal, professional or financial damage arising from the use of the document or any omissions, errors or inaccuracies contained therein.

Mangoesmapping-GeorgeCorea commented 2 years ago

Simply exiting the process where it hangs and then updating the config and then $ yarn run prod works perfectly.