Closed Marcoru97 closed 2 years ago
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.
@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.
@IanVS I'm very sorry, I had apparently commented under the wrong issue: https://github.com/storybookjs/storybook/issues/21101#issuecomment-1448340471
No worries, happy to try to help if you make a new one.
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.
@IanVS if you need anything from me to verify/reproduce, just mention. Thank you.
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.
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/**'],
}),
});
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",
},
});
Also had to exclude /sb-preview
to make the warning disappear
plugins: [
react(),
eslint({
emitWarning: true,
exclude: [/virtual:/, /node_modules/, /sb-preview/],
...
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:
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