translate() not working with lit-element

[manustays]

<span>${translate("key")}</span> shows the following text on UI:

part => { partCache.set(part, cb); updatePart(part, cb); }

Whereas, <span>${get("key")}</span> is working fine.

Using lit-element@2.0.1 (lit-html@1.0.0) & lit-translate@1.1.5

[andreasbm]

Thanks for notifying me! Your issue can be reproduced by having two different versions of lit-html in the node_modules folder at the same time (this will be printed out if you run npm ls lit-html). I bumped the dependencies so lit-html now depends on ^1.0.0 which will most likely resolve your issue. If you are still having issues after a reinstallation, please notify me so I can investigate it further.

[manustays]

Thanks for the update, @andreasbm! I did update/reinstall lit-translate but the problem is still the same.

Result of npm ls lit-html:

+-- @material/mwc-fab@0.3.6
| +-- @material/mwc-base@0.3.6
| | `-- lit-html@1.0.0 
| `-- @material/mwc-ripple@0.3.6
|   `-- lit-html@1.0.0  deduped
`-- lit-element@2.0.1
  `-- lit-html@1.0.0 

Result of npm ls @appnest/lit-translate:

`-- @appnest/lit-translate@1.1.6 

[andreasbm]

You are very welcome! From the looks of it the lit-html dependency from @material/mwc-base@0.3.6 appears not to be deduped which means you still have 2 versions of lit-html in your node_modules folder. Does it resolve your issue if you run npm dedupe? You can also try to remove your node_modules folder and reinstall from scratch.

[manustays]

Issue resolved by reinstalling from scratch. Thank you :)

[stefanholzapfel]

Hi @andreasbm !

I'm also having this issue with lit-html 1.3.0 installed.

I use yarn so packages should be deduped anyway. Any ideas? Thanks!

[Myat-Noe-Wai]

Hi @andreasbm, My problem is that: lit-translate - translate() return object instead of returning translated value. I import "lit-element" instead of "lit". Can lit-translate - translate() function be used by importing from lit-element without importing from lit? I want to use like the following:

import {
  LitElement,
  html
} from 'lit-element';
translate("key");

instead of this:

import {
  LitElement,
  html
} from 'lit';
translate("key");

Any help would be appreciated. Thanks in advance!