vaadin-date-time-picker JS error when starting Vaadin in development mode :

Flow
1

When I start Vaadin in development mode (webpack-dev-server), I get this error when displaying any view and no component is loaded :

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "vaadin-button" has already been used with this registry
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-button/src/vaadin-button.js?babel-target=es6:194:16)
    at Module.../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-button/src/vaadin-button.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-ccb21733bec0950630b6.cache.js:2785:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-ccb21733bec0950630b6.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-button/theme/lumo/vaadin-button.js?babel-target=es6:3:79)
    at Module.../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-button/theme/lumo/vaadin-button.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-ccb21733bec0950630b6.cache.js:2809:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-ccb21733bec0950630b6.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js?babel-target=es6:7:107)
    at Module.../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-date-picker/theme/lumo/vaadin-date-picker-overlay-content-styles.js?babel-target=es6 (http://localhost:8080/VAADIN/build/vaadin-bundle-ccb21733bec0950630b6.cache.js:2929:1)
    at __webpack_require__ (http://localhost:8080/VAADIN/build/vaadin-bundle-ccb21733bec0950630b6.cache.js:20:30)
    at eval (webpack-internal:///../node_modules/@vaadin/vaadin-date-time-picker/node_modules/@vaadin/vaadin-date-picker/theme/lumo/vaadin-date-picker.js?babel-target=es6:3:103)

I can get rid of this error and get my app to display correctly by deleting the following line in the generated target/frontend/generated-flow-imports.js :

import '@vaadin/vaadin-date-time-picker/theme/lumo/vaadin-date-time-picker.js';

Any idea of might be the cause of this problem ?
Tested against Vaadin 14.3.1 and 14.3.7

Thanks

2

Hi,

You’ve got this error because the vaadin-button is defined twice in different versions because one component requires a different version than another.
It can appear only in development mode because the development mode brings all the components (production mode excludes the component you don’t need).

You can find which components are causing the conflict by using a webpack plugin.

You can try to exclude one of the component or upgrade it. Sometimes, switching to pnpm can fix the problem.
In the root of your project run:
npm install duplicate-package-checker-webpack-plugin --save-dev

Edit the webpack.config.js and add the plugin. It should look like that:

const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');

module.exports = merge(flowDefaults, {
  plugins: [
    new DuplicatePackageCheckerPlugin({
      // Also show module that is requiring each duplicate package (default: false)
      verbose: true,
      // Emit errors instead of warnings (default: false)
      emitError: true,
      // Show help message if duplicate packages are found (default: true)
      showHelp: true,
      // Warn also if major versions differ (default: true)
      strict: true
    })
  ]
});

You should have something like that if you re-run your application.

Running webpack to compile frontend resources. This may take a moment, please stand by...
ERROR in @vaadin/vaadin-button
  Multiple versions of @vaadin/vaadin-button found:
    2.3.0 /Users/sergey/vaadin-java/bakery-app-starter-flow-spring/~/@vaadin/vaadin-app-layout/~/@vaadin/vaadin-button from /Users/sergey/vaadin-java/bakery-app-starter-flow-spring/~/@vaadin/vaadin-app-layout/src/vaadin-drawer-toggle.js
    2.4.0-alpha1 /Users/sergey/vaadin-java/bakery-app-starter-flow-spring/~/@vaadin/vaadin-button from ./src/components/search-bar.js
Started webpack-dev-server. Time: 94584627ms

For reference, this is the ticket with the solution: https://github.com/vaadin/flow/issues/8475

3

Thanks a lot for your (very) quick reply !
I could spot the exact issue with your solution : I had an obsolete version of enhanced-date-picker (1.0.1) in my pom.xml that conflicted with the current date-picker in my Vaadin version.
I updated the enhanced-date-picker version to 1.3.1 and the problem was gone…

Thanks to you I have now a nice way to spot that kind of issues.

Cheers (from Paris)
Fred

4

Glad to help.

JC de Turku :slight_smile: