React项目引入Quill报错：React is not defined及Unexpected token import

我帮你梳理一下这两个报错的核心原因，再给你一套精准的配置调整方案——毕竟直接用Quill配合Webpack，又不用react-quill或create-react-app的话，确实容易踩转译规则的坑：

先搞懂为什么会互相触发报错 #

1. Uncaught SyntaxError: Unexpected token import：Quill的源码用了ES6模块语法，但Webpack默认不会转译node_modules里的文件，浏览器自然识别不了import语句，就报错了。
2. Uncaught ReferenceError: React is not defined：当你把Quill从node_modules的忽略列表里拿出来（也就是用exclude: /node_modules(?!\/quill)/），Webpack会用你的Babel配置去转译Quill。但如果你的Babel预设里包含@babel/preset-react，它会自动给带JSX的文件加import React from 'react'——可Quill本身根本不依赖React，这就导致了“React未定义”的错误。

具体解决步骤 #

1. 调整Webpack的模块转译规则

把JS和JSX的转译规则分开，避免React预设影响Quill：

module.exports = {
  // ...其他Webpack配置（entry、output之类的）
  module: {
    rules: [
      // 转译ES6+代码：包含Quill，排除其他node_modules
      {
        test: /\.js$/,
        exclude: /node_modules(?!\/quill)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 只转译ES6到ES5，不用React预设
          }
        }
      },
      // 单独转译你的React组件（.jsx文件），启用React预设
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      // 别忘了添加Quill需要的样式和资源加载规则
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(svg|eot|ttf|woff|woff2)$/,
        use: 'url-loader' // 或者file-loader，根据你的需求选
      }
    ]
  }
};

2. 用Babel配置文件精准控制转译规则（更推荐）

如果你的项目用babel.config.js，可以针对不同文件设置不同预设，避免全局规则影响Quill：

module.exports = function(api) {
  api.cache(true);

  // 全局预设：只转译ES6+
  const presets = ['@babel/preset-env'];

  // 针对特定文件的规则覆盖
  const overrides = [
    // 只对项目里的JSX文件启用React预设
    {
      test: /\.jsx$/,
      presets: ['@babel/preset-react']
    },
    // 确保Quill的文件只使用ES6转译，完全避开React相关配置
    {
      test: /node_modules\/quill\/.*/,
      presets: ['@babel/preset-env']
    }
  ];

  return {
    presets,
    overrides
  };
};

3. 组件里正确导入和使用Quill

最后，在你的React组件里，记得正确引入Quill和它的样式，别漏了React本身的导入：

import React, { useEffect, useRef } from 'react';
import Quill from 'quill';
import 'quill/dist/quill.snow.css'; // 选你需要的主题样式，比如snow/bubble

const CustomQuillEditor = () => {
  const editorContainer = useRef(null);

  useEffect(() => {
    // 组件挂载后初始化Quill
    if (editorContainer.current) {
      new Quill(editorContainer.current, {
        theme: 'snow',
        placeholder: '开始输入...',
        // 其他Quill配置项
      });
    }
  }, []);

  return <div ref={editorContainer} />;
};

export default CustomQuillEditor;

额外排查点 #

• 如果你用了babel-plugin-react-require这类自动添加React导入的插件，一定要配置它排除node_modules/quill目录，不然它会错误地给Quill的文件加React导入。
• 检查Webpack的其他插件，有没有全局处理JS文件的逻辑，确保Quill不会被错误地当成React组件处理。

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