Usage within Storybook (@storybook/web-components-vite)

[lukethacoder]

I am attempting to run the latest version of Storybook (v9) with the @storybook/web-components-vite framework and this vite-plugin-lwc.

I managed to wrangle the dev server to run (not too sure if this is a bug with vite-plugin-lwc or the way storybook/@storybook/web-components-vite works - notes at the bottom of this discussion) but am running into issues when building storybook.

Build Issues

Here's a reproduction repo https://github.com/lukethacoder/lwc-storybook-vite/tree/feature/initial-issue-2025-09-01 and/or a StackBlitz playground https://stackblitz.com/edit/storybook-vite-lwc-example?file=README.md

Running pnpm dev, it boots up fine. But attempting to run pnpm build it returns this error:

pnpm build

> lwc-storybook-vite@1.0.0 build /home/projects/stackblitz-starters-jzmxvmya
> storybook build

storybook v9.1.3

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Building preview..
No story files found for the specified pattern: force-app/**/__docs__/**/*.mdx
vite v7.1.3 building for production...
✓ 9 modules transformed.
✗ Build failed in 251ms
=> Failed to build the preview
iframe.html?html-proxy&inline-css&index=0.css (2:17): Expected ';', '}' or <eof> (Note that you need plugins to import files that are not JavaScript)
file: ./iframe.html?html-proxy&inline-css&index=0.css:2:17

