Issues developing 2.x locally

davetodave178

I'm having issues with developing the frontend of the framework on 2.x, specifically with components which are now lazy loaded. When running yarn dev I get a bunch of Could not find chunk for ... errors:

➜  js git:(di/scrubber-extensibility) ✗ yarn dev
yarn run v1.22.19
$ webpack --mode development --watch
Could not find chunk for /Users/iadeluca/Documents/GitHub/docker-flarum-2.x/flarum-framework-2.x/framework/core/js/src/forum/components/SignUpModal
...

Related errors can also be seen in the Console when trying to load a lazy loaded component:

Uncaught (in promise) ChunkLoadError: Loading chunk forum/components/SignUpModal failed.
(error: http://localhost/assets/forum/components/SignUpModal.js)
    at __webpack_require__.f.j (jsonp chunk loading:27:1)
    at ensure chunk:6:1
    at Array.reduce (<anonymous>)
    at __webpack_require__.e (ensure chunk:5:1)
    at HeaderSecondary.js:65:47
    at ModalManagerState.show (ModalManagerState.ts:81:1)
    at HTMLButtonElement.onclick (HeaderSecondary.js:65:29)

Output of php flarum info:

Flarum core: 2.0.0-beta.2
PHP version: 8.3.14
MySQL version: 8.0.40
Loaded extensions: Core, date, libxml, openssl, pcre, sqlite3, zlib, ctype, curl, dom, fileinfo, filter, hash, iconv, json, mbstring, SPL, session, PDO, pdo_sqlite, standard, posix, random, readline, Reflection, Phar, SimpleXML, tokenizer, xml, xmlreader, xmlwriter, mysqlnd, calendar, exif, gd, intl, pcntl, pdo_mysql, sockets, sodium, zip, Zend OPcache
+----------------------+---------+--------+
| Flarum Extensions    |         |        |
+----------------------+---------+--------+
| ID                   | Version | Commit |
+----------------------+---------+--------+
| flarum-flags         | 2.x-dev |        |
| flarum-approval      | 2.x-dev |        |
| flarum-tags          | 2.x-dev |        |
| flarum-suspend       | 2.x-dev |        |
| flarum-subscriptions | 2.x-dev |        |
| flarum-sticky        | 2.x-dev |        |
| flarum-statistics    | 2.x-dev |        |
| flarum-messages      | 2.x-dev |        |
| flarum-mentions      | 2.x-dev |        |
| flarum-markdown      | 2.x-dev |        |
| flarum-lock          | 2.x-dev |        |
| flarum-likes         | 2.x-dev |        |
| flarum-lang-english  | 2.x-dev |        |
| flarum-emoji         | 2.x-dev |        |
| flarum-bbcode        | 2.x-dev |        |
+----------------------+---------+--------+
Base URL: http://localhost
Installation path: /var/www
Queue driver: sync
Session driver: file
Mail driver: log
Debug mode: ON

Any ideas what I should troubleshoot?

I'm on a Apple Silicon MacBook running macOS Sonama 14.1.1 if it matters.

SychO

What node version are you using?

davetodave178

SychO v20.6.0

davetodave178

I also just now tried v22.13.1 and 23.7.0 globally (using asdf) and I'm getting the same errors. Which version are you running?

SychO

I'm on 20, that's the minimum for 2.x

Is this on the latest 2.x branch, have you added any custom additions on top? there were similar issues that were fixed

davetodave178

SychO I don't have any changes yet. What I'm running is only the fork of the framework https://github.com/glowingblue/flarum-framework-2.x with all the latest changes – no differences to upstream

SychO

Ah, this must be a file path issue/bug, need to reproduce though

flarum/frameworkblob/5d26485c04099ab207648736fc3bf21318eef733/js-packages/webpack-config/src/RegisterAsyncChunksPlugin.cjs#L91

davetodave178

SychO Right, thanks. Can do some debugging tomorrow. Any quirks I need to consider / extra steps I'll need to take when "developing" the webpack-config?

SychO

davetodave178 nah, you can just modify code directly then re run yarn dev (or yarn build)

in this case the condition module.resource?.split('.')[0] === importPathResolved || module.rootModule?.resource?.split('.')[0] === importPathResolved is failing for some reason, an output along the lines of the following will probably give you insight into what the issue is. (Before the console.error line)

if (importPathResolved.includes('SignUpModal')) {
                    console.log('importPathResolved', importPathResolved);
                    chunks.forEach((c) =>
                      chunkModules(c).forEach((m) => {
                        if (m.resource?.includes('SignUpModal')) {
                          console.log('module.resource', m.resource);
                          console.log('condition', m.resource?.split('.')[0] === importPathResolved);
                        }

                        if (m.rootModule?.resource?.includes('SignUpModal')) {
                          console.log('rootModule.resource', m.rootModule.resource);
                          console.log('condition', m.rootModule?.resource?.split('.')[0] === importPathResolved);
                        }
                      })
                    );
                  }

in my case this outputs:

$ yarn dev
yarn run v1.22.19
$ webpack --mode development --watch
importPathResolved /home/sami/www/fltwo/framework/framework/core/js/src/forum/components/SignUpModal
module.resource /home/sami/www/fltwo/framework/framework/core/js/src/forum/components/SignUpModal.tsx
condition true
importPathResolved /home/sami/www/fltwo/framework/framework/core/js/src/forum/components/SignUpModal
module.resource /home/sami/www/fltwo/framework/framework/core/js/src/forum/components/SignUpModal.tsx
condition true
importPathResolved /home/sami/www/fltwo/framework/framework/core/js/src/forum/components/SignUpModal
module.resource /home/sami/www/fltwo/framework/framework/core/js/src/forum/components/SignUpModal.tsx
condition true
assets by path forum/components/*.js 169 KiB
  asset forum/components/UserSecurityPage.js 27.5 KiB [compared for emit] (name: forum/components/UserSecurityPage) 1 related asset
  asset forum/components/SettingsPage.js 25.4 KiB [compared for emit] (name: forum/components/SettingsPage) 1 related asset
...

davetodave178

SychO Figured out the issue; having a dot in my repository (flarum-framework-2.x) was the cause for the webpack config being unable to correctly resolve the path. Created a draft PR at flarum/framework4179 for a possible fix.