config/index 无法引入 esm 模块（[email protected] 无法编译）

[NKnife]

相关平台

H5

浏览器版本: Chrome 版本 123.0.6312.107（正式版本） (arm64)
使用框架: React

复现步骤

// config/index.ts
import UnoCSS from '@unocss/webpack'

// ...
      webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin)
        chain.plugin('unocss').use(UnoCSS())
      }
// ...

期望结果

正常编译

实际结果

👽 Taro v3.6.20

/app/node_modules/@unocss/webpack/dist/index.mjs:1
import process$1 from 'node:process';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader [as .mjs] (/app/node_modules/pirates/lib/index.js:121:7)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> 
找不到项目配置文件config/index，请确定当前目录是 Taro 项目根目录!

环境信息

👽 Taro v3.6.20


  Taro CLI 3.6.20 environment info:
    System:
      OS: Linux 6.5 Alpine Linux
      Shell: 1.36.1 - /bin/ash
    Binaries:
      Node: 20.11.1 - /tmp/yarn--1712737160173-0.7841347378422729/node
      Yarn: 1.22.19 - /tmp/yarn--1712737160173-0.7841347378422729/yarn
      npm: 10.2.4 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.20 => 3.6.20 
      @tarojs/components: 3.6.20 => 3.6.20 
      @tarojs/helper: 3.6.20 => 3.6.20 
      @tarojs/plugin-framework-react: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-alipay: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-h5: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-jd: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-qq: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-swan: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-tt: 3.6.20 => 3.6.20 
      @tarojs/plugin-platform-weapp: 3.6.20 => 3.6.20 
      @tarojs/react: 3.6.20 => 3.6.20 
      @tarojs/runtime: 3.6.20 => 3.6.20 
      @tarojs/shared: 3.6.20 => 3.6.20 
      @tarojs/taro: 3.6.20 => 3.6.20 
      @tarojs/taro-loader: 3.6.20 => 3.6.20 
      @tarojs/webpack5-runner: 3.6.20 => 3.6.20 
      babel-preset-taro: 3.6.20 => 3.6.20 
      eslint-config-taro: 3.6.20 => 3.6.20 

---

补充信息

UnoCSS v0.59.0 只有 ESM 模式

[ModyQyW]

尝试 weapp 也会有类似的问题，应该是 taro 内部解析配置文件不支持导致的，还没有细看源码

[jsyanyang]

遇到同样的问题，大佬们有解决方案吗，"unocss": "^0.59.4",Taro v3.6.28

[hejinpingQAQ]

遇到同样的问题，大佬们有解决方案吗，"unocss": "^0.59.4",Taro v3.6.28

降版本，0.58.9及以下可以

[cloydlau]

👽 Taro v4.0.0-beta.67

/node_modules/.pnpm/[email protected][email protected][email protected][email protected]_@[email protected][email protected]_sass@/node_modules/unocss/dist/vite.mjs:1
import VitePlugin__default from '@unocss/vite';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Taro@4 也不行...

[anyesu]

简单试了一下，用 createSwcRegister 转换 Pure ESM 包（ @unocss/* ）可以跑起来：

内部用到 @swc/register ，在 require 的时候转换对应的代码。

import { defineConfig } from '@tarojs/cli'
import { createSwcRegister, getModuleDefaultExport } from '@tarojs/helper'

export default defineConfig(async () => {
  createSwcRegister({
    only: [(filePath: string) => filePath.includes('@unocss')]
  })
  // require() 或者 import() 都行
  const UnoCSS = getModuleDefaultExport(await import('@unocss/webpack'))
  return {
    projectName: 'taro-unocss',
    deviceRatio: {},
    sourceRoot: 'src',
    outputRoot: 'dist',
    framework: 'vue3',
    compiler: {
      type: 'webpack5',
      prebundle: {
        enable: false
      }
    },
    h5: {
      webpackChain(chain) {
        chain.plugin('unocss').use(UnoCSS())
      }
    }
  }
})

参考：

taro/packages/taro-service/src/Config.ts

Lines 54 to 62 in 80a6d56

	createSwcRegister({
	only: [
	filePath => filePath.indexOf(path.join(this.appPath, CONFIG_DIR_NAME)) >= 0
	]
	})
	try {
	const userExport = getModuleDefaultExport(require(this.configPath))
	this.initialConfig = typeof userExport === 'function' ? await userExport(merge, configEnv) : userExport
	this.isInitSuccess = true

类似的方法还有 readConfig ，不过编译阶段没跑通。

taro/packages/taro-helper/src/utils.ts

Lines 656 to 667 in 80a6d56

	export function readConfig<T extends IReadConfigOptions> (configPath: string, options: T = {} as T) {
	let result: any = {}
	if (fs.existsSync(configPath)) {
	if (REG_JSON.test(configPath)) {
	result = fs.readJSONSync(configPath)
	} else {
	result = requireWithEsbuild(configPath, {
	customConfig: {
	define: options.defineConstants || {},
	alias: options.alias || {},
	},
	customSwcConfig: {

[dzhiqin]

降版本，用0.58.0可以

yarn add -D [email protected] @unocss/[email protected] [email protected]

[RanMaoting]

更正: 最新版直接使用 import UnoCSS from 'unocss/webpack'import UnoCSS from 'unocss/webpack'就行