Bundling `@duetds/date-picker` with Rollup doesn't work

[sto3psl]

Describe the bug Currently @duetds/date-picker does not work with Rollup (or I didn't get it to). The problem appears to be a dynamic import statement with a template string:

return import(`./${bundleId}.entry.js${""}`);

Rollup seems to ignore these imports: "Dynamic imports on runtime are ignored by Rollup #2463"

To Reproduce Clone this repository https://github.com/sto3psl/rollup-duet-date-picker and follow the steps to create a bundle.

Expected behavior <duet-date-picker></duet-date-picker> should render in the browser with no errors.

Desktop (please complete the following information):

• OS: macOS 10.15.6
• Browser: all of them

---

I'm not sure if this problem comes through duetds/date-picker or Stencil.js or the way everything is published.

[sto3psl]

My current workaround is a custom Rollup plugin that directly resolves the template string import like this:

// rollup.config.js

export default {
  ...
  plugins: [
    {
      resolveDynamicImport(specifier, importer) {
        // match file with "bad" import
        const matches = !!importer.match(
          /@duetds\/date-picker\/dist.*\/index-/g
        );

        if (typeof specifier === "string" || !matches) return null;

        // resolve to static file, which will add it to the rollup bundle
        return this.resolve(
          "@duetds/date-picker/dist/esm/duet-date-picker.entry.js"
        );
      }
  ]
}

[WickyNilliams]

Thanks for the detailed report!

Can you try instead importing @duetds/date-picker/custom-element? That's the import intended for use with a bundler (docs are not clear on this admittedly). Though it's possible I still need to tweak the build to inline dynamic imports. If it doesn't work, let me know, and I'll fix it!

[sto3psl]

Well, that works flawlessly! Thanks @WickyNilliams!

I updated my repository and added a note with the "fix" if anyone else runs into this issue. I think it would be great to make it more clear in the docs that the single file bundle is supposed to be used with bundlers and that it also exports defineCustomElements.

[WickyNilliams]

Yeah, I'll update the docs in next batch of changes to be more clear about this. Also I can tweak that specific build to also have no dynamic imports, or dependencies at all. Just a single flat file. Should work in even more environments that way

[sto3psl]

As far as I could tell, @duetds/date-picker/custom-element didn't have dynamic imports. Thanks for your quick help!

[WickyNilliams]

I'll reopen this to track the docs changes :)

It indirectly contains a dynamic import, as it statically imports @stencil/core/internal, which itself contains a dynamic import

[ico85]

Using defineCustomElements from @duetds/date-picker/custom-element injects the styles. I don't want this. I cannot find a solution where I can exclude the css in a bundler. There are very opinionated styles which I simply don't want to include. Any Idea how to get the Datepicker without the css in the bundler?