change to class

config/index.ts

@@ -27,7 +27,12 @@ export default defineConfig(async (merge, { command, mode }) => {
       }
     },
     framework: 'react',
-    compiler: 'webpack5',
+    compiler: {
+      type: 'webpack5',
+      prebundle: {
+        exclude: ['taro-ui']
+      }
+    },
     cache: {
       enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
     },
@@ -58,6 +63,7 @@ export default defineConfig(async (merge, { command, mode }) => {
       }
     },
     h5: {
+      esnextModules: ['taro-ui'],
       publicPath: '/',
       staticDirectory: 'static',
       output: {

src/app.ts

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react'
 import { useLaunch } from '@tarojs/taro'
+import 'taro-ui/dist/style/index.scss'
 import './app.scss'
 
 function App({ children }: PropsWithChildren<any>) {

src/pages/index/index.tsx

@@ -1,16 +1,25 @@
 import { View, Text } from '@tarojs/components'
-import { useLoad } from '@tarojs/taro'
 import './index.scss'
+import { Component, ReactNode } from 'react'
 
-export default function Index() {
+class Index extends Component {
+  state = {
+    msg: "Hello World!"
+  }
 
-  useLoad(() => {
-    console.log('Page loaded.')
-  })
+  onReady() {
+    console.log("Index is ready");
+  }
 
+  render(): ReactNode {
     return (
-    <View className='index'>
-      <Text>Hello world!</Text>
+      <View>
+        <Text>
+          {this.state.msg}
+        </Text>
       </View>
     )
   }
+}
+
+export default Index