uni-app-vite-vue3-tailwind-vscode-template icon indicating copy to clipboard operation
uni-app-vite-vue3-tailwind-vscode-template copied to clipboard

运行报错

Open srarlight opened this issue 7 months ago • 1 comments
trafficstars

starlight@starlightdePro uni-app-vite-vue3-tailwind-vscode-template % pnpm run dev:h5

[email protected] dev:h5 /Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template uni

请注意运行模式下,因日志输出、sourcemap 以及未压缩源码等原因,性能和包体积,均不及发行模式。 vite是按需编译,运行时点击某个未编译页面会先编译后加载,导致显示较慢,发行后无此问题。 编译器版本:4.57(vue3) 正在编译中... failed to load config from /Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/vite.config.ts error when starting dev server: Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/pkg-types/dist/index.mjs not supported. Instead change the require of /Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/pkg-types/dist/index.mjs to a dynamic import() which is available in all CommonJS modules. at Object. (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/unimport/dist/shared/unimport.DUUBMfEV.cjs:14:18) at require.extensions. [as .js] (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68696:17) at Object. (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/unimport/dist/index.cjs:3:17) at require.extensions. [as .js] (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68696:17) at Object. (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-6BSQ6ZKC.cjs:2:17) at require.extensions. [as .js] (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68696:17) at Object. (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/chunk-W4BJKNF7.cjs:3:25) at require.extensions. [as .js] (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68696:17) at Object. (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]/node_modules/unplugin-auto-import/dist/vite.cjs:3:25) at require.extensions. [as .js] (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68696:17) at Object. (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/vite.config.ts:37:27) at require.extensions. [as .js] (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68693:24) at loadConfigFromBundledFile (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68701:21) at async loadConfigFromFile (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68528:28) at async resolveConfig (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:68138:28) at async createServer (file:///Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/[email protected]@[email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:64655:20) at async createServer (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_b15902a1d3e4e8bf0fde61f741e3d5d6/node_modules/@dcloudio/vite-plugin-uni/dist/cli/server.js:43:20) at async CAC.runDev (/Users/starlight/Documents/uni-app-vite-vue3-tailwind-vscode-template/node_modules/.pnpm/@[email protected][email protected][email protected][email protected]_b15902a1d3e4e8bf0fde61f741e3d5d6/node_modules/@dcloudio/vite-plugin-uni/dist/cli/action.js:58:28)  ELIFECYCLE  Command failed with exit code 1.

srarlight avatar Apr 10 '25 14:04 srarlight

搞定了。题出在 unplugin-auto-import 插件的使用上。 ES 模块与 CommonJS 模块之间的兼容性问题

export default defineConfig(async () => {
  // 动态导入 AutoImport
  const { default: AutoImport } = await import('unplugin-auto-import/vite')
  
  return {
    // uvtw 一定要放在 uni 后面
    plugins: [
      uni(),
      UnifiedViteWeappTailwindcssPlugin({
        rem2rpx: true,
        disabled: WeappTailwindcssDisabled,
      }),
      AutoImport({
        imports: ['vue', 'uni-app', 'pinia'],
        dts: './src/auto-imports.d.ts',
        eslintrc: {
          enabled: true,
        },
      }),
    ],
    // 内联 postcss 注册 tailwindcss
    css: {
      postcss: {
        plugins: postcssPlugins,
      },
      // https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
      preprocessorOptions: {
        scss: {
          silenceDeprecations: ['legacy-js-api'],
        },
      },
    },
  }
})

srarlight avatar Apr 10 '25 14:04 srarlight

同样遇到问题,初始化工程就报错。

yasz avatar Aug 18 '25 01:08 yasz

由于 unplugin-auto-import 新版本,改成了 esm 格式,低版本的 Nodejs 不支持混合加载,导致的报错

解决方案:

  1. vite.config.ts 中的 defineConfig 改成异步导入
const { default: AutoImport } = await import('unplugin-auto-import/vite')
  1. 升级你的 Nodejs 版本到 22+

sonofmagic avatar Aug 18 '25 01:08 sonofmagic

@yasz 你可以使用LTS 版本的 NodeJs@22 这个版本是 cjs/esm 相互加载兼容的

sonofmagic avatar Aug 18 '25 01:08 sonofmagic

新的版本已经更改为 import 异步导入,此问题 close

sonofmagic avatar Sep 25 '25 08:09 sonofmagic