Vaadin 14.3.4 | CRUD | DOMException in vaadin-dialog.js

Flow
1

Hi all,

We are evaluating vaadin for an upcoming project. Currently we are using spring boot and VueJs but want to improve our workflow by switching to vaadin.

I’m currently working on an application that should use [CRUD components]
(https://vaadin.com/components/vaadin-crud).

The issue is that as soon as vaadin-crud-flow is added as a dependency a DOMException on page load occurs and the UI wont load properly.

This is what was added to the pom.xml according to the instructions of the CRUD component.

<dependencies>
	<dependency>
		<groupId>com.vaadin</groupId>
		<artifactId>vaadin-crud-flow</artifactId>
	</dependency>
</dependencies>

This is the exception that’s thrown if vaadin-crud-flow is added to the dependencies.

Uncaught DOMException: CustomElementRegistry.define: 'vaadin-dialog-overlay' has already been defined as a custom element vaadin-dialog.js:76
    <anonymous>             vaadin-dialog.js:76
    js                      vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:1491
    __webpack_require__     vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:20
    <anonymous>             vaadin-dialog.js:1
    js                      vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:1515
    __webpack_require__     vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:20
    <anonymous>             vaadin-confirm-dialog-styles.js:1
    js                      vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:1539
    __webpack_require__     vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:20
    <anonymous>             vaadin-confirm-dialog.js:1
    js                      vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:1551
    __webpack_require__     vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:20
    <anonymous>             vaadin-crud.js:1
    js                      vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:1743
    __webpack_require__     vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:20
    <anonymous>             generated-flow-imports.js:1
    js                      vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:5823
    __webpack_require__     vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:20
    <anonymous>             vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:84
    <anonymous>             vaadin-bundle-9eeac15af94d1cd63ea2.cache.js:87
    InnerModuleEvaluation   self-hosted:2356
    evaluation              self-hosted:2327

While I’m not entirely convinced that the CRUD component is the actual cause, due to my inexperience with vaadin I’m unable to track it down further.

Does anyone have input on how to handle this issue or a direction to point me towards?

2

So, after removing the CRUD components, working about a week on code which as far as I can tell is completely unrelated and than reverting the commit which removed the CRUD components it started to work again…

We have no idea what happened there. Maybe a caching issue? The advice we got was to remove package.json package-lock.json and the node_modules folder. However this did not help either.

3

Hi,

You have different solutions for this problem.
You can switch to pnpm instead of npm, it has a better dependency management and maybe it will solve your problem.
Here is the documentation to switch to pnpm: https://vaadin.com/docs/flow/advanced/tutorial-switch-npm-pnpm.html

You can add a plugin in webpack that gives you more information about the conflict:
At the root of your project run this:
npm install duplicate-package-checker-webpack-plugin --save-dev
In webpack.config.js, add this:

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
    })
  ]
});

If you never change it before, it should look like that after the change:

/**
 * This file has been autogenerated as it didn't exist or was made for an older incompatible version.
 * This file can be used for manual configuration will not be modified if the flowDefaults constant exists.
 */
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
    })
  ]
});

It should give you more information about the conflict if you rebuild and run the project.

Here is the issue: https://github.com/vaadin/flow/issues/8475

4

Thank you very much!
We will most likely switch to pnpm in the near future.
The duplicate-package-checker-webpack-plugin is very nice, the error message is way more detailed.