bug: Variable imports cannot import their own directory, place imports in a separate directory or make the import filename more specific. For example

[metayii]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.5.2

Current Behavior

When running npm run dev on a sveltekit app with vimejs (which depends on stencil), or running npm run build with the static adapter for sveltelit, the following errors appear:

$ npm run dev
/home/ubuntu/tmp/errr/my-app/node_modules/@stencil/core/internal/client/index.js
2725|          return module[exportName];
2726|      }
2727|      return import(
   |                    ^
2728|      /* webpackInclude: /\.entry\.js$/ */
2729|      /* webpackExclude: /\.system\.entry\.js$/ */

The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

Plugin: vite:import-analysis
File: /home/ubuntu/tmp/errr/my-app/node_modules/@stencil/core/internal/client/index.js?v=eb517c28

Expected Behavior

Clean run

Steps to Reproduce

npm run dev

Code Reproduction URL

https://github.com/metayii/sveltekit-vimejs-stencil-error/tree/master

Additional Information

"@stencil/core": "2.5.2"
"@sveltejs/kit": "next"
"@vime/core": "^5.3.0"
"@vime/svelte": "^5.3.0"

Similar to 2752

[johnjenkins]

This is the issue mentioned / will be fixed by #2959

[metayii]

This is the issue mentioned / will be fixed by #2959

Thanks. I have this in the package.json for @vime/core:

{ "name": "@johnjenkins/stencil-community", "version": "2.11.1", "license": "MIT",

But I still get:

[rollup-plugin-dynamic-import-variables] invalid import "import( /* @vite-ignore */ /* webpackInclude: /\.entry\.js$/ */ /* webpackExclude: /\.system\.entry\.js$/ */ /* webpackMode: "lazy" */ ./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''})". Variable imports cannot import their own directory, place imports in a separate directory or make the import filename more specific. For example: import(./foo/${bar}.js`).
file: /home/app/node_modules/@vime/core/node_modules/@stencil/core/internal/client/index.js

invalid import "import(
/* @vite-ignore /
/ webpackInclude: /.entry.js$/ /
/ webpackExclude: /.system.entry.js$/ /
/ webpackMode: "lazy" /
./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''})". Variable imports cannot import their own directory, place imports in a separate directory or make the import filename more specific. For example: import(./foo/${bar}.js).
Error: invalid import "import(
/ @vite-ignore /
/ webpackInclude: /.entry.js$/ /
/ webpackExclude: /.system.entry.js$/ /
/ webpackMode: "lazy" */
./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''})". Variable imports cannot import their own directory, place imports in a separate directory or make the import filename more specific. For example: import(./foo/${bar}.js).
at dynamicImportToGlob (/home/app/node_modules/rollup-plugin-dynamic-import-variables/src/dynamic-import-to-glob.js:92:11)
at Object.enter (/home/app/node_modules/rollup-plugin-dynamic-import-variables/index.js:35:26)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:116:17)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:153:12)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:153:12)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:153:12)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:146:19)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:153:12)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:153:12)
at SyncWalker.visit (/home/app/node_modules/estree-walker/dist/umd/estree-walker.js:146:19)`

when I run npm run build

[metayii]

  "dependencies": {
    "@stencil/core": "npm:@johnjenkins/stencil-community@^2.11.1",
    "@types/fscreen": "^1.0.1",
    "fscreen": "^1.2.0",
    "mitt": "^3.0.0",
    "stencil-wormhole": "^3.4.1"
  },

[YugoCode]

I still have this issue. Any updates?

[peterpeterparker]

If anyone needs a workaround to load Stencil component in Sveltekit, mine:

onMount(async () => {
    const {defineCustomElement} = await import('@papyrs/stylo/dist/components/stylo-editor');
    defineCustomElement();

    const {DeckgoDoc} = await import('@deckdeckgo/core/dist/components/deckgo-doc');
    customElements.define('deckgo-doc', DeckgoDoc);
  });

[rwaskiewicz]

👋 The bug reported in this issue has been fixed with the v2.16.0 release of Stencil. Libraries using Stencil (like Vime) may need to recompile with the experimentalimportinjection flag enabled.

I'm going to close this issue. If you believe that the bug still exists, please feel free to open a new ticket. Thanks again!