shoelace-style/webpack-example

Is this config broken?

benjamin-thomas opened this issue · 0 comments

Hi, I'd like to play with this config but I'm too much of a noob regarding webpack to understand what's broken here.

me@host:~/code/shoelace-webpack-example$ npm --version
6.14.10

npm install followed by npm run start returns the following warnings

WARNING in ./src/index.js 5:0-20
"export 'defineCustomElements' was not found in '@shoelace-style/shoelace'

WARNING in ./src/index.js 4:0-12
"export 'setAssetPath' was not found in '@shoelace-style/shoelace'

On page load, the bundled js fails:

index.js?b635:4 Uncaught TypeError: Object(...) is not a function
    at eval (index.js?b635:4)
    at Module../src/index.js (main.js:167)
    at __webpack_require__ (main.js:20)
    at main.js:84
    at main.js:87

Which points to a problem with this function:

setAssetPath(document.currentScript.src);

I then tried to play with various import schemes, to no avail.

me@host:~/code/shoelace-webpack-example$ ag -F 'defineCustomElements' -l ./node_modules/@shoelace-style/ | grep -v 'shoelace/node_modules'
node_modules/@shoelace-style/shoelace/loader/node-main.js
node_modules/@shoelace-style/shoelace/loader/index.d.ts
node_modules/@shoelace-style/shoelace/dist/custom-elements/index.mjs
node_modules/@shoelace-style/shoelace/dist/custom-elements/index.d.ts
node_modules/@shoelace-style/shoelace/dist/cjs/loader.cjs.js
node_modules/@shoelace-style/shoelace/dist/esm/loader.mjs

So tried this import (setAssetsPath does not resolve):

import { defineCustomElements } from '@shoelace-style/shoelace/dist/custom-elements';
me@host:~/code/shoelace-webpack-example$ ag -F 'setAssetPath' -l ./node_modules
node_modules/@stencil/core/internal/hydrate/index.js
node_modules/@stencil/core/internal/stencil-core.d.ts
node_modules/@stencil/core/internal/client/index.js
node_modules/@stencil/core/internal/stencil-public-runtime.d.ts
node_modules/@stencil/core/internal/testing/index.js
node_modules/@stencil/core/CHANGELOG.md
node_modules/@stencil/core/compiler/stencil.min.js
node_modules/@stencil/core/compiler/stencil.js

Then this (I don't think I'm supposed to do this anyways):

import {setAssetPath} from "@stencil/core";

Could you please advice? Could I be missing a dependency of some sort? Or a requirement?