Npm/yarn warnings in the accelerator

Zsrdos · January 17, 2019, 9:27am

Hi, when I try to install work with the FieldType project I get a few warnings.

warning " > @angular-redux/store@7.1.1" has unmet peer dependency “@angular/core@^5.0.0”.
warning " > @angular-redux/store@7.1.1" has unmet peer dependency “redux@^3.5.0”.
warning “litium-ui > ng2-dnd@5.0.2” has incorrect peer dependency “@angular/core@^4.0.0 || ^5.0.0”.
warning “litium-ui > ng2-dnd@5.0.2” has incorrect peer dependency “@angular/forms@^4.0.0 || ^5.0.0”.
warning “litium-ui > ng2-signalr@5.0.0” has unmet peer dependency “jquery@>= 2.0.0”.

I don’t know much about Node, but can I ignore this, since @angular/core@6.. and redux is present in the node_moduels ? Is it just that the instller dose not know this?

Litium version: 7.0.2

ton.nguyen · January 17, 2019, 9:51am

You can simply ignore these warning. They will be fixed when those libraries’ authors, they fix it in their new version. It does not break anything.

Zsrdos · January 17, 2019, 10:13am

Oki, so thats not the problem then

When I “run npm install anything” let’s say “npm install ng2-ace-editor” all goes well, and all I see are the above warnings.

Then I go to extentions.ts and the import, in this case

 import { AceEditorModule } from 'ng2-ace-editor';

The IntelliSense autocompletes this for me, and the folder is present in the node node_modules, it builds fine, but in the browser I get,

dispatch.js:32 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at Object.../../src/Accelerator/extensions.ts (extensions.ts:8)

This is the same for all 4 different imports that I have tested, the ones already in there like import { CalendarModule } from ‘primeng/primeng’; Works with no problem.

Do i have to take some extra steps to include new dependencies ?

patric.forsgard · January 17, 2019, 12:24pm

It sounds that you are hitting the same part that is described here about changing webpack config.

Zsrdos · January 17, 2019, 2:39pm

If i dose this,

    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/](?!(ngx-moment)).*[\\/]/,
                name: "vendor",
                chunks: "all"
            },
            'litium-ui': {
                test: /[\\/]litium-ui[\\/]/,
                name: "litium-ui",
                chunks: "all"
            }
        }
    }

that only moves the error to the Accelerator file

ton.nguyen · January 17, 2019, 2:42pm

Could you share the error after you made the config change?

Zsrdos · January 17, 2019, 2:44pm

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at Object.../../node_modules/ngx-moment/fesm5/ngx-moment.js (Accelerator.js:333)
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at Object.../../src/Accelerator/extensions.ts (extensions.ts:8)
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at e.invoke (animations.js:1164)
    at Object.onInvoke (helpers.js:55)
    at e.invoke (animations.js:1164)
    at t.run (animations.js:1164)
    at animations.js:1164
    at I (animations.js:1164)
    at animations.js:1164
    at a (animations.js:1141)
    at e.invoke (animations.js:1164)
    at Object.onInvoke (helpers.js:55)
    at e.invoke (animations.js:1164)
    at t.run (animations.js:1164)
    at animations.js:1164
    at e.invokeTask (animations.js:1164)
    at Object.onInvokeTask (helpers.js:55)

this is the only thing added to the extensions.ts on line 8

import { MomentModule } from 'ngx-moment';

is the

ton.nguyen · January 17, 2019, 2:53pm

Please try with this config:

            commons: {
                test: /[\\/]node_modules[\\/](?!(moment)).*[\\/]/,
                name: "vendor",
                chunks: "all"
            },

ngx-moment uses moment so we need to include both of them.

Zsrdos · January 17, 2019, 3:01pm

This did not work, but i’m trying different regex, did this work for you?

back to:

dispatch.js:32 ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘call’ of undefined
TypeError: Cannot read property ‘call’ of undefined
at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
at Object…/…/src/Accelerator/extensions.ts (extensions.ts:8)
at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
at e.invoke (animations.js:1164)

Zsrdos · January 17, 2019, 3:09pm

This is probebly closer

test: /[\\/]node_modules[\\/](?!(.*moment)).*[\\/]/,

