#Vite can't find defineCustomElements module

1 messages · Page 1 of 1 (latest)

rapid sigil
#

The defineCustomElements are getting imported in the preview.ts of my Storybook Vite Instance

rapid sigil
#

I also enabled ```enableImportInjection: true,````

rapid sigil
#

I found a solution by adapting the package.json of the loader

  "name": "ui-components-loader",
  "private": true,
  "typings": "./index.d.ts",
  "module": "./index.js",
  "main": "./index.cjs.js", // doesn't work in vite
  "jsnext:main": "./index.es2017.js",
  "es2015": "./index.es2017.js",
  "es2017": "./index.es2017.js",
  "unpkg": "./cdn.js"
}
#

I had to change the main entry to .js instead of .cjs.js to make vite run again

#

Is this a known issue or is it a vite problem?

#
  "name": "ui-components-loader",
  "private": true,
  "typings": "./index.d.ts",
  "module": "./index.js",
  "main": "./index.js", // works in vite
  "jsnext:main": "./index.es2017.js",
  "es2015": "./index.es2017.js",
  "es2017": "./index.es2017.js",
  "unpkg": "./cdn.js"
}
#

And that's my stencil.config if needed

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { reactOutputTarget } from '@stencil/react-output-target';

export const config: Config = {
    namespace: 'ui-components',
    extras: {
        enableImportInjection: true,
    },
    cacheDir: '../../node_modules/.cache/stencil',
    plugins: [sass()],
    outputTargets: [
        {
            type: 'dist',
            esmLoaderPath: '../loader',
        },
        {
            type: 'www',
            serviceWorker: null, // disable service workers
        },

        reactOutputTarget({
            componentCorePackage: '@ds/ui-components',
            proxiesFile:
                '../../../packages/ui-components-react/src/lib/components/stencil-generated/index.ts',
        }),
    ],
};