将 Quill 导入 React 应用程序抛出“React 未定义"、“意外的令牌导入"
[英] Importing Quill to React app throws "React is not defined", "Unexpected token import"
本文介绍了将 Quill 导入 React 应用程序抛出“React 未定义"、“意外的令牌导入"的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试让 Quill 在我的 React 应用程序上工作,但根据我的 webpack 配置,它会引发两个错误:
<块引用>
未捕获的语法错误:意外的令牌导入
或
<块引用>
未捕获的引用错误:未定义 React
请注意,我没有使用 react-quill 或 create-react-app.
解决第一个错误会产生另一个错误,我已经读到我需要在 webpack 中创建一个例外以允许它从 quill 文件夹中导入.
排除:/node_modules/
进入
/node_modules(?!\/quill)/
现在它抛出第二个错误.
我的 webpack 配置文件:
module.exports = {入口: ['./src/index.js'],输出: {路径:__目录名,公共路径:'/',文件名:'bundle.js'},模块: {装载机:[{排除:/node_modules(?!\/quill)/,装载机:'通天塔',询问: {预设:['react', 'es2015', 'stage-1']}}]},解决: {扩展名:['', '.js', '.jsx']},开发服务器:{historyApiFallback: 真,内容库:'./'}};
我正在使用 Quill 文档中的基本代码来导入所需的内容:
import React, { Component } from 'react';从'羽毛笔/核心'导入羽毛笔;从 'quill/modules/toolbar' 导入工具栏;从 'quill/themes/snow' 导入雪;从 'quill/formats/bold' 导入粗体;从 'quill/formats/italic' 导入斜体;从 'quill/formats/header' 导入标题;Quill.register({'模块/工具栏':工具栏,'主题/雪':雪,'格式/粗体':粗体,'格式/斜体':斜体,'格式/标题':标题});类教程扩展组件{构造函数(道具){超级(道具);this.editor = null;}使成为(){返回 (<div className="动词容器"><div className="editor"></div>
);}}导出默认教程;
当我只导入时:
从'quill'导入Quill;
或
从'quill/core'导入Quill;
如果我像这样初始化它,就会出现一个基本的编辑器:
<块引用>
this.editor = new Quill('.editor');
但是当我尝试导入时
从'quill/themes/snow'导入雪;
显示:
<块引用>
React 未定义
如果我遗漏了任何重要信息,请告诉我.
解决方案
你的问题帮助我弄清楚如何让 Quill 在 React 应用程序中工作,所以谢谢你!
React 未定义"错误可能与 Quill 无关.
此处可能的解决方案:未捕获的 ReferenceError:React 未定义>
就其价值而言,以下是我将 Quill 导入 React 组件的方式.
注意这是在 React 应用程序中使用 Quill,而不是使用 react-quill npm 包.
从'react'导入React;//导入 'quill/dist/quill.core.css';导入 'quill/dist/quill.snow.css';从'羽毛笔/核心'导入羽毛笔;从 'quill/modules/toolbar' 导入工具栏;从 'quill/themes/snow' 导入雪;//snow 有效,但需要导入和注册格式,并替换图标...从 'quill/formats/bold' 导入粗体;从 'quill/formats/italic' 导入斜体;从 'quill/formats/header' 导入标题;从 'quill/formats/underline' 导入下划线;从 'quill/formats/link' 导入链接;import List, { ListItem } from 'quill/formats/list';从 'quill/ui/icons' 导入图标;导出默认类 QuillEditor 扩展 React.Component {componentDidMount() {Quill.register({'模块/工具栏':工具栏,'主题/雪':雪,'格式/粗体':粗体,'格式/斜体':斜体,'格式/标题':标题,'格式/下划线':下划线,格式/链接":链接,'格式/列表':列表,'格式/列表/项目':列表项目,'ui/icons': 图标});var icons = Quill.import('ui/icons');图标['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';图标['斜体'] = '<i class="fa fa-italic" aria-hidden="true"></i>';图标['underline'] = '<i class="fa fa-underline" aria-hidden="true"></i>';图标['link'] = '<i class="fa fa-link" aria-hidden="true"></i>';图标['clean'] = '<i class="fa fa-eraser" aria-hidden="true"></i>';var quill = new Quill('#editor', {theme: 'snow',//this 需要跟在上面,注册 Snow...占位符:写一些很棒的东西......"});}//componentDidMount使成为() {返回 (<div><div id="QuillEditor-container">{/* */}<div id="编辑器"><p>你好世界!</p><p>一些初始的<strong>粗体</strong>文本<p></p>
)}}
I'm trying to get Quill to work on my React app but depending on my webpack config it throws two errors:
Uncaught SyntaxError: Unexpected token import
or
Uncaught ReferenceError: React is not defined
Please note that I'm not using react-quill nor create-react-app.
Solving the first error produces another, I've read that I need to make an exception in webpack to allow it to import from quill folder.
exclude: /node_modules/
into
/node_modules(?!\/quill)/
Now it throws the second error.
My webpack config file:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules(?!\/quill)/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
I'm using basic code from Quill docs to import what's needed:
import React, { Component } from 'react';
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow';
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header
});
class Tutorial extends Component {
constructor(props){
super(props);
this.editor = null;
}
render(){
return (
<div className="verb-container">
<div className="editor"></div>
</div>
);
}
}
export default Tutorial;
When I import just:
import Quill from 'quill';
or
import Quill from 'quill/core';
A basic editor appears if I initialize it like this:
this.editor = new Quill('.editor');
But when I try to import
import Snow from 'quill/themes/snow';
It shows:
React is not defined
If I missed any important information, please let me know.
解决方案
Your question helped me figure out how to get Quill working in a React app, so thank you for that!
The "React is not defined" error may have nothing to do with Quill.
Possible solution here: Uncaught ReferenceError: React is not defined
For what it's worth, here is how I imported Quill into a React component.
Note this is using Quill in a React app, and not using the react-quill npm package.
import React from 'react';
// import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import Quill from 'quill/core';
import Toolbar from 'quill/modules/toolbar';
import Snow from 'quill/themes/snow'; //snow works, but need to import and register formats, and replace icons...
import Bold from 'quill/formats/bold';
import Italic from 'quill/formats/italic';
import Header from 'quill/formats/header';
import Underline from 'quill/formats/underline';
import Link from 'quill/formats/link';
import List, { ListItem } from 'quill/formats/list';
import Icons from 'quill/ui/icons';
export default class QuillEditor extends React.Component {
componentDidMount() {
Quill.register({
'modules/toolbar': Toolbar,
'themes/snow': Snow,
'formats/bold': Bold,
'formats/italic': Italic,
'formats/header': Header,
'formats/underline': Underline,
'formats/link': Link,
'formats/list': List,
'formats/list/item': ListItem,
'ui/icons': Icons
});
var icons = Quill.import('ui/icons');
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>';
icons['italic'] = '<i class="fa fa-italic" aria-hidden="true"></i>';
icons['underline'] = '<i class="fa fa-underline" aria-hidden="true"></i>';
icons['link'] = '<i class="fa fa-link" aria-hidden="true"></i>';
icons['clean'] = '<i class="fa fa-eraser" aria-hidden="true"></i>';
var quill = new Quill('#editor', {
theme: 'snow', //this needs to come after the above, which registers Snow...
placeholder: "Write something awesome..."
});
} //componentDidMount
render() {
return (
<div>
<div id="QuillEditor-container">
{/* <!-- Create the editor container --> */}
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p></p>
</div>
</div>
</div>
)
}
}
这篇关于将 Quill 导入 React 应用程序抛出“React 未定义"、“意外的令牌导入"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!