react-player source map errors

[nxfi777]

I am trying to migrate to dotLottie in my ReactJS application.

Here are the logs when using the @dotlottie/react-player package with npm:

WARNING in ./node_modules/@dotlottie/common/dist/chunk-DCAKKOYV.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '(root dir)\SeaSource\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+copy@0.1.3\node_modules\@rgba-image\copy\src\index.ts' file: Error: ENOENT: no such file or directory, open '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+copy@0.1.3\node_modules\@rgba-image\copy\src\index.ts'

WARNING in ./node_modules/@dotlottie/common/dist/chunk-DCAKKOYV.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+create-image@0.1.1\node_modules\@rgba-image\create-image\src\index.ts' file: Error: ENOENT: no such file or directory, open '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+create-image@0.1.1\node_modules\@rgba-image\create-image\src\index.ts'

WARNING in ./node_modules/@dotlottie/common/dist/chunk-DCAKKOYV.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+lanczos@0.1.1\node_modules\@rgba-image\lanczos\src\convolve.ts' file: Error: ENOENT: no such file or directory, open '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+lanczos@0.1.1\node_modules\@rgba-image\lanczos\src\convolve.ts'

WARNING in ./node_modules/@dotlottie/common/dist/chunk-DCAKKOYV.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+lanczos@0.1.1\node_modules\@rgba-image\lanczos\src\filters.ts' file: Error: ENOENT: no such file or directory, open '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+lanczos@0.1.1\node_modules\@rgba-image\lanczos\src\filters.ts'

WARNING in ./node_modules/@dotlottie/common/dist/chunk-DCAKKOYV.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '(root\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+lanczos@0.1.1\node_modules\@rgba-image\lanczos\src\index.ts' file: Error: ENOENT: no such file or directory, open '(root dir)\node_modules\node_modules\.pnpm\@dotlottie+dotlottie-js@0.7.0\node_modules\node_modules\.pnpm\@rgba-image+lanczos@0.1.1\node_modules\@rgba-image\lanczos\src\index.ts'

I can see that for some reason, the .pnpm folder is referenced, but I am using npm.

Here is the component code:

import { DotLottiePlayer } from '@dotlottie/react-player';
import '@dotlottie/react-player/dist/index.css';

const SplashScreen = ({ isSolar }) => {
  return (
    <div className="center-div full">
      <div className="splash-img">
        <DotLottiePlayer
          src="./assets/the.lottie"
          autoplay
          loop
          speed={2.5}
        >
        </DotLottiePlayer>
      </div>
    </div>
  );
};

export default SplashScreen;

I have tried deleting my node_modules folder and reinstalling, but to no avail.

[alokedesai]

I'm also experiencing this--is this a KI? Is there a suggested workaround?

[theashraf]

@nxfi777 Which react-player version you're using ?

[nxfi777]

@theashraf @dotlottie/react-player@1.6.18

[nxfi777]

@afsalz any updates on this?

[alokedesai]

I believe this is due to player-component not shipping a source map, which in turn causes warnings to be emitted if you use create-react-app (due to its webpack configuration). More information here: https://github.com/facebook/create-react-app/discussions/11278