Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

按需引入报错 #3230

Open
enjoy-myLife opened this issue Dec 2, 2024 · 3 comments
Open

按需引入报错 #3230

enjoy-myLife opened this issue Dec 2, 2024 · 3 comments

Comments

@enjoy-myLife
Copy link

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
@enjoy-myLife
Copy link
Author

已经确认了，是现在的自动引入对于vite的兼容性不够，我按照官网的操作：

  1. yarn global add @tarojs/cli
  2. taro init myApp

image
只是这一步改成vite

然后运行起来就报错

@zh925
Copy link

zh925 commented Dec 11, 2024

请问有解决方案了吗，我也遇到了一样的问题，发现就是使用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)
})

@enjoy-myLife
Copy link
Author

enjoy-myLife commented Dec 12, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@zh925 @enjoy-myLife