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) {
Looks like you need to add a CSS Loader to your webpack config