使用dotlottie/react-player+Webpack4+React16编译报错，缺失哪些Loader？

环境与依赖版本 #

"@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;

初始编译报错 #

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';

添加babel-loader后的报错 #

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) {

解决方案 #

你需要补充以下两类Loader及相关配置：

1. CSS处理Loader #

Webpack4默认无法解析CSS文件，报错里的Unexpected character '@'是因为没有配置CSS解析规则。需要安装并配置style-loader和css-loader：

安装依赖：

npm install css-loader style-loader --save-dev

Webpack配置添加规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...已有的js/jsx规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/@dotlottie') // 确保处理依赖包内的CSS
        ]
      }
    ]
  }
}

2. ESNext语法转译配置 #

添加babel-loader后仍报错，是因为@dotlottie/common使用了类字段声明（比如_state;这种类属性语法），这属于ESNext特性，需要babel插件支持，同时要让babel-loader处理@dotlottie相关依赖（默认babel只转译项目src目录）：

安装babel插件：

npm install @babel/plugin-proposal-class-properties --save-dev

修改babel配置（.babelrc或babel.config.js）：

{
  "presets": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

更新Webpack的babel-loader规则：

{
  test: /\.(js|jsx)$/,
  use: 'babel-loader',
  include: [
    path.resolve(__dirname, 'src'),
    path.resolve(__dirname, 'node_modules/@dotlottie') // 让babel转译这个依赖包
  ]
}

完成以上配置后，重新编译即可解决问题。

内容的提问来源于stack exchange，提问作者Paras Dawar