React JS，webpack 配置不正确以加载 mp3 播放器

Posted 2023-02-25

【中文标题】React JS，webpack 配置不正确以加载 mp3 播放器

【英文标题】：React JS, webpack improperly configured for loading mp3 player

【发布时间】：2020-06-05 14:59:55

【问题描述】：

我已经安装了 mp3 播放器(https://www.npmjs.com/package/react-mp3-player#installation)，但编译时出错。

错误

app.css:1 Uncaught Error: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .mp3-player-track-input 
|     -webkit-appearance: none;
|     width: 85%;
    at eval (app.css:1)
    at Object../node_modules/react-mp3-player/dist/scss/app.css (main.js:2817)
    at __webpack_require__ (main.js:20)
    at eval (Playlist.js:11)
    at Module../node_modules/react-mp3-player/dist/components/Playlist.js (main.js:2662)
    at __webpack_require__ (main.js:20)
    at eval (index.js:2)
    at Module../node_modules/react-mp3-player/dist/index.js (main.js:2806)
    at __webpack_require__ (main.js:20)
    at eval (audio.js:4)

WEBPACK.CONFIG.JS

module.exports = 
  module: 
    rules: [
      
        test: /\.js$|jsx/,
        exclude: /node_modules/,
        use: 
          loader: "babel-loader",
        ,
      ,
    ],
  ,
;

音乐播放器组件

import React from 'react'
import Playlist from 'react-mp3-player';

function Audio() 
    const tracks = [ img: '', name:'MP3', desc: 'Description 1', src:'media/tracks/Kalimba.mp3']


    return (
        <div>

          <Playlist tracks=tracks/>

        </div>
    )


export default Audio

我应该在这里做些什么改变？我应该安装任何软件包吗？

【参考方案1】：

我认为您缺少 css-loader 和 style-loader loader

module: 
  rules: [
  
    test: /\.css/,
    use: [
      "style-loader",
      "css-loader",
    ]
  ,