我试图使react渲染与路由器一起工作。没有路由器，它在wordpress中渲染得很好。但现在当我更改我的index.js以包含路由器时，我一直得到react-dom.min.js?ver=18.2.0:10 Error: Minified React error #130; Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.。
import HomePageFlightContainer from './HomePageFlightContainer';
import PageFetch from './PageFetch';
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => {
return (
<Router >
<Switch>
<Route path="/wordpress/search" component={PageFetch} />
<Route path="/" component={HomePageFlightContainer} />
</Switch>
</Router>
);
};
ReactDOM.render(<App />, document.getElementById('root'));字符串
我还创建了一个index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React App Setup</title>
</head>
<body>
<div id="root">
</div>
</body>
</html>型
我的webpack.config
const defaults = require('@wordpress/scripts/config/webpack.config');
module.exports = {
...defaults,
externals: {
"react": 'React',
"react-dom": 'ReactDOM',
},
};型
为什么我在index.html中有未定义的元素。
编辑
在从here了解到index.php是WordPress中react的入口点之后，我在index.php中添加了这个
<!DOCTYPE html>
<html lang="<?php language_attributes(); ?>">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./dist/js/bundle.js"></script>.
<?php wp_footer(); ?>
</body>
</html>型
在上面的脚本中尝试使用/js/bundle.js
并更新了我的webpack.js，
const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpackConfig = {
mode: 'development',
entry: {
bundle: path.join(__dirname, 'src', 'index.js')
},
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /.(css|scss)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: 'wp-content/themes/travel/dist/img/[name].[ext]'
}
}
}
]
},
plugins: [
new BrowserSyncPlugin({
proxy: {
target: 'https://localhost'
},
files: ['**/*.php'],
cors: true,
reloadDelay: 0,
open: false
}),
new MiniCssExtractPlugin({
filename: 'css/style.[name].css',
})
]
};
if (process.env.NODE_ENV === 'production') {
webpackConfig.mode = 'production';
}
module.exports = webpackConfig;型
现在我得到了<div id="root"></div>元素afaik的错误Target container is not a DOM element.。
任何人都有任何想法如何挂载ReactApp的WordPress
1条答案
按热度按时间wrrgggsh1#
在修改了index.php文件之后，我能够在根元素上挂载
App，如here所述。字符串
也将其添加到functions.php。
bundle.js是webpack的输出型