DotLottie file loader errors

257 Views Asked by At

I am using dotlottie/react-player,webpack 4 and react 16. On compiling getting the following module parse failed errors.

"@dotlottie/react-player": "^1.6.5" 
"webpack": "^4.44.2",
"react": "16.14.0",`
import React from "react";
import { DotLottiePlayer, Controls } from "@dotlottie/react-player";
import "@dotlottie/react-player/dist/index.css";

const App = () => {
    return (
        <div>
            <DotLottiePlayer
                src="sampleFile.lottie"
                autoplay
                loop
            >
                <Controls />
            </DotLottiePlayer>
        </div>
    );
};

export default App;`

Which file loader am i missing here?

ERROR in ./node_modules/@dotlottie/react-player/dist/index.css 1:0
Module parse failed: Unexpected character '@' (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

ERROR in ./node_modules/@dotlottie/common/dist/chunk-LSBKEGEA.js 7:1595
Module parse failed: Unexpected token (7:1595)
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
| import { a as a$2, j, i, h, m, n, l } from './chunk-FY4TNGN6.js';

ERROR in ./node_modules/@dotlottie/common/dist/chunk-BHJSY5WG.js 1:3992
Module parse failed: Unexpected token (1:3992)
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

ERROR in ./node_modules/@dotlottie/common/dist/chunk-FY4TNGN6.js 1:8077
Module parse failed: Unexpected token (1:8077)
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

ERROR in ./node_modules/@dotlottie/common/dist/chunk-FKRBH4IN.js 3:22
Module parse failed: Unexpected token (3:22)
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
| import { l, k, c, b, d, e, f, g } from './chunk-FY4TNGN6.js';

ERROR in ./node_modules/@dotlottie/common/dist/chunk-LSBKEGEA.js 7:1595
Module parse failed: Unexpected token (7:1595)
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
| import { a as a$2, j, i, h, m, n, l } from './chunk-FY4TNGN6.js';`

I have tried using babel loader but then getting the below error
`ERROR in ./node_modules/@dotlottie/common/dist/chunk-BHJSY5WG.js 229:8
Module parse failed: Unexpected token (229:8)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| }
| var g = class {
>   _state;
|   _prevState;
|   constructor(i) {
1

There are 1 best solutions below

0
On

Looks like you need to add a CSS Loader to your webpack config