[Bug] Vite can not find eslint config

[Marcoru97]

What version of vite are you using?

2.9.7

System info and storybook versions

System:
OS: macOS 12.3.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
Yarn: 1.22.18 - ~/.yarn/bin/yarn
npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
Browsers:
Chrome: 100.0.4896.127
Firefox: 92.0.1
Safari: 15.4
npmPackages:
@storybook/addon-actions: ^6.4.22 => 6.4.22
@storybook/addon-essentials: ^6.4.22 => 6.4.22
@storybook/addon-links: ^6.4.22 => 6.4.22
@storybook/builder-vite: ^0.1.33 => 0.1.33
@storybook/vue3: ^6.4.22 => 6.4.22

Describe the Bug

I am currently trying to add eslint to the storybook setup with vite and it works in the "normal" project structure but when I add the eslint plugin to the storybook vite config, it crashes with the following exception:

[vite] Internal server error: No ESLint configuration found in /virtual:/@storybook/builder-vite.
  Plugin: vite-plugin-eslint
  File: /virtual:/@storybook/builder-vite/vite-app.js
      at CascadingConfigArrayFactory._finalizeConfigArray (/Users/marco/Documents/my-vue-app/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3962:19)
      at CascadingConfigArrayFactory.getConfigArrayForFile (/Users/marco/Documents/my-vue-app/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3753:21)
      at CLIEngine.isPathIgnored (/Users/marco/Documents/my-vue-app/node_modules/eslint/lib/cli-engine/cli-engine.js:991:18)
      at ESLint.isPathIgnored (/Users/marco/Documents/my-vue-app/node_modules/eslint/lib/eslint/eslint.js:678:26)
      at TransformContext.transform (/Users/marco/Documents/my-vue-app/node_modules/vite-plugin-eslint/dist/index.js:112:45)
      at Object.transform (/Users/marco/Documents/my-vue-app/node_modules/vite/dist/node/chunks/dep-88bd5805.js:38911:53)
      at async doTransform (/Users/marco/Documents/my-vue-app/node_modules/vite/dist/node/chunks/dep-88bd5805.js:55866:29)

I am using the vite-plugin-eslint^1.6.0 plugin to integrate eslint.

Link to Minimal Reproducible Example

https://github.com/Marcoru97/vite-eslint-storybook-example

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

Hi, I think this is maybe a bug in vite-plugin-eslint, that it tries to lint virtual files. But, you can prevent it by using an exclude option like:

plugins: [eslintPlugin({
	exclude: [/virtual:/, /node_modules/]
})],

When I try that in your example project, I get other lint warnings, but it completes successfully.

Maybe you can open an issue or PR in that repo with this suggestion.

[IanVS]

@gipoezcan that looks like a completely different issue. It looks like you're trying to import /src/components/demo/my-element.stories.ts, but the leading slash makes it an absolute path. Please open a new issue with your vite config and storybook config, for us to try to help troubleshoot. Thanks.

[gipoezcan]

@IanVS I'm very sorry, I had apparently commented under the wrong issue: storybookjs/storybook#21101 (comment)

[IanVS]

No worries, happy to try to help if you make a new one.

[IanVS]

Oh yep, I was wondering if maybe you were hitting that other issue. I'll try to find some time to work on it, but I don't use windows, so it's a bit tricky to verify.

[gipoezcan]

@IanVS if you need anything from me to verify/reproduce, just mention. Thank you.

[dabernathy89]

This exact issue has started happening to us again (the Vite config fix above worked for a little while). This only happens in Github Actions for some reason.

