webpack5 开启持久化缓存小程序原生组件接收不到 props

qq31311137 commented 1 year ago

复现步骤

使用的是 https://github.com/ecomfe/echarts-for-weixin 这个微信小程序原生组件

页面逻辑：

import { memo } from 'react'
import { View } from '@tarojs/components'

definePageConfig({
  usingComponents: {
    'ec-canvas': '../../components/ec-canvas/ec-canvas',
  },
})

const Test = memo(() => {
  const initChart = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr,
    })

    canvas.setChart(chart)
    return chart
  }
  return (
    <View style={{ height: '600rpx' }}>
      <ec-canvas
        id="mychart-dom-pie"
        canvas-id="mychart-pie"
        ec={{ onInit: initChart }}
      />
    </View>
  )
})

export default Test

taro 的配置：

const path = require('path')

const config = {
  date: '2022-11-28',
  designWidth: 750,
  deviceRatio: {
    640: 2.34 / 2,
    750: 1,
    828: 1.81 / 2,
  },
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [
    [
      'taro-plugin-tailwind',
      {
        scan: {
          dirs: ['./src'],
          exclude: [
            'dist/**/*',
            './src/packages/itinerary/components/ec-canvas/**/*',
          ],
        },
      },
    ],
  ],
  defineConstants: {},
  copy: {
    patterns: [],
    options: {},
  },
  framework: 'react',
  compiler: {
    type: 'webpack5',
    prebundle: {
      enable: false,
    },
  },
  cache: {
    enable: true, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
  },
  mini: {
    postcss: {
      pxtransform: {
        enable: true,
        config: {},
      },
      url: {
        enable: true,
        config: {
          limit: 10240, // 设定转换尺寸上限
        },
      },
      cssModules: {
        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
        config: {
          namingPattern: 'module', // 转换模式，取值为 global/module
          generateScopedName: '[name]__[local]___[hash:base64:5]',
        },
      },
    },
  },
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

期望结果

跟关闭持久化缓存的结果一样，关闭了持久化缓存就不会有这个问题

实际结果

ec-canvas 接收不到传递的 props，错误信息：

组件需绑定 ec 变量，例：

<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

环境信息

  Taro CLI 3.5.10 environment info:   
    System:
      OS: Windows 10
    Binaries:
      Node: 18.12.1 - D:\node\node.EXE
      npm: 8.19.2 - D:\node\npm.CMD