Блог

Главная - Вопросы по программированию - Недопустимый тип элемента: ожидаемая строка (для встроенных компонентов) Ошибка при попытке загрузки автономной реакции

Недопустимый тип элемента: ожидаемая строка (для встроенных компонентов) Ошибка при попытке загрузки автономной реакции

#javascript #reactjs #electron

#javascript #reactjs #electron

Вопрос:

Есть вариант использования в проекте, где мне нужно загружать отдельные html-файлы в компоненты electron webview через плагин electron tabs. Electron как приложение загружается первым, которое внутренне загружает компоненты react для рендеринга пользовательского интерфейса. Основываясь на действиях пользователя, мы открываем новые вкладки с помощью плагина 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>

Приветствие — это базовый компонент react

 export default class Greeting extends React.Component {
  constructor() {
    super();
    this.state = { someKey: 'someValue' };
  }

  render() {
    return <p>{this.state.someKey}</p>;
  }

  componentDidMount() {
    this.setState({ someKey: 'otherValue' });
  }
}

Ошибка: 

 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)

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')
            },
        ]),
    ]
};

Комментарии:

1. Может ли это быть дополнительный набор круглых скобок в вашем ReactDOM.render ? Я знаю, что вам нужна запятая после <Greeting /> .

2. Я так не думаю. Это почти похоже на то, что это как ReactDOM.render(<App />, document.getElementById(‘root’));