Material-components-web-components: Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-notched-outline" has already been used with this registry

[boluabraham]

Description

I created three custom elements using polymer/lit-element. I used some @material elements in my components. Using these my new created custom elements, I attempted to create another element but I keep getting the Uncaught DOMException error;

Steps to Reproduce

Example:

1. Created my-element-one with @material components imports
2. Created my-element-two with @material components imports
3. Using my-element-one and my-element-two as imports, created my-element-three
4. executed "polymer serve"

Expected Results

No error is throw

Actual Results

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "mwc-notched-outline" has already been used with this registry
at legacyCustomElement (http://127.0.0.1:8000/node_modules/lit-element/lib/decorators.js:15:25)
at http://127.0.0.1:8000/node_modules/lit-element/lib/decorators.js:48:104
at __decorate (http://127.0.0.1:8000/node_modules/tslib/tslib.es6.js:65:220)
at http://127.0.0.1:8000/node_modules/@material/mwc-notched-outline/mwc-notched-outline.js:24:18

Browsers Affected

• [ *] Chrome
• [ ] Firefox
• [ ] Edge
• [ ] Safari 11
• [ ] Safari 10
• [ ] IE 11

Versions

• Polymer: v3.0.0
• webcomponents: v2.0.0

[WeftDigital]

I've been finding, for reasons I don't understand at all, that many of these types of errors can be resolved by using the npm packages via unpkg.com instead of importing them from your local /node_modules directory.

Here is an example: https://jsbin.com/guqifem/edit?html,console,output

[asyncLiz]

This problem occurs when you have duplicate elements installed. It can happen if you install a later version of one component, but do not update the others.

Check your node_modules/@material/mwc-* folders. If anything of them have their own sub node_modules/ folder, this is the problem.

Check your versions and make sure every component is on the same version number. A simple npm i @material/mwc-*@version to correct those that do not match will fix this issue.

[e111077]

Hello @boluabraham, just wondering if you've had a time to look at this. Another way to help diagnose this is to use the npm ls command. You can try npm ls @material\mwc-notched-outline to help diagnose where your duplicates are.

@WeftDigital, those unpkg links work because they all import the latest version and same exact filepath which would be https://unpkg.com/@material/mwc-notched-outline@^(latest version)?module which is resolved on the fly by unpkg. The only way es modules dedupe is if they have the same url as the browser does not do anything smart here.

[e111077]

Hello, @boluabraham, do you have any update on the situation? We may close this issue due to inactivity 7 days after my last response (Feb 24)

[asyncLiz]

Closing for inactivity. If you're still facing this problem with the above solution, please comment and we'll reopen!

[boluabraham]

Hi @e111077 I was able to figure out the solution. the trick was to delete replicated material compoennts. this ensured that only one path to each material component used in the application

[tkottke90]

I am also experiencing this error message in an app I am working on. It seems to happen for me when I import both @material/mwc-textfield and @material/mwc-textarea.

[asyncLiz]

@tkottke90 have you tried the solution described above? https://github.com/material-components/material-components-web-components/issues/862#issuecomment-586378918

You have duplicate elements at different versions. Align all elements to the same version number to fix the error.

[tkottke90]

@tkottke90 have you tried the solution described above? #862 (comment)

You have duplicate elements at different versions. Align all elements to the same version number to fix the error.

This did work for me. Thank you. I thought my packages were on the same version but one was not

[e111077]

I've personally have had more luck using https://github.com/pikapkg/snowpack while developing personal projects as its compilation _tended_ to dedupe for me. (Though that's not it's main goal)

[ForestKatsch]

I am having the same issue with @material/mwc-textarea and @material/mwc-textfield. I have the same versions of all packages. Is this output from npm ls @material/mwc-notched-outline the expected output?

[email protected] /Users/forest/Documents/project-name
├─┬ @material/[email protected]
│ └── @material/[email protected]
├─┬ @material/[email protected]
│ └─┬ @material/[email protected]
│   └── @material/[email protected]
└─┬ @material/[email protected]
  └── @material/[email protected]  deduped

[asyncLiz]

I've seen that happen when some versions were mismatched, and then updated using npm. Try uninstalling and reinstalling them.

npm rm @material/{mwc-select,mwc-textarea,mwc-textfield,mwc-notched-outline}
npm i @material/{mwc-select,mwc-textarea,mwc-textfield}@0.15.0