but this stills gives me

 dispatch.js:32 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at Object.../../node_modules/moment/moment.js (moment.js:4511)
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at Object.../../node_modules/ngx-moment/fesm5/ngx-moment.js (moment.js:4511)
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at Object.../../src/Accelerator/extensions.ts (extensions.ts:8)
    at u (manifest.js?v=9F35B00921DB3FE4309B5102310DCE882EB7C8D9CE514E90B0D692DAD432B00D:1)
    at e.invoke (animations.js:1164)
    at Object.onInvoke (helpers.js:55)
    at e.invoke (animations.js:1164)
    at I (animations.js:1164)
    at animations.js:1164
    at a (animations.js:1141)
    at e.invoke (animations.js:1164)
    at Object.onInvoke (helpers.js:55)
    at e.invoke (animations.js:1164)
    at t.run (animations.js:1164)
    at animations.js:1164
    at e.invokeTask (animations.js:1164)
    at Object.onInvokeTask (helpers.js:55)

To repleacte, just add any external lib to the extentions.ts and try to edit a block in admin that contains a filter-fields, and the error will appera in the console.

ton.nguyen · January 17, 2019, 3:25pm

Please use this for the moment, I will come back if I can find better solution:
test: /[\\/]node_modules[\\/](?!(.*moment|webpack)).*[\\/]/,

Zsrdos · January 17, 2019, 3:34pm

Thanks! this did work for Moment, it will be a bit of a pain since moast libs have a “few” dependensys But now I know the the principle behind it!

Zsrdos · January 17, 2019, 4:02pm

I’m fare from a webpack ninje, but am just playing around, you think something like this might work?

Sudo/untested code

mkdir external_lib
npm init
npm install big-moduel-lot-of-dependencys

4 edit webpack

 test: /(?![\\/]external_libs)[\\/]node_modules[\\/](?!(webpack)).*[\\/]/,

…

resolve: {
        modules: [
            helpers.root("node_modules"),
            helpers.root("external_libs/node_modules"),  //Added thid
            helpers.root("src/" + moduleName)
        ],

ps. i have no celue what helpers.root() actually dose just tetsing hehe

steve.redstorm · January 17, 2019, 4:10pm

Sometimes It helps to delete node_modules and npm i so it all clears out.

ton.nguyen · January 17, 2019, 8:20pm

We will get back to you soon. We are verifying a solution where you will not need to modify the webpack config at all when you want to install libs.

ton.nguyen · January 18, 2019, 1:20pm

Hi,

We have a solution. Please download this file to the machine, with the name common-vendors-module.js: https://pastebin.com/pYyfR5KQ

Put this file under this folder: Litium.Accelerator.FieldTypes\config\webpack

Modify webpack.js file to add this as the first line:
const commonVendorsTest = require('./common-vendors-module.js');

And change the vendor chunk config part as:

                commons: {
                    test: commonVendorsTest,
                    name: "vendor",
                    chunks: "all"
                },

Then it should work, you should be able to add any packages that you need without the need of modifying the webpack config anymore.

In the future, the common-vendors-module.js file will be included in the litium-ui package, so you can require it from webpack like this:
const commonVendorsTest = require('litium-ui/common-vendors-module.js');

Zsrdos · January 18, 2019, 1:40pm

This is awsome, thanks!

patric.forsgard · January 22, 2019, 12:48pm

@Zsrdos Did this solve your problem?

Zsrdos · January 22, 2019, 1:15pm

I did not try to do the fix code rewrite so right now I have a gigantic test exclutions string, but am sure the fix works and my problem is “solved” so I mark it as complete. Thanks!

Topic		Replies	Views
Error running BuildClientProjects.bat Questions litium-7	5	782	April 13, 2021
Error running BuildClientProjects.bat - @yarnpkg/parsers@3.0.0-rc.48: The engine "node" is incompatible with this module Questions litium-8	4	843	August 10, 2023
Error running BuildClientProjects.bat - @yarnpkg/parsers@3.0.0-rc.49: The engine “node” is incompatible with this module Questions litium-7 , litium-8	3	508	September 21, 2023
Steps to be able to build Accelerator clients (MVC, Email) with yarn/node/npm/BuildClientScripts Questions accelerator , litium-7	7	647	July 13, 2021
React Accelerator 1.0.0-rc2 and Litium8.13 issues Questions	8	313	January 3, 2024

Npm/yarn warnings in the accelerator

Related Topics