#27 6.347 [vite-plugin-eslint] No ESLint configuration found in /virtual:/@storybook/builder-vite.
#27 6.347 file: /virtual:/@storybook/builder-vite/vite-app.js
#27 6.369 ERR! /code/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:522
#27 6.369 ERR!             throw new ConfigurationNotFoundError(directoryPath);
#27 6.369 ERR!                   ^
#27 6.369 ERR! 
#27 6.369 ERR! Error: No ESLint configuration found in /virtual:/@storybook/builder-vite.
#27 6.369 ERR!     at CascadingConfigArrayFactory._finalizeConfigArray (/code/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:522:19)
#27 6.369 ERR!     at CascadingConfigArrayFactory.getConfigArrayForFile (/code/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:313:21)
#27 6.370 ERR!     at CLIEngine.isPathIgnored (/code/node_modules/eslint/lib/cli-engine/cli-engine.js:989:18)
#27 6.370 ERR!     at ESLint.isPathIgnored (/code/node_modules/eslint/lib/eslint/eslint.js:678:26)
#27 6.370 ERR!     at Object.transform (/code/node_modules/vite-plugin-eslint/dist/index.js:1:2348)
#27 6.370 ERR!     at file:///code/node_modules/rollup/dist/es/shared/rollup.js:23409:40
#27 6.370 ERR!  /code/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:522
#27 6.370 ERR!             throw new ConfigurationNotFoundError(directoryPath);
#27 6.370 ERR!                   ^
#27 6.370 ERR! 
#27 6.370 ERR! Error: No ESLint configuration found in /virtual:/@storybook/builder-vite.
#27 6.370 ERR!     at CascadingConfigArrayFactory._finalizeConfigArray (/code/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:522:19)
#27 6.370 ERR!     at CascadingConfigArrayFactory.getConfigArrayForFile (/code/node_modules/@eslint/eslintrc/lib/cascading-config-array-factory.js:313:21)
#27 6.370 ERR!     at CLIEngine.isPathIgnored (/code/node_modules/eslint/lib/cli-engine/cli-engine.js:989:18)
#27 6.370 ERR!     at ESLint.isPathIgnored (/code/node_modules/eslint/lib/eslint/eslint.js:678:26)
#27 6.370 ERR!     at Object.transform (/code/node_modules/vite-plugin-eslint/dist/index.js:1:2348)
#27 6.370 ERR!     at file:///code/node_modules/rollup/dist/es/shared/rollup.js:23409:40 {
#27 6.370 ERR!   messageTemplate: 'no-config-found',
#27 6.370 ERR!   messageData: { directoryPath: '/virtual:/@storybook/builder-vite' },
#27 6.370 ERR!   code: 'PLUGIN_ERROR',
#27 6.370 ERR!   plugin: 'vite-plugin-eslint',
#27 6.370 ERR!   hook: 'transform',
#27 6.370 ERR!   id: '/virtual:/@storybook/builder-vite/vite-app.js',
#27 6.370 ERR!   watchFiles: [
#27 6.370 ERR!     '/code/iframe.html',
#27 6.370 ERR!     '/code/package.json',
#27 6.370 ERR!     '/virtual:/@storybook/builder-vite/vite-app.js',
#27 6.370 ERR!     '\x00vite/modulepreload-polyfill'
#27 6.370 ERR!   ]
#27 6.370 ERR! }
#27 6.405 error Command failed with exit code 1.
#27 6.405 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
#27 ERROR: process "/bin/sh -c yarn build-storybook" did not complete successfully: exit code: 1

Our Vite config:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import eslintPlugin from 'vite-plugin-eslint';
import { resolve } from 'path'

export default defineConfig(({ mode }) => {
    return {
        server: {
            port: 3000,
        },
        plugins: [
            vue(),
            eslintPlugin({
                exclude: ['/virtual:/', 'node_modules/**']
            })
        ],
        resolve: {
            alias: {
                '@': resolve(__dirname, 'src'),
                'environment': mode === 'production' ? resolve(__dirname, 'src/environments/environment.prod') : resolve(__dirname, 'src/environments/environment')
            }
        },
    }
});

Running on Node 18.

[woodreamz]

eslintPlugin({
exclude: ['/virtual:/', 'node_modules/**']
})

Same issue for me, using glob fixed the issue for me:

//vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import eslint from 'vite-plugin-eslint';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    eslint({
      exclude: ['/virtual:/**', 'node_modules/**'],
    }),
});

[FernetB]

I have the same issue but is with vite:import-analysis

my main.ts config:

import { loadConfigFromFile, mergeConfig } from "vite";
const path = require("path");

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-addon-mock",
    "storybook-dark-mode",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  features: {
    storyStoreV7: false,
  },

  async viteFinal(config, { configType }) {
    const response = await loadConfigFromFile(
      path.resolve(__dirname, "../vite.config.ts")
    );
    return mergeConfig(config, {
      ...response?.config,
      plugins: [],
    });
  },
};

vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";
import { resolve } from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
  resolve: {
    alias: [
      {
        find: "theme/utils.scss",
        replacement: `${resolve(__dirname)}/src/theme/utils.scss`,
      },
    ],
  },
  build: {
    outDir: "build",
  },
});

[laurentthiebaudezm]

Also had to exclude /sb-preview to make the warning disappear

plugins: [
      react(),
      eslint({
        emitWarning: true,
        exclude: [/virtual:/, /node_modules/, /sb-preview/],
     ...