javascript – React钩子仅在生成构建中抛出不变的违规
作者：互联网
在使用钩子将我的投资组合从类组件迁移到功能组件的过程中,我在生产构建中遇到了一些以前没有发生过的错误.我的所有组件都是使用useState或useEffect的功能组件(错误边界除外),但看起来它们的存在导致了这个错误：
“Invariant Violation: Minified React error #298; Hooks can only be called inside the body of a function component.”
导致错误的组件之一：
import React, { useState, memo } from 'react';
import { NavLink } from 'react-router-dom';
import { NavBrand, Nav } from './styles';
import Hamburger from './Hamburger';
import { Links, Link } from './styles';
function NavBar() {
const [open, handleMenu] = useState(false);
return (
<Nav>
<NavBrand onClick={() => handleMenu(false)}>
<NavLink to="/">
<i className="icon-brand" />
</NavLink>
</NavBrand>
<Hamburger open={open} onClick={() => handleMenu(!open)} />
<Links open={open} role="menu">
<Link
onClick={() => handleMenu(false)}
to="/"
exact
>
Home <i className="icon-home" />
</Link>
<Link
onClick={() => handleMenu(false)}
to="/portfolio"
>
Portfolio <i className="icon-briefcase" />
</Link>
<Link
onClick={() => handleMenu(false)}
to="/contact"
>
Contact <i className="icon-message-square" />
</Link>
</Links>
</Nav>
);
};
export default memo(NavBar);
Webpack.config.js
module.exports = function(env, argv) {
const isProd = argv.mode === 'production';
const plugins = [
new webpack.DefinePlugin({
NODE_ENV: JSON.stringify(argv.mode),
GA_ID: JSON.stringify(process.env.GA_ID)
}),
new WebpackBar({ name: 'portfolio', color: '#269bda' })
];
if (isProd) {
plugins.push(
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html'
}),
new CopyWebpackPlugin(['netlify', 'pwa', 'static']),
new ManifestPlugin({
fileName: 'asset-manifest.json'
}),
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$/,
minRatio: 0.9,
deleteOriginalAssets: false
}),
new SWPrecacheWebpackPlugin({
// By default, a cache-busting query parameter is appended to requests
// used to populate the caches, to ensure the responses are fresh.
// If a URL is already hashed by Webpack, then there is no concern
// about it being stale, and the cache-busting can be skipped.
dontCacheBustUrlsMatching: /\.\w{8}\./,
filename: 'service-worker.js',
// staticFileGlobs: ['/vendor.bundle.js'],
logger(message) {
if (message.indexOf('Total precache size is') === 0) {
// This message occurs for every build and is a bit too noisy.
return;
}
console.log(message);
},
// minify and uglify the script
minify: true,
// For unknown URLs, fallback to the index page
navigateFallback: '/index.html',
// Don't precache sourcemaps, build asset manifest,
// netlify redirects, or app js.
staticFileGlobsIgnorePatterns: [
/\.map$/,
/manifest.json$/,
/_redirects$/,
/js.bundle.js$/,
/[0-9].bundle.js$/
]
}),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.AggressiveMergingPlugin(),
new MiniCssExtractPlugin({
filename: 'styles.css',
chunkFilename: '[id].css'
})
);
} else {
plugins.push(
new webpack.HotModuleReplacementPlugin(),
new BrowserSyncPlugin(
// BrowserSync options
{
host: 'localhost',
port: 8080,
open: false,
// proxy the Webpack Dev Server endpoint
// (which should be serving on http://localhost:8080/)
// through BrowserSync
proxy: 'http://localhost:8080/',
logPrefix: 'Portfolio'
},
// prevent BrowserSync from reloading the page
// and let Webpack Dev Server take care of this
{
reload: true
}
),
new CaseSensitivePathsPlugin(),
new FriendlyErrorsWebpackPlugin(),
new SystemBellPlugin(),
new DuplicatePackageCheckerPlugin(),
new StyleLintPlugin({
files: './app/assets/scss/*.scss'
})
);
}
return {
devtool: isProd ? 'hidden-source-map' : 'cheap-module-source-map',
context: sourcePath,
entry: {
js: [
// react-error-overlay
!isProd && 'react-dev-utils/webpackHotDevClient',
// fetch polyfill
isProd && 'whatwg-fetch',
// app entry
'app.tsx'
].filter(Boolean)
},
output: {
path: publicPath,
filename: '[name].bundle.js',
devtoolModuleFilenameTemplate: isProd
? info => path.relative(sourcePath, info.absoluteResourcePath).replace(/\\/g, '/')
: info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
},
module: {
rules: [
{
test: /\.html$/,
exclude: /node_modules/,
use: {
loader: 'html-loader'
}
},
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
options: {
fix: false
}
},
{
test: /\.json$/,
loader: 'json-loader',
type: 'javascript/auto'
},
{
test: /\.(scss|css)$/,
use: [
isProd && {
loader: MiniCssExtractPlugin.loader
},
!isProd && {
loader: 'style-loader',
options: {
sourceMap: false
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}
].filter(Boolean)
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
}
]
},
{
test: /\.(ts|tsx)?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{ enforce: 'pre', test: /\.js$/, loader: 'source-map-loader' },
{
test: /\.(ttf|eot|svg|woff|woff2)(\?[a-z0-9]+)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpg)$/,
exclude: /node_modules/,
use: ['file-loader']
}
]
},
resolve: {
extensions: [
'.webpack-loader.js',
'.web-loader.js',
'.loader.js',
'.jsx',
'.tsx',
'.js',
'.ts'
],
modules: [path.resolve(__dirname, 'node_modules'), sourcePath]
},
plugins,
// split out vendor js into its own bundle
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial'
}
}
}
},
performance: isProd && {
maxAssetSize: 600000,
maxEntrypointSize: 600000,
hints: 'warning'
},
stats: {
colors: {
green: '\u001b[32m'
}
},
devServer: {
contentBase: './src',
historyApiFallback: true,
port: 8080,
compress: isProd,
inline: !isProd,
hot: false,
quiet: true,
before: function(app) {
// This lets us open files from the runtime error overlay.
app.use(errorOverlayMiddleware());
}
}
};
};
在我的开发环境中没有出现错误,我添加了react-hooks eslint plugin,它应该捕获任何这些不变的违规行为.
有没有其他人遇到像这样的React 16.7.0-alpha的prod特定问题？我究竟做错了什么？
解决方法:
加载两份React是一个问题.我没有意识到html-webpack-plugin已经将我的脚本添加到index.html,所以有两组bundle被加载.
一旦我从模板中删除了脚本,我就传递给了html-webpack-plugin,它确实有效.
https://reactjs.org/warnings/invalid-hook-call-warning.html
标签：javascript,reactjs,react-hooks 来源： https://codeday.me/bug/20190705/1387344.html