build:h5后，html访问异常

[wangchongwei]

相关平台

H5

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

复现步骤

build:h5后，访问html白屏。

期望结果

能正常显示

实际结果

白屏

环境信息

Taro v4.0.5


  Taro CLI 4.0.5 environment info:
    System:
      OS: macOS 14.4.1
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 18.19.0 - /usr/local/opt/node@18/bin/node
      Yarn: 1.22.22 - ~/workspace/npm/lib/node_modules/yarn/bin/yarn
      npm: 10.2.3 - /usr/local/opt/node@18/bin/npm
    npmPackages:
      @tarojs/cli: 4.0.5 => 4.0.5 
      @tarojs/components: 4.0.5 => 4.0.5 
      @tarojs/helper: 4.0.5 => 4.0.5 
      @tarojs/plugin-framework-react: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-alipay: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-h5: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-harmony-hybrid: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-jd: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-qq: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-swan: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-tt: 4.0.5 => 4.0.5 
      @tarojs/plugin-platform-weapp: 4.0.5 => 4.0.5 
      @tarojs/react: 4.0.5 => 4.0.5 
      @tarojs/runtime: 4.0.5 => 4.0.5 
      @tarojs/shared: 4.0.5 => 4.0.5 
      @tarojs/taro: 4.0.5 => 4.0.5 
      @tarojs/taro-loader: 4.0.5 => 4.0.5 
      @tarojs/webpack5-runner: 4.0.5 => 4.0.5 
      babel-preset-taro: 4.0.5 => 4.0.5 
      eslint-config-taro: 4.0.5 => 4.0.5 
      react: ^18.0.0 => 18.3.1 
      taro-ui: ^3.3.0 => 3.3.0 

---

配置文件

/**
 * 项目的配置项入口
 */
import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

import { type UserConfigExport, defineConfig } from '@tarojs/cli';

import devConfig from './dev';
import prodConfig from './prod';

// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig<'webpack5'>(async (merge, {}) => {
  const baseConfig: UserConfigExport<'webpack5'> = {
    projectName: 'xwallet-webapp',
    date: '2024-12-11',
    designWidth: 750,
    deviceRatio: {
      640: 2.34 / 2,
      750: 1,
      375: 2,
      828: 1.81 / 2,
    },
    sourceRoot: 'src',
    outputRoot: 'dist',
    alias: {},
    terser: {
      enable: true,
    },
    esbuild: {
      minify: {
        enable: true,
        config: {
          target: 'es5',
        },
      },
    },
    defineConstants: {
      version: '0.01',
    },
    copy: {
      patterns: [],
      options: {},
    },
    framework: 'react',
    compiler: {
      type: 'webpack5',
      prebundle: {
        exclude: ['taro-ui'],
      },
    },
    cache: {
      enable: false, // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
    },
    mini: {
      optimizeMainPackage: {
        enable: true,
      },
      postcss: {
        pxtransform: {
          enable: true,
          config: {},
        },
        cssModules: {
          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
            generateScopedName: '[name]__[local]___[hash:base64:5]',
          },
        },
      },
      webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
      },
    },
    h5: {
      esnextModules: ['taro-ui'],
      publicPath: './',
      staticDirectory: 'static',
      output: {
        filename: 'js/[name].[hash:8].js',
        chunkFilename: 'js/[name].[chunkhash:8].js',
      },
      devServer: {
        port: 10086,
        https: true,
      },
      router: {
        mode: 'browser',
      },
      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]',
          },
        },
      },
      sassLoaderOption: {
        sassOptions: { silenceDeprecations: ['legacy-js-api'] },
      },
      webpackChain(chain) {
        chain.resolve.plugin('tsconfig-paths').use(TsconfigPathsPlugin);
      },
    },
    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.tsx正常加载打印了信息，child对象异常

[wangchongwei]

发现app.tsx有加载，但是child对象异常。 想知道是哪里的配置有问题吗？

[wangchongwei]

app.tsx

import { PropsWithChildren } from 'react';
import { Provider } from 'react-redux';
import 'taro-ui/dist/style/index.scss';

import { useLaunch } from '@tarojs/taro';

import store from '@/store';

import './app.scss';



function App({ children }: PropsWithChildren<any>) {
  useLaunch(() => {
    console.log('children', children);
  });

  // children 是将要会渲染的页面
  return <Provider store={store}>{children}</Provider>;
}

export default App;