Unable to initialize widget via custom script or AMD loader due to missing dependencies to html helpers

[jlchereau]

Bug report

• html/button
• html/chip
• html/chiplist
• html/htmlbase
• html/input
• ?

Check https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.button.js#L2

Workaround: They can be extracted from kendo.web.js

Webpack error:

ERROR in ./src/js/vendor/kendo/kendo.dropdownlist.js
Module not found: Error: Can't resolve 'html/button' in 'C:\WebStorm\My Project\src\js\vendor\kendo'
resolve 'html/button' in 'C:\WebStorm\My Project\src\js\vendor\kendo'
  Parsed request is a module
  using description file: C:\WebStorm\My Project\package.json (relative path: ./src/js/vendor/kendo)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      C:\WebStorm\My Project\src\js\vendor\kendo\node_modules doesn't exist or is not a directory
      C:\WebStorm\My Project\src\js\vendor\node_modules doesn't exist or is not a directory
      C:\WebStorm\My Project\src\js\node_modules doesn't exist or is not a directory
      C:\WebStorm\My Project\src\node_modules doesn't exist or is not a directory
      looking for modules in C:\WebStorm\My Project\node_modules
        C:\WebStorm\My Project\node_modules\html doesn't exist
      C:\WebStorm\Memba\node_modules doesn't exist or is not a directory
      C:\WebStorm\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in C:\WebStorm\My Project\src\js\vendor\kendo
        existing directory C:\WebStorm\My Project\src\js\vendor\kendo\html
          using description file: C:\WebStorm\My Project\package.json (relative path: ./src/js/vendor/kendo/html)
            using description file: C:\WebStorm\My Project\package.json (relative path: ./src/js/vendor/kendo/html/button)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button doesn't exist
              .es6
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button.es6 doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button.js doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button.mjs doesn't exist
              as directory
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button doesn't exist
      looking for modules in C:\WebStorm\My Project\src\js\vendor\kendo
        existing directory C:\WebStorm\My Project\src\js\vendor\kendo\html
          using description file: C:\WebStorm\My Project\package.json (relative path: ./src/js/vendor/kendo/html)
            using description file: C:\WebStorm\My Project\package.json (relative path: ./src/js/vendor/kendo/html/button)
              no extension
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button doesn't exist
              .es6
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button.es6 doesn't exist
              .js
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button.js doesn't exist
              .mjs
                Field 'browser' doesn't contain a valid alias configuration
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button.mjs doesn't exist
              as directory
                C:\WebStorm\My Project\src\js\vendor\kendo\html\button doesn't exist
      looking for modules in C:\WebStorm\My Project\src\js\vendor
        C:\WebStorm\My Project\src\js\vendor\html doesn't exist
      looking for modules in C:\WebStorm\My Project\src\js
        C:\WebStorm\My Project\src\js\html doesn't exist
      looking for modules in C:\WebStorm\My Project\src
        C:\WebStorm\My Project\src\html doesn't exist
      looking for modules in C:\WebStorm\My Project
        C:\WebStorm\My Project\html doesn't exist
      looking for modules in C:\WebStorm\Memba
        C:\WebStorm\Memba\html doesn't exist
      looking for modules in C:\WebStorm
        C:\WebStorm\html doesn't exist
      looking for modules in D:\
        D:\html doesn't exist
 @ ./src/js/ui/ui.footer.es6 9:0-44
 @ ./src/js/ui/error.page.es6 17:0-37 57:0-6

Environment

• Kendo UI version: 2022.1.1119
• jQuery version: all
• Browser: all

[Iankodj]

Hi @jlchereau,

The html folder with the rendering utils is available through the distribution and it is included in the NPM distribution as well.

Also, I tried locally to build with webpack and everything seems to be fine on my end. Here you are a Stackblitz example with basic webpack configuration that bundles the kendo-ui NPM package: https://stackblitz.com/edit/github-qgxpis?file=README.md&terminal=.

Can you provide some more details on the case you have? Maybe, you have a different webpack config that is relevant to the case?

[jlchereau]

Hi @Iankodj

My webpack config uses the sources from kendoui.for.jquery.2022.1.119.commercial-source.zip, not the npm distribution. I share these files with another configuration using systemjs for developing custom widgets.

It has been working well with all previous versions of Kendo UI. It has only beeen failing with 2022 R1.

I have fixed it by extracting from kendo.web.js the following files and copying them in an html subdirectory:

• html/button
• html/chip
• html/chiplist
• html/htmlbase
• html/input

These files are required for bundling from kendoui.for.jquery.2022.1.119.commercial-source.zip and kendo-ui-core-2022.1.119.zip if you do not use kendo.all.js, kendo.web.js or kendo.dataviz.js, since the three includes the corresponding AMD modules.

For example: without these files, the loader/bundler would not know where to find and how to load the 'html/button' dependency of kendo.button.js:

(function (f, define) {
    define('kendo.button', [
        'kendo.core',
        'kendo.badge',
        'html/button'
    ], f);
}(function () {
...
}));

This problem does not affect the npm distribution which has these files.

[pacoweb]

I have the same problem.

The online tool Kendo Custom Download too don't include these dependencies in the generated file.

[nelito987]

Reported in ticket ID: 1550433

[Iankodj]

Hi @jlchereau and @pacoweb,

This will be fixed for the upcoming release. The HTML util modules will be moved to the root src folder in order for the Download Builder's resolver to correctly gather the required scripts and build a custom bundle. This will also address the initial issue with the modules not being distributed with the AMD package.