尝试在 React App 中渲染 Froala 编辑器，但应用程序崩溃答案

【问题标题】：Trying to render Froala Editor in React App, but the app crashes尝试在 React App 中渲染 Froala 编辑器，但应用程序崩溃
【发布时间】：2022-08-04 18:58:36
【问题描述】：

我正在使用带有 TypeScript 和 Webpack 5 的 React 17 我正在尝试从 \'wysiwyg\' 包中渲染 Froala 编辑器，但我收到此错误：

\'FroalaEditorView\' cannot be used as a JSX component. Its instance type \'FroalaEditor\' is not a valid JSX element.The types returned by \'render()\' are incompatible between these types. Type \'React.ReactNode\' is not assignable to type \'import(\"/Users/Al/Desktop/projects/privateLib/node_modules/@types/react-transition-group/node_modules/@types/react/index\").ReactNode. Type \'{}\' is not assignable to type \'ReactNode\'.

笔记：当我尝试在使用 CRA 生成的应用程序中渲染 Froala 编辑器时，我没有任何问题。

知道如何解决这个问题吗？

网络包配置：

const path = require(\'path\');
const webpack = require(\'webpack\');
const svgrLoader = require.resolve(\'@svgr/webpack\');
module.exports = {
    mode: \"production\",
    entry: \'./src/index.ts\',
    output: {
        filename: \'index.js\',
        path: path.resolve(__dirname, \'dist\'),
        libraryTarget: \'umd\',
        clean: true
    },
    devtool: \'source-map\',
    resolve: {
        extensions: [\".tsx\", \".ts\", \".jsx\", \".js\", \".json\"],
        modules: [\'node_modules\']
    },
    externals: {
        react: \"react\"
    },
    module: {
        rules: [
            {
                test: /\\.(ts|tsx)?$/,
                use:[\'ts-loader\'],
                exclude: /node_modules/
            },
            {
                test: /\\.(css|s[ac]ss)$/i,
                use: [\'style-loader\', \'css-loader\', \'postcss-loader\'],
            },
            {
                test: /\\.svg$/i,
                type: \'asset\',
                resourceQuery: /url/, // *.svg?url
            },
            {
                test: /\\.svg$/i,
                issuer: /\\.[jt]sx?$/,
                resourceQuery: {not: [/url/]}, // exclude react component if *.svg?url
                use: [
                    {
                        loader: svgrLoader, options: {
                            svgoConfig: {
                                plugins: [
                                    {
                                        name: \'removeViewBox\',
                                        active: false
                                    }
                                ]
                            }
                        }
                    },
                ]
            },
            {
                test: /\\.(woff(2)?|eot|ttf|otf|)$/,
                type: \'asset/inline\',
            },
            {
                test: /\\.(?:ico|gif|png|jpg|jpeg|)$/i,
                type: \'asset/resource\',
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            FroalaEditor: \'file_name\'
        })
    ]
};

TS 配置：

 {
  \"compilerOptions\": {
    \"allowSyntheticDefaultImports\": true,
    \"target\": \"es5\",
    \"module\": \"es2015\",
    \"jsx\": \"react\",
    \"strict\": true,
    \"esModuleInterop\": true,
    \"moduleResolution\": \"node\",
    \"noUnusedLocals\": true,
    \"types\": [\"node\", \"mocha\", \"jest\",\"cypress\", \"cypress-file-upload\",\"./cypress/support\"],
    \"lib\": [\"es5\",\"es2015\",\"es2016\", \"dom\",\"esnext\"],
    \"outDir\": \"./dist/\",
    \"sourceMap\": true,
    \"declarationMap\": true,
    \"declaration\": true,
    \"resolveJsonModule\": true,
  },
  \"include\": [
    \"src\",
    \"node_modules/cypress/types/cypress-global-vars.d.ts\"
  ],
  \"exclude\": [\"node_modules\", \"dist\", \"**/*.stories.tsx\", \"**/*.test.tsx\"]
}

渲染代码：

<FroalaEditorView
  tag=\"textarea\"
  onModelChange={(newContent: ChangeEvent<HTMLTextAreaElement>) => props.onChange(newContent)}
  config={textEditorConfig}
  model={props.value}
/>

标签： reactjs typescript webpack froala

【解决方案1】：

在我的一个项目（React 17 和 Webpack 5）中，FroalaEditor 组件也遇到了同样的问题。尽管 Typescript 会抱怨组件不是 JSX，但我仍然可以很好地构建和运行我的应用程序。我设法通过更新@types/react 来取悦 Typescript（摆脱错误）：

yarn add @types/react@latest

对于 npm 应该是（不是 100% 确定）：

npm install –save @types/react

【讨论】：