在MUI中导入react-native-lyric遇模块解析错误，求解决方案

云原生阿岚

2026-7-18

问题解决：react-native-lyric在MUI Web项目中编译失败

核心原因

react-native-lyric是为React Native环境开发的专属库，代码包含React Native特有的语法/API，且默认webpack不会编译node_modules中的第三方库，导致你的Web项目无法解析它的TypeScript代码，从而抛出"Unexpected token"解析错误。

解决方案

方案1：更换Web兼容的歌词库（优先推荐）

直接放弃使用react-native-lyric，选择支持Web环境的歌词组件：

使用react-lyric这类轻量的Web端歌词渲染库
基于MUI组件自行实现简单的歌词解析与渲染逻辑，适配Web环境

方案2：强行适配Web环境（成本较高，不推荐）

如果一定要使用该库，需修改Webpack配置并补充依赖：

安装必要开发依赖：

npm install --save-dev @babel/preset-typescript babel-loader react-native-web

修改Webpack配置文件（若使用Create React App，需通过craco或react-app-rewired修改配置）：

添加规则编译react-native-lyric的TypeScript代码
用react-native-web替代React Native专属API

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        include: /node_modules\/react-native-lyric/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-typescript',
              ['@babel/preset-react', { runtime: 'automatic' }]
            ]
          }
        }
      }
    ]
  },
  resolve: {
    alias: {
      'react-native': 'react-native-web'
    }
  }
};