1: 
2:       @font-face {
                    ^
3:         font-family: 'Nunito Sans';
4:         font-style: normal;

    at Module.getRollupError (file://./node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/parseAst.js:568:41)
    at ParseError.initialise (file://./node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:14458:41)
    at convertNode (file://./node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:16338:10)
    at convertProgram (file://./node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:15578:12)
    at Module.setSource (file://./node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:17333:24)
    at async ModuleLoader.addModuleSource (file://./node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:21346:13)
? Would you like to help improve Storybook by sending anonymous

Disabling the vite-plugin-lwc seems to stop the error from occuring, but obviously means the LWCs aren't loaded correctly.

Development Issues

As mentioned earlier, I ran into some issues getting the storybook development server running. Utility LWCs (.js only) were attempting to import .html files. I tested this in a purely vite playground outside of Storybook and didn't run into the issue, so again, might be some Storybook whackiness? Not too sure, but the adding the following got things working for me. It mimics a bit of the logic in the @lwc/rollup-plugin.

async resolveId(source, importer, options) {
  if (!filter(source)) {
    return
  }

+ /**
+  * When attempting to import HTML from a JS file, double check
+  * the file exists. `vite-plugin-lwc` assumes it does and
+  * causes errors when it doesn't.
+  *
+  * Somewhat mimics the `@lwc/rollup-plugin` logic to prevent
+  * the assumption of a `.html` file for all LWCs.
+  */
+ if (
+   importer &&
+   path.extname(importer) === '.js' &&
+   path.isAbsolute(importer) &&
+   path.extname(source) === '.html'
+ ) {
+   const dir = path.dirname(importer)
+   let filePath = path.join(dir, source)
+ 
+   if (path.isAbsolute(source)) {
+     filePath = source
+   }
+ 
+   if (!fs.existsSync(filePath)) {
+     // taken from `@lwc/rollup-plugin`
+     return IMPLICIT_DEFAULT_HTML_PATH
+   }
+ }

  if (
    importer &&
    path.extname(importer) === '.html' &&
    path.isAbsolute(importer) &&
    path.extname(source) !== '' &&
    path.isAbsolute(source)
  ) {
    const dir = path.dirname(importer)
    return path.join(dir, source)
  }

  try {
    const id = await (options.ssr ? ssr : csr).resolveId.call(
      this,
      source,
      importer,
      options
    )

    if (!id) {
      return
    }

    return id
  } catch (e) {
    this.error(getError(e, source))
  }
}

---

Feel free to ignore this if it is not directly related to this plugin. Not 100% sure where the issue is coming from. adding --debug and/or --loglevel silly to the storybook build command is not helpful at all (docs).

Related: storybookjs/storybook#32359, vitejs/vite#20708

[lukethacoder]

iframe.html/storybook.css import fix

Managed to get the above working, looks like the vite:css and vite:css-post were getting the way. Instead of blanket removing them, added some logic to check if LWC should be interfering or if they should be left alone on a per import basis.

Just to get things working, I attempted to path check based on the dir value(s) from the modules in the config as I think most people would be using this. Not a perfect fix as npm modules won't work, but I don't require that for my use case.

vite-plugin-lwc/index.ts import fix

function transformOverride(transform, viteOptions) {
  const moduleDirs = viteOptions.modules.reduce((acc, item) => {
    if (item.dir) {
      acc.push(item.dir)
    }
    if (item.dirs) {
      acc.push(...item.dirs)
    }

    return acc
  }, [])

  return {
    ...transform,
    filter: transform.filter,
    async handler(code, id, options) {
      if (isLwcCss(id, moduleDirs)) {
        /**
         * These imports are handled by the LWC engine and
         * should be ignored by `vite:css`/`vite:css-post`.
         */
        return undefined
      } else {
        return transform.handler?.call(this, code, id, options)
      }
    },
  }
}

/**
 * Poor mans "is LWC" check. Based on LWC module dir|dirs config passed
 * to the plugin.
 *
 * @param {string} id - Id path to check
 * @param {string[]} moduleDirs - list of module directories (from dir|dirs config)
 * @returns {boolean}
 */
const isInModuleDirs = (id: string, moduleDirs: string[]) => {
  // loop until a match is found (or fail through all matches)
  for (const moduleDir of moduleDirs) {
    // removes the `./` from the prefix so the full path of id matches
    const dirPath = moduleDir.replace('./', '/')

    if (id.includes(dirPath)) {
      return true
    }
  }

  return false
}

// taken from `@lwc/rollup-plugin`
const IMPLICIT_DEFAULT_HTML_PATH = '@lwc/resources/empty_html.js'
const IMPLICIT_DEFAULT_CSS_PATH = '@lwc/resources/empty_css.css'

const isLwcCss = (id: string, moduleDirs: string[]) => {
  // should handle '@lwc/resources/empty_html.css' & '@lwc/resources/empty_css.css'
  if (
    isInModuleDirs(id, moduleDirs) ||
    id.startsWith('c/') ||
    id.includes(IMPLICIT_DEFAULT_HTML_PATH) ||
    id.includes(IMPLICIT_DEFAULT_CSS_PATH)
  ) {
    // ✅ is LWC import
    return true
  }

  // ❌ continue with standard Vite CSS processing
  return false
}

export default (options: ViteLwcOptions = {}): Plugin[] => {
  options = normalizeOptions(options)

  return [
    patch({
      'vite:css': (p) => {
        p.transform = transformOverride(p.transform, options)
      },
      'vite:css-post': (p) => {
        p.transform = transformOverride(p.transform, options)
      },
    }),
    alias(),
    {
      ...lwc(options),
      apply: 'build',
    },
    {
      ...lwc(options),
      enforce: 'post',
      apply: 'serve',
    },
    hmr(),
  ]
}

---

New issues

I am now running into issues when attempting to import CSS only LWCs from another LWC.

/* c/cssShared */
button {
  background-color: lawngreen !important;
}

/* c/button */
@import "c/cssShared";

button {
  background-color: #deb887;
}

Again, this runs fine in dev mode, but attempting to run the build, it fails:

> storybook build

storybook v9.1.3

info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Building preview..
vite v7.1.3 building for production...
[plugin lwc:vite-plugin] modules/test/helloWorld/helloWorld.js: The component namespace and name could not be determined from the specifier null or filename "C:\\Github\\lwc-storybook-vite\\modules\\test\\helloWorld\\helloWorld.js"
The namespace and name should both be non-empty strings. You may get unexpected behavior at runtime. Found: namespace="C:\\Github\\lwc-storybook-vite\\modules\\test\\helloWorld" and name="C:\\Github\\lwc-storybook-vite\\modules\\test\\helloWorld"
[plugin lwc:vite-plugin] force-app/main/default/lwc/button/button.js: The component namespace and name could not be determined from the specifier null or filename "C:\\Github\\lwc-storybook-vite\\force-app\\main\\default\\lwc\\button\\button.js"
The namespace and name should both be non-empty strings. You may get unexpected behavior at runtime. Found: namespace="C:\\Github\\lwc-storybook-vite\\force-app\\main\\default\\lwc\\button" and name="C:\\Github\\lwc-storybook-vite\\force-app\\main\\default\\lwc\\button"
[plugin lwc:vite-plugin] force-app/main/default/lwc/utils/utils.js: The component namespace and name could not be determined from the specifier null or filename "C:\\Github\\lwc-storybook-vite\\force-app\\main\\default\\lwc\\utils\\utils.js"
[plugin lwc:vite-plugin] force-app/main/default/lwc/cssShared/cssShared.css: The component namespace and name could not be determined from the specifier null or filename "C:\\Github\\lwc-storybook-vite\\force-app\\main\\default\\lwc\\cssShared\\cssShared.css"
force-app/main/default/lwc/button/button.css (1:7): Error when using sourcemap for reporting an error: Can't resolve original location of error.
✓ 101 modules transformed.
✗ Build failed in 1.48s
=> Failed to build the preview
force-app/main/default/lwc/button/button.css (1:7): "default" is not exported by "force-app/main/default/lwc/cssShared/cssShared.css", imported by "force-app/main/default/lwc/button/button.css".
file: C:/Github/lwc-storybook-vite/force-app/main/default/lwc/button/button.css:1:7

1: import stylesheet0 from "c/cssShared";
          ^
2:
3: function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {

    at getRollupError (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at error (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/parseAst.js:397:42)
    at Module.error (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:16915:16)
    at Module.traceVariable (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:17367:29)
    at ModuleScope.findVariable (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:15037:39)
    at Identifier.bind (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:5400:40)
    at ArrayExpression.bind (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:2787:28)
    at ExportDefaultDeclaration.bind (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:2791:23)
    at Program.bind (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:2787:28)
    at Module.bindReferences (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:16894:18)
    at Graph.sortModules (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:22690:20)
    at Graph.build (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:22588:14)
    at async file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:23278:13
    at async catchUnfinishedHookActions (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:22749:16)
    at async rollupInternal (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/rollup@4.50.0/node_modules/rollup/dist/es/shared/node-entry.js:23273:5)
    at async buildEnvironment (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/vite@7.1.3_@types+node@24.3.0_terser@5.43.1_tsx@4.20.5/node_modules/vite/dist/node/chunks/dep-Bj7gA1-0.js:34134:12)
    at async Object.build (file:///C:/Github/lwc-storybook-vite/node_modules/.pnpm/vite@7.1.3_@types+node@24.3.0_terser@5.43.1_tsx@4.20.5/node_modules/vite/dist/node/chunks/dep-Bj7gA1-0.js:34504:19)
    at async build (.\node_modules\.pnpm\@storybook+builder-vite@9.1_5e3440e2c00145313cca3e98dbd24aa4\node_modules\@storybook\builder-vite\dist\index.js:85:230)
    at async Promise.all (index 0)
    at async buildStaticStandalone (.\node_modules\.pnpm\storybook@9.1.3_@testing-li_7d44ebdbab3de033edac486978790857\node_modules\storybook\dist\core-server\index.cjs:39763:3)
    at async withTelemetry (.\node_modules\.pnpm\storybook@9.1.3_@testing-li_7d44ebdbab3de033edac486978790857\node_modules\storybook\dist\core-server\index.cjs:42279:12)
    at async build (.\node_modules\.pnpm\storybook@9.1.3_@testing-li_7d44ebdbab3de033edac486978790857\node_modules\storybook\dist\cli\bin\index.cjs:5849:3)
    at async r.<anonymous> (.\node_modules\.pnpm\storybook@9.1.3_@testing-li_7d44ebdbab3de033edac486978790857\node_modules\storybook\dist\cli\bin\index.cjs:6036:7)
 ELIFECYCLE  Command failed with exit code 1.

Running outside of Storybook in a vanilla vite context, it seems to have a similar issue. Have raised as an issue (#96) as I believe this might be a bug with vite-plugin-lwc and not the storybook config.