Error importing types with combining with Storybook Build #4
Comments
|
Realized I had implemented my config slightly incorrectly, now getting the following error: |
|
Ohh, yeah I know what's going on. I'll get a fix out by tonight, thanks for reporting this! |
|
That's great to hear! I can't wait! |
|
Sorry for the delay, can you try installing the latest version and see if that works for you @TylerOliver |
|
@wheatjs Hello, I am working with @TylerOliver. When we try to run storybook with the 0.1.2 version of the plugin we get the following error: In case it helps, here is the storybook main.ts: import { resolve } from "path";
import VueTypeImports from "vite-plugin-vue-type-imports";
module.exports = {
"stories": [
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-actions",
"@storybook/addon-links",
"@storybook/addon-essentials"
],
"framework": "@storybook/vue3",
"core": {
"builder": "storybook-builder-vite"
},
async viteFinal(config, { configType }) {
return {
...config,
resolve: {
alias: {
"@": `${resolve(__dirname, "../src")}`,
vue: "vue/dist/vue.esm-bundler.js",
},
},
plugins: [
...config.plugins,
VueTypeImports(),
]
}
}
}Let me know if there is anything else I can provide to help with this. |
|
Can you provide a minimal reproduction for this? |
|
The minimal reproduction is the same with updated package dependencies. I'll push up the package update |
|
On second look it does work in the minimum reproduction, but not in ours. I'll have to investigate further to see what additional dependencies could be causing the issue. |
|
@TylerOliver did you ever get this working? I have the exact same issue as you (using storybook-vite + vue 3) |
|
@spacedawwwg @wheatjs I never figured out what was missing; we ended up abandoning Vue 3 until Vuetify releases fully on Vue 3 |
|
I use this plugin nicely with storybook. const VueJsx = require("@vitejs/plugin-vue-jsx")
const VueTypeImports = require('vite-plugin-vue-type-imports')
module.exports = {
framework: "@storybook/vue3",
...,
viteFinal: async (config) => {
config.plugins.push(VueJsx(), VueTypeImports['default']())
return config;
},
}I bumped into some issue with es6 import, so I turned to use |
|
@mockingjet I followed the same as above, but get this: |
me too , I try the way as above ,I dont get error like your, but still : maybe it is a mistake to use storybook/vite-builder in my project... |
|
If anyone is able to provide a reproduction I can attempt to fix this. Otherwise I can't really do anything |
https://github.com/Nauxscript/unuseless-ui/tree/test
my repo is init by this template https://github.com/antfu/vitesse-lite and add the storybook (vite version) by command: hope it help, thank u ! |
The property node.source will be null unless we use export { xx } from 'xx' syntax.To solve this problem, we need to add a condition to filter. export type MaybeNode = Node | null | undefined;
export type ExportNamedFromDeclaration = ExportNamedDeclaration & { source: StringLiteral };
/**
* get reExported fields
*
* e.g. export { x } from './xxx'
*/
export function getAvailableExportsFromAst(ast: Program) {
const exports: IImport[] = [];
const addExport = (node: ExportNamedFromDeclaration) => {
for (const specifier of node.specifiers) {
if (specifier.type === 'ExportSpecifier' && specifier.exported.type === 'Identifier') {
exports.push({
start: specifier.exported.start!,
end: specifier.local.end!,
imported: specifier.exported.name,
local: specifier.local.name,
path: node.source.value,
});
}
}
};
for (const node of ast.body) {
// TODO: support export * from
if (isExportNamedFromDeclaration(node)) addExport(node);
}
return exports;
}
export function isExportNamedFromDeclaration(node: MaybeNode): node is ExportNamedFromDeclaration {
return !!(node && node.type === 'ExportNamedDeclaration' && node.source);
}The code above is from zolyn/vite-plugin-vue-type-imports , which is one of forks of this project and supports extended interfaces. For a temporary solution, you can use this fork until @wheatjs fixes it. |
|
@Zolyn your fix looks good! Would you mind making a PR so you can be listed as a contributor to the project? |
I'd love to! I will make a PR later. (But now I have to go to sleep. :P) |
|
Sorry, I came late. I don't know the implementation details and also not sure if there are bugs. Share my .storybook/main.js here const path = require("path");
const VueJsx = require("@vitejs/plugin-vue-jsx");
const VueTypeImports = require("vite-plugin-vue-type-imports");
module.exports = {
stories: ["../stories/**/*.stories.*", "../src/**/*.stories.*"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-storysource",
],
framework: "@storybook/vue3",
core: {
builder: "@storybook/builder-vite",
},
viteFinal: async (config) => {
config.plugins.push(VueJsx(), VueTypeImports["default"]());
config.resolve.alias = {
...config.resolve.alias,
"~": path.resolve(__dirname, "../"),
"@": path.resolve(__dirname, "../src"),
};
return config;
},
};And I use "yarn" to install these dependencies |
|
Fixed in v0.2.0 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The plugin does not appear to be functioning when using the ViteFinal overrides from Storybook. See minimal reproduction repo
https://github.com/TylerOliver/vite-plugin-vue-type-imports-reproduction
Important reference files are
.storybook/main.ts
src/components/*
Here's the error in the console:
The text was updated successfully, but these errors were encountered: