wheatjs / vite-plugin-vue-type-imports

Import types in Vue SFC for defineProps
223 stars 16 forks source link

[vite] Internal server error: ENOTDIR: not a directory #49

Open tjx666 opened 1 year ago

tjx666 commented 1 year ago
10:48:09 PM [vite] Internal server error: ENOTDIR: not a directory, lstat '/Users/yutengjing/code/monorepoRoot/apps/xxx/node_modules/@xxx/ui/dist/ui.mjs/index.ts'
  Plugin: vite-plugin-vue-type-imports
  File: /Users/yutengjing/code/monorepoRoot/packages/xxx-business-ui/src/components/xxx-color-picker/xxx-color-picker.vue

10:48:09 PM [vite] Internal server error: ENOTDIR: not a directory, lstat '/Users/yutengjing/code/monorepoRoot/apps/xxx/node_modules/@xxx/ui/dist/ui.mjs/index.ts'
  Plugin: vite-plugin-vue-type-imports
  File: /Users/yutengjing/code/monorepoRoot/packages/xxx-business-ui/src/components/xxx-color-picker/xxx-color-popup.vue

10:48:09 PM [vite] Internal server error: ENOTDIR: not a directory, lstat '/Users/yutengjing/code/monorepoRoot/apps/xxx/node_modules/@xxx/ui/dist/ui.mjs/index.ts'
  Plugin: vite-plugin-vue-type-imports
  File: /Users/yutengjing/code/monorepoRoot/packages/xxx-business-ui/src/components/xxx-color-picker/xxx-panel-color-row.vue

file: /Users/yutengjing/code/monorepoRoot/packages/xxx-business-ui/src/components/xxx-color-picker/xxx-color-picker.vue

<script lang="ts" setup>
import { ColorPicker } from '@xxx/ui';
import { storeToRefs } from 'pinia';
</script>

package json of @xxx/ui:

{
    "name": "@xxx/ui",
    "license": "UNLICENSED",
    "version": "0.0.0",
    "files": [
        "dist",
        "src"
    ],
    "exports": {
        ".": {
            "import": {
                "development": "./src",
                "default": "./dist/ui.mjs"
            },
            "require": {
                "development": "./src",
                "default": "./dist/ui.js"
            }
        }
    },
    "typesVersions": {
        "*": {
            "*": [
                "./src/*"
            ]
        }
    },
    "publishConfig": {
        "access": "public",
        "registry": "xxx",
        "exports": {
            ".": {
                "import": "./dist/ui.mjs",
                "require": "./dist/ui.js"
            }
        }
    }
}

vite config:

import path from 'node:path';

import rollupPluginNodeResolve from '@rollup/plugin-node-resolve';
import vitePluginVue2 from '@vitejs/plugin-vue2';
import vitePluginVue2Jsx from '@vitejs/plugin-vue2-jsx';
import vitePluginImp from '@yutengjing/vite-plugin-imp';
import type { UserConfig } from 'vite';
import vitePluginHttp2Proxy from 'vite-plugin-http2-proxy';
import vitePluginMakeCertificate from 'vite-plugin-mkcert';
// defineProps支持使用导入类型
import vitePluginVueTypeImports from 'vite-plugin-vue-type-imports';

const resolveNodeModules = (...pathSegments: string[]) => {
    return path.resolve(__dirname, 'node_modules', ...pathSegments);
};

export default async function defineCommonConfig(
    mode: string,
    env: Record<string, string>,
): Promise<UserConfig> {
    const publicPath = [process.env.CDN_URL ?? '', process.env.CDN_PREFIX ?? ''].join('/');
    return {
        base: publicPath,
        server: {
            https: true,
            port: 3000,
        },
        plugins: [
            vitePluginMakeCertificate({ hosts: ['localhost'] }),
            vitePluginHttp2Proxy({
                '/api/': {
                    target: 'xxx',
                },
            }),
            rollupPluginNodeResolve({
                extensions: ['.js', '.ts', '.mjs', '.tsx', '.json', '.vue'],
            }),
            vitePluginVue2(),
            vitePluginVue2Jsx(),
            vitePluginImp({
                libList: [
                    {
                        libName: 'lodash',
                        libDirectory: '',
                        camel2DashComponentName: false,
                    },
                ],
            }),
            vitePluginVueTypeImports(),
        ],
        // !!!
        resolve: {
            alias: [
                {
                    find: /^@xxx\/ui/,
                    replacement: resolveNodeModules('@xxx/ui/dist/ui.mjs'),
                },
            ],
        },
    };
}

I find if I remove the alias, this plugin will not throw error:

 resolve: {
    alias: [
        {
            find: /^@xxx\/ui/,
            replacement: resolveNodeModules('@xxx/ui/dist/ui.mjs'),
        },
    ],
}

Versions:

System:
    OS: macOS 13.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Memory: 1.24 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/Library/Caches/fnm_multishells/97332_1673620127046/bin/node
    Pnpm: 7.24.3 - /Users/yutengjing/Library/Caches/fnm_multishells/97332_1673620127046/bin/pnpm
  npmPackages:
    @vitejs/plugin-legacy: ^3.0.1 => 3.0.1 
    @vitejs/plugin-vue2: ^2.2.0 => 2.2.0 
    @vitejs/plugin-vue2-jsx: ^1.1.0 => 1.1.0 
    vite: ^4.0.4 => 4.0.4 
    vite-plugin-http2-proxy: ^0.3.2 => 0.3.2 
    vite-plugin-mkcert: ^1.10.1 => 1.10.1 
    vite-plugin-vue-inspector: ^3.0.2 => 3.0.3 
    vite-plugin-vue-type-imports: ^0.2.4 => 0.2.4
Zolyn commented 1 year ago

Try unplugin-vue-macros instead

tjx666 commented 1 year ago

@Zolyn https://github.com/sxzz/unplugin-vue-macros/issues/209