Importing from package causes error in build only.

[Flohhhhh]

When running in development, I have no error and it works perfectly. Running build throws minified error below. (Even without import for audio file error still occurs)

Error:

Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Decoded error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

My code:

import ReactAudioPlayer from 'react-audio-player'
import Music from './assets/audio/music.mp3'

function App() {
  return (
      <div className="app">
         <ReactAudioPlayer id="audio-controls" src={Music} autoPlay loop controls volume={0.05}/>
      </div
   }
}

Also found this error on the tsconfig.json

[MrMYHuang]

react-audio-player has a dep prop-types, which uses module.exports = require('xxx'). It results in a problem as shown in https://github.com/vitejs/vite/issues/2139#issuecomment-806416318

My workaround is this in TypeScript:

import AudioPlayerOrig from "react-audio-player";
const AudioPlayer = process.env.NODE_ENV === 'production' ? (AudioPlayerOrig as any).default : AudioPlayerOrig;

[Abdullah0991]

I have the same problem.

Luckily, I saw @MrMYHuang answer :) It does solve the problem.