Javascript 元素类型无效：尝试启动时应出现字符串（对于内置组件）错误_Javascript_Reactjs_Electron

Javascript 元素类型无效：尝试启动时应出现字符串（对于内置组件）错误

javascript reactjs electron

Javascript 元素类型无效：尝试启动时应出现字符串（对于内置组件）错误,javascript,reactjs,electron,Javascript,Reactjs,Electron,在项目中有一个用例，我必须通过electron tabs插件在electron webview组件中加载单个html文件。Electron作为一个应用程序首先启动，它在内部加载react组件以呈现UI。基于用户操作，我们使用名为electron tabs的插件打开新的选项卡，该插件将每个选项卡作为单独的渲染过程运行。由于electron webview只接受html输入，我们被迫将每个选项卡webview作为本地html文件加载我们希望将单个react应用程序作为本地html文件的一部分引导

在项目中有一个用例，我必须通过electron tabs插件在electron webview组件中加载单个html文件。Electron作为一个应用程序首先启动，它在内部加载react组件以呈现UI。基于用户操作，我们使用名为electron tabs的插件打开新的选项卡，该插件将每个选项卡作为单独的渲染过程运行。由于electron webview只接受html输入，我们被迫将每个选项卡webview作为本地html文件加载

我们希望将单个react应用程序作为本地html文件的一部分引导到webview

我们正在使用的html文件示例：

  <html>
     <head>
    <meta charset="UTF-8">
</head>

<body>
    <div id="welcome"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/javascript" src="../../tabComponents.js"> </script> 
    <script type="text/babel">
    import   Greeting  from "../../tabComponents"

    ReactDOM.render(
        (
            <Greeting />
        ),
        document.getElementById('welcome')
    );
    </script>
</html>

webpack.config.js：

const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CopyPlugin = require('copy-webpack-plugin');


module.exports = {
    entry: {
        main: './src/app.jsx',
        tabComponents: './src/components/index.jsx'
    },
    watch: true,
    output: {
        path: path.resolve('app'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'App',
            filename: './index.html',
            template: './src/index.html'
        }),
        new CopyPlugin([
            { 
                from: './src/tabs/*' ,
                to: path.resolve('app')
            },
        ]),
    ]
};

它可能是

ReactDOM.render中的额外括号集吗？我知道你需要在
后面加逗号。我不这么认为。它几乎类似于将其作为ReactDOM.render（，document.getElementById（'root'））使用；它可能是ReactDOM.render中的额外括号集吗？我知道你需要在后面加逗号。我不这么认为。它几乎类似于将其作为ReactDOM.render（，document.getElementById（'root'））使用；
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
at invariant (react-dom.development.js:49)

const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CopyPlugin = require('copy-webpack-plugin');


module.exports = {
    entry: {
        main: './src/app.jsx',
        tabComponents: './src/components/index.jsx'
    },
    watch: true,
    output: {
        path: path.resolve('app'),
        filename: '[name].js',
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(scss|css)$/,
                exclude: /node_modules/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'App',
            filename: './index.html',
            template: './src/index.html'
        }),
        new CopyPlugin([
            { 
                from: './src/tabs/*' ,
                to: path.resolve('app')
            },
        ]),
    ]
};