У меня есть сценарий использования в проекте, где я должен загружать отдельные html-файлы в электронные компоненты веб-просмотра через плагин электронных вкладок. Сначала загружается приложение Electron как приложение, которое внутренне загружает реагирующие компоненты для визуализации пользовательского интерфейса.
Основываясь на действиях пользователя, мы открываем новые вкладки с помощью плагина, называемого электронными вкладками, который запускает каждую вкладку как отдельный процесс рендеринга. Поскольку электронное веб-представление принимает только ввод html, мы вынуждены загружать каждое веб-представление вкладки как локальный HTML-файл.
Мы хотим загружать отдельные реагирующие приложения как часть локального html-файла, который мы загружаем в веб-просмотр.
Пример 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>
Приветствие является основным компонентом реакции
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')
},
]),
]
};