Ngx-formly: Universal SSR render error - Cannot read property 'hooks' of undefined

[mferak]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request

Current behavior
Visiting a page with a formly form rendered by Angular Universal SSR, I get an error, the page doesn't load at all. The same page renders fine if rendered by browser.

TypeError: Cannot read property 'hooks' of undefined
    at FormlyField.triggerHook (/home/test.universaledition.com/web/dist/server.js:171488:24)
    at FormlyField.ngOnDestroy (/home/test.universaledition.com/web/dist/server.js:171432:14)
    at callProviderLifecycles (/home/test.universaledition.com/web/dist/server.js:77721:18)
    at callElementProvidersLifecycles (/home/test.universaledition.com/web/dist/server.js:77689:13)
    at callLifecycleHooksChildrenFirst (/home/test.universaledition.com/web/dist/server.js:77679:29)
    at destroyView (/home/test.universaledition.com/web/dist/server.js:85875:5)
    at callViewAction (/home/test.universaledition.com/web/dist/server.js:86001:13)
    at execEmbeddedViewsAction (/home/test.universaledition.com/web/dist/server.js:85944:17)
    at destroyView (/home/test.universaledition.com/web/dist/server.js:85873:5)
    at callViewAction (/home/test.universaledition.com/web/dist/server.js:86001:13)

Expected behavior
Page should render with the form without any complications, no matter if it's SSR or browser rendered.

Please tell us about your environment:
using @nguniversal/express-engine for SSR
(Node Express server)
Latest version of ngx-formly (5.5.1)
All libraries updated via npm update.

• Angular version: 8.2.11

• Browser: [all]

• Language: [all]

[mferak]

I checked this issue even though I don't have any custom fields, but part of the error is the same: https://github.com/ngx-formly/ngx-formly/issues/1821 Moreover, the issue says it should be resolved by 5.5.0, which for me it isn't. Any help would be appreciated. The form is really quite basic.

[aitboudad]

which UI do you use?

[mferak]

which UI do you use?

Bootstrap

[aitboudad]

somehow the field is undefined during onDestroy call, I'm going to fix that, but I would like it if possible to provide me a reproduction example in order to avoid a regression in the future.

[mferak]

Thanks. I wonder how to approach this. Would it be possible to show you my workflow say via a quick call and screen sharing first?

[mferak]

somehow the field is undefined during onDestroy call, I'm going to fix that, but I would like it if possible to provide me a reproduction example in order to avoid a regression in the future.

Hi so I went ahead and created a repository for you (invited via Github) with a very bare app that showcases what's happening.

Please run the following to build & run:

npm install
npm run build:ssr
npm run serve:ssr

After that you will see the error.

Obviously you can run ng serve to see what the behavior should be.

Thank you for your help!

[aitboudad]

ok thinks!

[mferak]

@aitboudad Thanks for the fix! Is there a way for me to test this change in our environment? NPM still shows 5.5.1 as latest.

[aitboudad]

use the following workarround until the new version is released.

const win = createWindow(template);
global['window'] = win.window;
global['document'] = win.document;
global['navigator'] = win.navigator;
global['localStorage'] = win.localStorage;
+ // TODO: remove after updating to formly `5.5.2`
+ global['FileList'] = Object;
+ global['File']= Object;
+ global['Blob'] = Object;

[mferak]

Thanks, unfortunately this won't work in my case as we're building using Jenkins so I don't think I have control over changing anything in node_modules.

[aitboudad]

the above changes are located in your server.ts file which part of your source code and not node_modules

[mferak]

Ohh, my bad - thanks!

[aitboudad]

v5.5.2 is released which includes a fix for this issue.

[eng-dibo]

I have the same issue with Angular universal (SSR) using material UI.
formly version: 5.5.11

-> sometimes it works or crashes without any modification in my project.

[aitboudad]

@eng-dibo our E2E test seems working (material ui is covered), so in that case we may need a reproduction example.

[eng-dibo]

@aitboudad
even after this issue occuers, once I restart the server it works.

[eng-dibo]

this is the details of the error

TypeError: Cannot read property 'hooks' of undefined
    at FormlyField.triggerHook (dist\server\main.js:187943:24)
    at FormlyField.ngOnDestroy (dist\server\main.js:187891:14)
    at callProviderLifecycles (dist\server\main.js:92849:18)
    at callElementProvidersLifecycles (dist\server\main.js:92808:13)
    at callLifecycleHooksChildrenFirst (dist\server\main.js:92790:29)
    at destroyView (dist\server\main.js:103890:5)
    at callViewAction (dist\server\main.js:104049:13)
    at execEmbeddedViewsAction (dist\server\main.js:103986:17)
    at destroyView (dist\server\main.js:103888:5)
    at callViewAction (dist\server\main.js:104049:13)
    at execComponentViewsAction (dist\server\main.js:103957:13)
    at destroyView (dist\server\main.js:103889:5)
    at callViewAction (dist\server\main.js:104049:13)
    at execEmbeddedViewsAction (dist\server\main.js:103986:17)
    at destroyView (dist\server\main.js:103888:5)
    at callViewAction (dist\server\main.js:104049:13)

[aitboudad]

@eng-dibo fixed in v5.6.0 release.

[eng-dibo]

great version, I'm so excited to try it.

[tmohammad78]

@aitboudad I have same issue in react and I don't know why its happen . my package is
"dev:server": "nodemon --watch build --exec node dist/bundle.js ",
"dev:build:server": "webpack --config webpack.config.js --watch --env.mode=prod",
"dev:build:client": "webpack --config webpack.config.js --watch --env.mode=dev",
there isn't bug in compile client and server ,both of them compile correctly

its a small section of my server.ts

const app = express();

app.use(require('webpack-dev-middleware')());

//add the bundle file to the project
app.use(express.static(path.resolve(__dirname, '../../lib')));
//add static files in project
app.use(express.static(path.resolve('../../asssets')))

app.get("*", (req, res) => {
    const store = createStore(req);
    const promises = matchRoutes(Routes, req.path)
        .map(({ route }) => {
            return route.loadData ? route.loadData(store) : Promise.resolve(null);
        })
        .map((promise) => {
            if (promise) {
                return new Promise((resolve, reject) => {
                    promise.then(resolve).catch(resolve);
                });
            }
        });

and its error

TypeError: Cannot read property 'hooks' of undefined
    at e.exports (C:\Users\USER\react-app\dist\bundle.js:358:69797)
    at e.exports (C:\Users\USER\react-app\dist\bundle.js:358:34433)
    at Object.<anonymous> (C:\Users\USER\react-app\dist\bundle.js:158:79264)
    at Object.<anonymous> (C:\Users\USER\react-app\dist\bundle.js:158:80189)
    at t (C:\Users\USER\react-app\dist\bundle.js:1:101)
    at Object.<anonymous> (C:\Users\USER\react-app\dist\bundle.js:158:78884)
    at t (C:\Users\USER\react-app\dist\bundle.js:1:101)
    at C:\Users\USER\react-app\dist\bundle.js:1:1144
    at Object.<anonymous> (C:\Users\USER\react-app\dist\bundle.js:1:1155)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
[nodemon] app crashed - waiting for file changes before starting...

[aitboudad]

@tmohammad78 sorry, I've no idea on that part :pray:!

[tmohammad78]

@aitboudad
thank you , No problem