Taro 环境信息

Taro CLI 3.6.11 environment info:
    System:
      OS: macOS 13.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 16.20.1 - ~/.nvm/versions/node/v16.20.1/bin/node
      npm: 8.19.4 - ~/.nvm/versions/node/v16.20.1/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.11 => 3.6.11
      @tarojs/components: 3.6.11 => 3.6.11
      @tarojs/mini-runner: 3.6.11 => 3.6.11
      @tarojs/plugin-framework-react: 3.6.11 => 3.6.11
      @tarojs/plugin-platform-weapp: 3.6.11 => 3.6.11
      @tarojs/react: 3.6.11 => 3.6.11
      @tarojs/runtime: 3.6.11 => 3.6.11
      @tarojs/taro: 3.6.11 => 3.6.11
      @tarojs/webpack-runner: 3.6.11 => 3.6.11
      babel-preset-taro: 3.6.11 => 3.6.11
      eslint-config-taro: 3.6.11 => 3.6.11
      react: ^17.0.0 => 17.0.2

问题一、 开启cssModules选项导致编译后的代码，小程序无法识别。

先上错误图：

错误原因

config/index.js配置文件中我们将cssModules.enable 开启。运行项目之后，打开小程序编辑器会发现控制台提示编译错误，微信小程序无法识别“\”，“+”等字符串，如下图所示。出现这种情况的原因是因为在默认配置文件中generateScopedName: '[name]__[local]___[hash:base64:5]'选项中配置了base64,将base64去掉以后，这个问题就会消失。

下面是配置文件信息

const config = {
  ...
  // 小程序端专用配置
  mini: {
    postcss: {
      autoprefixer: {
        enable: true,
      },
      // 小程序端样式引用本地资源内联配置
      url: {
        enable: true,
        config: {
          limit: 10240,
        },
      },
      cssModules: {
          //此处我们开启css modules功能，将enable设置为true
        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          //将[name]__[local]___[hash:base64:5]修改为[name]__[local]___[hash:5],去除base64
          generateScopedName: '[name]__[local]___[hash:5]',
        },
      },
    },
    // 自定义 Webpack 配置
    webpackChain(chain, webpack) {},
  },
  ...

问题二、 TypeError: Cannot read property 'initNativeApi' of undefined

错误原因

@tarojs/plugin-inject版本太低, 根据@tarojs/plugin-inject文档中的版本要求:

Taro 3.3+
请使用本插件的 `1.0` 或以上版本
Taro 3.1/3.2
请使用本插件的 `0.0.2` 或以上版本

解决方法也很简单，执行以下命令更新插件版本，重新启动项目报错就会消失。

这里安装的是3.6.11版本。

npm i @tarojs/plugin-inject@3.6.11