Javascript 关键依赖项：依赖项的请求是一个表达式——react universal component
警告：Javascript 关键依赖项：依赖项的请求是一个表达式——react universal component,javascript,reactjs,webpack,react-router-v4,react-universal,Javascript,Reactjs,Webpack,React Router V4,React Universal,警告： [HMR] bundle has 2 warnings client.js:189 ./node_modules/babel-plugin-universal-import/universalImport.js 33:18-37 Critical dependency: the request of a dependency is an expression @ ./src/routes/index.js @ ./src/app-root.js @ multi babel-runt
[HMR] bundle has 2 warnings
client.js:189 ./node_modules/babel-plugin-universal-import/universalImport.js 33:18-37
Critical dependency: the request of a dependency is an expression
@ ./src/routes/index.js
@ ./src/app-root.js
@ multi babel-runtime/regenerator webpack-hot-middleware/client?reload=true ./src/app-root.js
./node_modules/react-universal-component/dist/utils.js 59:11-29
Critical dependency: the request of a dependency is an expression
@ ./node_modules/react-universal-component/dist/index.js
@ ./src/routes/index.js
@ ./src/app-root.js
@ multi babel-runtime/regenerator webpack-hot-middleware/client?reload=true ./src/app-root.js
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Routes from './routes';
function render(Component) {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('react-root')
);
}
render(Routes);
if (module.hot) {
module.hot.accept('./routes/index.js', () => {
const NewRoutes = require('./routes/index.js').default;
render(NewRoutes);
});
}
import React from 'react';
import { hot } from 'react-hot-loader';
import universal from 'react-universal-component';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';
const UniversalComponent = universal(({ page }) =>
import(`../components/${page}`)
);
const Routes = () => (
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/about">About Me</Link>
<Switch>
<Route exact path="/">
<UniversalComponent page="counter" />
</Route>
<Route exact path="/about">
<UniversalComponent page="about-me" />
</Route>
</Switch>
</div>
</Router>
);
export default hot(module)(Routes);
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
// We want our client to reload in case a module doesn't recognise that it's parent changed
vendor: ['react', 'react-dom'],
main: [
'babel-runtime/regenerator',
'webpack-hot-middleware/client?reload=true',
'./src/app-root.js',
],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name]-[hash:8].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.js/,
use: [
{
loader: 'babel-loader',
},
],
exclude: /node_modules/,
},
{
test: /\.css/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
localIdentName: '[name]--[local]--[hash:base64:8]',
},
},
],
},
{
test: /\.scss/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.html/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src'],
},
},
],
},
{
test: /\.(jpg|gif|png)/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name]-[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
// new BundleAnalyzerPlugin({
// generateStatsFile: true,
// }),
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
minChunks: 2,
},
},
},
},
devServer: {
contentBase: 'dist',
overlay: true,
stats: {
colors: true,
},
hot: true,
},
};
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-universal-import": "^3.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"express": "^4.16.3",
"express-static-gzip": "^0.3.2",
"nodemon": "^1.18.3",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-universal-component": "^3.0.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.3"
import React from 'react';
import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import Routes from './routes';
function render(Component) {
ReactDOM.render(
<AppContainer>
<Component />
</AppContainer>,
document.getElementById('react-root')
);
}
render(Routes);
if (module.hot) {
module.hot.accept('./routes/index.js', () => {
const NewRoutes = require('./routes/index.js').default;
render(NewRoutes);
});
}
import React from 'react';
import { hot } from 'react-hot-loader';
import universal from 'react-universal-component';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Switch } from 'react-router';
const UniversalComponent = universal(({ page }) =>
import(`../components/${page}`)
);
const Routes = () => (
<Router>
<div>
<Link to="/">Home</Link>
<Link to="/about">About Me</Link>
<Switch>
<Route exact path="/">
<UniversalComponent page="counter" />
</Route>
<Route exact path="/about">
<UniversalComponent page="about-me" />
</Route>
</Switch>
</div>
</Router>
);
export default hot(module)(Routes);
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
module.exports = {
mode: 'development',
devtool: 'source-map',
entry: {
// We want our client to reload in case a module doesn't recognise that it's parent changed
vendor: ['react', 'react-dom'],
main: [
'babel-runtime/regenerator',
'webpack-hot-middleware/client?reload=true',
'./src/app-root.js',
],
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name]-[hash:8].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.js/,
use: [
{
loader: 'babel-loader',
},
],
exclude: /node_modules/,
},
{
test: /\.css/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
localIdentName: '[name]--[local]--[hash:base64:8]',
},
},
],
},
{
test: /\.scss/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true,
modules: true,
},
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
},
},
],
},
{
test: /\.html/,
use: [
{
loader: 'html-loader',
options: {
attrs: ['img:src'],
},
},
],
},
{
test: /\.(jpg|gif|png)/,
use: [
{
loader: 'file-loader',
options: {
name: 'images/[name]-[hash:8].[ext]',
},
},
],
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html',
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
},
}),
// new BundleAnalyzerPlugin({
// generateStatsFile: true,
// }),
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
name: 'vendor',
chunks: 'initial',
minChunks: 2,
},
},
},
},
devServer: {
contentBase: 'dist',
overlay: true,
stats: {
colors: true,
},
hot: true,
},
};
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-universal-import": "^3.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"express": "^4.16.3",
"express-static-gzip": "^0.3.2",
"nodemon": "^1.18.3",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-universal-component": "^3.0.0",
"webpack": "^4.16.2",
"webpack-cli": "^3.1.0",
"webpack-dev-middleware": "^3.1.3",
"webpack-hot-middleware": "^2.22.3"
我不知道为什么我在使用react universal组件时会看到这个警告。我只在启用HMR和使用react universal component时看到这一点。我认为这是最新的webpack@4.16.2，安装webpack@4.16.0它将在没有警告的情况下运行。问题出在哪里，@rash.tay为什么要修复它？降级Webpack但我使用的是react脚本，它使用的是4.41.5，那么我如何解决这个问题？