attribute_builders?module' does not provide an export named 'safeAttrPrefix'" when using version 5.0.4

[vikjung]

Get "SyntaxError: The requested module './builders/attribute_builders?module' does not provide an export named 'safeAttrPrefix'" when using version 5.0.4 Issue not occurring when using 5.0.3

[rslawik]

Thank you for the report @vikjung! This error comes from the safevalues dependency added in #332 when it is loaded from unpkg.com.

We can see the error on the demo page: https://googlewebcomponents.github.io/google-chart/#/elements/google-chart/demos/demo/index.html

https://unpkg.com/safevalues@0.4.3/index.mjs?module loads https://unpkg.com/safevalues@0.4.3/builders/attribute_builders?module which is redirected to attribute_builders.js and does not have ES module exports. I checked that attribute_builders.mjs exists. Why is it not selected by unpkg on redirect?

@bjarkler Could you take a look?

[neuracr]

I've changed how safevalues is packaged. Could you try loading it from e.g.

• https://unpkg.com/safevalues?module
• https://unpkg.com/safevalues@0.5.1/dist/mjs/index.js
• https://unpkg.com/safevalues/dist/mjs/index.js

?

[rslawik]

Hi @neuracr, I updated deps to 0.5.1, but it still fails to load from unpkg. This time due to /dom.

In loader.js we have

import { safeScriptEl } from "https://unpkg.com/safevalues@^0.5.1/dom?module";

that after redirects tries to load https://unpkg.com/safevalues@0.5.1/dom?module and gets HTTP 404.

The right URL is https://unpkg.com/safevalues@0.5.1/dist/mjs/dom?module and with Chrome devtools local overrides I was able to change the redirect to load that.

But then it fails with a new HTTP 500 error on https://unpkg.com/safevalues@0.5.1/dist/mjs/builders/html_sanitizer/html_sanitizer.js?module:

Cannot generate module for safevalues@0.5.1/dist/mjs/builders/html_sanitizer/html_sanitizer.js

SyntaxError: unknown: Support for the experimental syntax 'classProperties' isn't currently enabled (16:19):

  14 | /** Implementation for `HtmlSanitizer` */
  15 | export class HtmlSanitizerImpl {
> 16 |     sanitizerTable;
     |                   ^
  17 |     changes = [];
  18 |     constructor(sanitizerTable, token) {
  19 |         this.sanitizerTable = sanitizerTable;

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

undefined

I did not find a way to workaround that one to see if there are any other errors down the road.

Could you take another look?

[neuracr]

It looks like the transformation that unpkg does on dist/mjs/builders/html_sanitizer/html_sanitizer.js fails because the original source file uses an unsuported syntax. I'll try to change the transpilation config to output an older ES target.

[neuracr]

I've released 0.5.2-rc.1 which transpiles the ES module with target ES2015. This seems to work better with unpkg.com : https://codepen.io/neuracr/pen/MWZbPoR

I still need to figure out how to properly map "safevalues/dom". Alternatively, you can explicitly import https://unpkg.com/safevalues/dist/mjs/dom/index.js

Do you actually need the import pattern

import { safeScriptEl } from "https://unpkg.com/safevalues@^0.5.1/dom?module";

to work, or you can work with

import { safeScriptEl } from "https://unpkg.com/safevalues/dist/mjs/dom";

?

In the latter, I can just make a new release for 0.5.2 as is.

[rslawik]

These imports are generated by unpkg when using:

<script type=module src="https://unpkg.com/@google-web-components/google-chart?module"></script>

So it is not possible for the demo page to modify them.

Today, the demo page stopped working with 404s from npm-demos.appspot.com. I will follow up with the Lit team on this.

[augustjk]

This could be a bug with unpkg's ?module feature which they say is "very experimental". https://esm.run or https://esm.sh are alternative CDNs that seem to handle safevalues fine.

[rslawik]

Based on the suggestion from @augustjk: we load the google-chart.js from https://esm.run now.

<script type=module src="https://esm.run/@google-web-components/google-chart"></script>

This and the demo page now work again.