jdf2e
按需引入报错
NutUI 包名
@nutui/nutui-taro
NutUI 版本号
4.3.13
平台
tt
重现链接
https://github.com/enjoy-myLife/taro-feishu-demo
重现步骤
// config/index.ts import { defineConfig, type UserConfigExport } from "@tarojs/cli"; import path from "path"; import Components from "unplugin-vue-components/vite"; import NutUIResolver from "@nutui/auto-import-resolver";
import devConfig from "./dev"; import prodConfig from "./prod";
// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig<"vite">(async (merge, { command, mode }) => {
const baseConfig: UserConfigExport<"vite"> = {
projectName: "food",
date: "2024-11-27",
designWidth(input) {
// 配置 NutUI 375 尺寸
if (input?.file?.replace(/\+/g, "/").indexOf("@nutui") > -1) {
return 375;
}
// 全局使用 Taro 默认的 750 尺寸
return 750;
},
deviceRatio: {
640: 2.34 / 2,
750: 1,
828: 1.81 / 2,
375: 2 / 1,
},
sass: {
resource: [path.resolve(dirname, "../src/styles/custom_theme.scss")],
data: @import "@nutui/nutui-taro/dist/styles/variables.scss";,
},
sourceRoot: "src",
outputRoot: "dist",
plugins: ["@tarojs/plugin-html", "@tarojs/plugin-platform-lark"],
alias: {
"@": path.resolve(dirname, "../src"),
},
defineConstants: {
TARO_APP_BASE_URL: JSON.stringify(process.env.TARO_APP_BASE_URL), // 这里需要JSON.stringify 序列化一次，否则会报错
},
copy: {
patterns: [],
options: {},
},
framework: "vue3",
compiler: {
type: "vite",
vitePlugins: [
// 开启 unplugin 插件，自动按需引入 NutUI 组件
Components({
resolvers: [
NutUIResolver({
taro: true,
autoImport: true,
importStyle: false,
}),
],
}),
],
},
mini: {
postcss: {
pxtransform: {
enable: true,
config: {},
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: "module", // 转换模式，取值为 global/module
generateScopedName: "[name][local]_[hash:base64:5]",
},
},
},
},
h5: {
publicPath: "/",
staticDirectory: "static",
miniCssExtractPluginOption: {
ignoreOrder: true,
filename: "css/[name].[hash].css",
chunkFilename: "css/[name].[chunkhash].css",
},
postcss: {
autoprefixer: {
enable: true,
config: {},
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: "module", // 转换模式，取值为 global/module
generateScopedName: "[name]__[local]___[hash:base64:5]",
},
},
},
},
rn: {
appName: "taroDemo",
postcss: {
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
},
},
},
}; if (process.env.NODE_ENV === "development") { // 本地开发构建配置（不混淆压缩） return merge({}, baseConfig, devConfig); } // 生产构建配置（默认开启压缩混淆等） return merge({}, baseConfig, prodConfig); });
// app.ts import { createApp } from "vue"; // 国际化 import i18n from "@/lang/i18n"; import { local } from "@/lang"; import "./app.scss";
const App = createApp({ onShow(options) { // console.log('i18n',i18n) }, onLaunch(options) { // initI18n(); }, // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖 }); App.use(i18n, local);
export default App;
期望的结果是什么？
按需加载正常
实际的结果是什么？
无法按需加载，甚至在app.ts里直接引用都会报错taro.defineComponent is not a function
环境信息
Taro CLI 4.0.7 environment info:
System:
OS: Windows 10 10.0.19045
Binaries:
Node: 20.16.0 - E:\tools\nodejs\node.EXE
Yarn: 1.22.22 - E:\tools\nodejs\node_global\yarn.CMD
npm: 10.8.1 - E:\tools\nodejs\npm.CMD
npmPackages:
@tarojs/cli: 4.0.7 => 4.0.7
@tarojs/components: 4.0.7 => 4.0.7
@tarojs/helper: 4.0.7 => 4.0.7
@tarojs/plugin-framework-vue3: 4.0.7 => 4.0.7
@tarojs/plugin-html: 4.0.7 => 4.0.7
@tarojs/plugin-platform-alipay: 4.0.7 => 4.0.7
@tarojs/plugin-platform-h5: 4.0.7 => 4.0.7
@tarojs/plugin-platform-harmony-hybrid: 4.0.7 => 4.0.7
@tarojs/plugin-platform-jd: 4.0.7 => 4.0.7
@tarojs/plugin-platform-qq: 4.0.7 => 4.0.7
@tarojs/plugin-platform-swan: 4.0.7 => 4.0.7
@tarojs/plugin-platform-tt: 4.0.7 => 4.0.7
@tarojs/plugin-platform-weapp: 4.0.7 => 4.0.7
@tarojs/runtime: 4.0.7 => 4.0.7
@tarojs/shared: 4.0.7 => 4.0.7
@tarojs/taro: 4.0.7 => 4.0.7
@tarojs/vite-runner: 4.0.7 => 4.0.7
babel-preset-taro: 4.0.7 => 4.0.7
eslint-config-taro: 4.0.7 => 4.0.7
taro-ui: 3.3.0 => 3.3.0
其他补充信息
No response
已经确认了，是现在的自动引入对于vite的兼容性不够，我按照官网的操作：
- yarn global add @tarojs/cli
- taro init myApp
只是这一步改成vite
然后运行起来就报错
请问有解决方案了吗，我也遇到了一样的问题，发现就是使用vite 接入 unplugin-vue-components 自定引入nutui 就会有这个问题。这是我的package.json和配置
{
"name": "@yunwo/miniprogram",
"version": "1.0.0",
"private": true,
"description": "",
"templateInfo": {
"name": "default",
"typescript": true,
"css": "sass"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:jd": "taro build --type jd",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch",
"test": "jest"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"dependencies": {
"@babel/runtime": "^7.21.5",
"@nutui/icons-vue-taro": "^0.0.9",
"@nutui/nutui-taro": "^4.3.13",
"@tarojs/components": "4.0.8",
"@tarojs/helper": "4.0.8",
"@tarojs/plugin-platform-weapp": "4.0.8",
"@tarojs/plugin-platform-alipay": "4.0.8",
"@tarojs/plugin-platform-tt": "4.0.8",
"@tarojs/plugin-platform-swan": "4.0.8",
"@tarojs/plugin-platform-jd": "4.0.8",
"@tarojs/plugin-platform-qq": "4.0.8",
"@tarojs/plugin-platform-h5": "4.0.8",
"@tarojs/runtime": "4.0.8",
"@tarojs/shared": "4.0.8",
"@tarojs/taro": "4.0.8",
"@tarojs/plugin-framework-vue3": "4.0.8",
"@yw/constants": "workspace:^",
"@yw/request": "workspace:^",
"@yw/stores": "workspace:^",
"@yw/utils": "workspace:^",
"async-validator": "^4.2.5",
"big.js": "^6.2.1",
"date-fns": "^3.0.6",
"pinia": "^2.3.0",
"pinia-plugin-persistedstate": "^3.2.3",
"vue": "^3.5.13"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/core": "^7.8.0",
"@nutui/auto-import-resolver": "^1.0.0",
"@tarojs/cli": "4.0.8",
"@tarojs/vite-runner": "4.0.8",
"babel-preset-taro": "4.0.8",
"eslint-config-taro": "4.0.8",
"@types/jest": "^29.3.1",
"@types/node": "^18.15.11",
"@types/webpack-env": "^1.13.6",
"@vitejs/plugin-vue": "^4.4.0",
"@vue/compiler-sfc": "^3.5.13",
"css-loader": "3.4.2",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.5.0",
"postcss": "^8.4.18",
"style-loader": "1.3.0",
"stylelint": "^14.4.0",
"ts-node": "^10.9.1",
"tsconfig-paths-webpack-plugin": "^4.0.1",
"typescript": "^5.1.0",
"unplugin-auto-import": "^0.16.7",
"unplugin-vue-components": "^0.25.2",
"vite": "^4.4.11",
"webpack": "5.78.0"
}
}
import NutUIResolver from '@nutui/auto-import-resolver'
import { defineConfig, type UserConfigExport } from '@tarojs/cli'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import ComponentsPlugin from 'unplugin-vue-components/vite'
import devConfig from './dev'
import prodConfig from './prod'
export default defineConfig<'vite'>(async (merge, { command, mode }) => {
const baseConfig: UserConfigExport<'vite'> = {
projectName: 'taro-demo',
date: '2024-12-11',
designWidth: 750,
deviceRatio: {
640: 2.34 / 2,
750: 1,
375: 2,
828: 1.81 / 2,
},
sourceRoot: 'src',
outputRoot: `dist/${process.env.TARO_ENV}`,
plugins: [],
defineConstants: {},
copy: {
patterns: [],
options: {},
},
framework: 'vue3',
compiler: {
type: 'vite',
vitePlugins: [
AutoImport({
include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
imports: [
'vue',
{
'@yw/constants': [
'COMMON_DICT',
'getOptions',
'getOption',
'getOptionsDefault',
'getOptionLabel',
],
},
{
'@yw/stores/user': ['useUserStore'],
},
{ '@yw/utils/format': ['dateTimeFormatter', 'datePickerFormat'] },
],
dirs: ['src/stores', 'src/components/**', 'src/utils', 'src/composables'],
vueTemplate: true,
}),
ComponentsPlugin({
resolvers: [NutUIResolver({ taro: true })],
dts: 'auto-components.d.ts',
}),
],
},
alias: {
'@': path.resolve(__dirname, '..', 'src'),
},
mini: {
postcss: {
pxtransform: {
enable: true,
config: {},
},
cssModules: {
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
},
},
h5: {
publicPath: '/',
staticDirectory: 'static',
router: {
mode: 'browser',
},
miniCssExtractPluginOption: {
ignoreOrder: true,
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[name].[chunkhash].css',
},
postcss: {
autoprefixer: {
enable: true,
config: {},
},
cssModules: {
enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]',
},
},
},
},
rn: {
appName: 'taroDemo',
postcss: {
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
},
},
},
}
if (process.env.NODE_ENV === 'development') {
// 本地开发构建配置（不混淆压缩）
return merge({}, baseConfig, devConfig)
}
// 生产构建配置（默认开启压缩混淆等）
return merge({}, baseConfig, prodConfig)
})
Taro4和vite的兼容性不太好，我把配置不变，换成taro3就好了，当然部分vite配置换成webpack的就好了。早换吧，要不然后面再遇到坑你就尾大不掉了
---原始邮件--- 发件人: @.> 发送时间: 2024年12月11日(周三) 晚上10:59 收件人: @.>; 抄送: @.@.>; 主题: Re: [jdf2e/nutui] 按需引入报错 (Issue #3230)
请问有解决方案了吗，我也遇到了一样的问题，发现就是使用vite 接入 unplugin-vue-components 自定引入nutui 就会有这个问题。这是我的package.json和配置
{ "name": @./miniprogram", "version": "1.0.0", "private": true, "description": "", "templateInfo": { "name": "default", "typescript": true, "css": "sass" }, "scripts": { "build:weapp": "taro build --type weapp", "build:swan": "taro build --type swan", "build:alipay": "taro build --type alipay", "build:tt": "taro build --type tt", "build:h5": "taro build --type h5", "build:rn": "taro build --type rn", "build:qq": "taro build --type qq", "build:jd": "taro build --type jd", "build:quickapp": "taro build --type quickapp", "dev:weapp": "npm run build:weapp -- --watch", "dev:swan": "npm run build:swan -- --watch", "dev:alipay": "npm run build:alipay -- --watch", "dev:tt": "npm run build:tt -- --watch", "dev:h5": "npm run build:h5 -- --watch", "dev:rn": "npm run build:rn -- --watch", "dev:qq": "npm run build:qq -- --watch", "dev:jd": "npm run build:jd -- --watch", "dev:quickapp": "npm run build:quickapp -- --watch", "test": "jest" }, "browserslist": [ "last 3 versions", "Android >= 4.1", "ios >= 8" ], "author": "", "dependencies": { @./runtime": "^7.21.5", @./icons-vue-taro": "^0.0.9", @./nutui-taro": "^4.3.13", @./components": "4.0.8", @./helper": "4.0.8", @./plugin-platform-weapp": "4.0.8", @./plugin-platform-alipay": "4.0.8", @./plugin-platform-tt": "4.0.8", @./plugin-platform-swan": "4.0.8", @./plugin-platform-jd": "4.0.8", @./plugin-platform-qq": "4.0.8", @./plugin-platform-h5": "4.0.8", @./runtime": "4.0.8", @./shared": "4.0.8", @./taro": "4.0.8", @./plugin-framework-vue3": "4.0.8", @./constants": "workspace:^", @./request": "workspace:^", @./stores": "workspace:^", @./utils": "workspace:^", "async-validator": "^4.2.5", "big.js": "^6.2.1", "date-fns": "^3.0.6", "pinia": "^2.3.0", "pinia-plugin-persistedstate": "^3.2.3", "vue": "^3.5.13" }, "devDependencies": { @./plugin-proposal-class-properties": "7.14.5", @./core": "^7.8.0", @./auto-import-resolver": "^1.0.0", @./cli": "4.0.8", @./vite-runner": "4.0.8", "babel-preset-taro": "4.0.8", "eslint-config-taro": "4.0.8", @./jest": "^29.3.1", @./node": "^18.15.11", @./webpack-env": "^1.13.6", @./plugin-vue": "^4.4.0", @./compiler-sfc": "^3.5.13", "css-loader": "3.4.2", "jest": "^29.3.1", "jest-environment-jsdom": "^29.5.0", "postcss": "^8.4.18", "style-loader": "1.3.0", "stylelint": "^14.4.0", "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "^4.0.1", "typescript": "^5.1.0", "unplugin-auto-import": "^0.16.7", "unplugin-vue-components": "^0.25.2", "vite": "^4.4.11", "webpack": "5.78.0" } }
import NutUIResolver from @./auto-import-resolver' import { defineConfig, type UserConfigExport } from @./cli' import path from 'path' import AutoImport from 'unplugin-auto-import/vite' import ComponentsPlugin from 'unplugin-vue-components/vite' import devConfig from './dev' import prodConfig from './prod' export default defineConfig<'vite'>(async (merge, { command, mode }) => { const baseConfig: UserConfigExport<'vite'> = { projectName: 'taro-demo', date: '2024-12-11', designWidth: 750, deviceRatio: { 640: 2.34 / 2, 750: 1, 375: 2, 828: 1.81 / 2, }, sourceRoot: 'src', outputRoot: dist/${process.env.TARO_ENV}, plugins: [], defineConstants: {}, copy: { patterns: [], options: {}, }, framework: 'vue3', compiler: { type: 'vite', vitePlugins: [ AutoImport({ include: [/.[tj]sx?$/, /.vue$/, /.vue?vue/], imports: [ 'vue', { @./constants': [ 'COMMON_DICT', 'getOptions', 'getOption', 'getOptionsDefault', 'getOptionLabel', ], }, { @./stores/user': ['useUserStore'], }, { @./utils/format': ['dateTimeFormatter', 'datePickerFormat'] }, ], dirs: ['src/stores', 'src/components/**', 'src/utils', 'src/composables'], vueTemplate: true, }), ComponentsPlugin({ resolvers: [NutUIResolver({ taro: true })], dts: 'auto-components.d.ts', }), ], }, alias: { '@': path.resolve(dirname, '..', 'src'), }, mini: { postcss: { pxtransform: { enable: true, config: {}, }, cssModules: { enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: 'module', // 转换模式，取值为 global/module generateScopedName: '[name][local][hash:base64:5]', }, }, }, }, h5: { publicPath: '/', staticDirectory: 'static', router: { mode: 'browser', }, miniCssExtractPluginOption: { ignoreOrder: true, filename: 'css/[name].[hash].css', chunkFilename: 'css/[name].[chunkhash].css', }, postcss: { autoprefixer: { enable: true, config: {}, }, cssModules: { enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true config: { namingPattern: 'module', // 转换模式，取值为 global/module generateScopedName: '[name][local]__[hash:base64:5]', }, }, }, }, rn: { appName: 'taroDemo', postcss: { cssModules: { enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true }, }, }, } if (process.env.NODE_ENV === 'development') { // 本地开发构建配置（不混淆压缩） return merge({}, baseConfig, devConfig) } // 生产构建配置（默认开启压缩混淆等） return merge({}, baseConfig, prodConfig) })
— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: @.***>
Taro4和vite的兼容性不太好，我把配置不变，换成taro3就好了，当然部分vite配置换成webpack的就好了。早换吧，要不然后面再遇到坑你就尾大不掉了 …
确实是兼容性存在问题，我用4.0.9（vite 4.x）的官方模板，h5模式是正常的，导入微信开发者工具就发现样式丢失了😂，换成 webpack5 就正常
Taro4和vite的兼容性不太好，我把配置不变，换成taro3就好了，当然部分vite配置换成webpack的就好了。早换吧，要不然后面再遇到坑你就尾大不掉了 …
确实是兼容性存在问题，我用4.0.9（vite 4.x）的官方模板，h5模式是正常的，导入微信开发者工具就发现样式丢失了😂，换成 webpack5 就正常
@0604hx 后面怎么解决的？我也遇到一样的问题了，感觉框架没人维护了
