之前我有发帖子提过，我是一位远程工程师，主要做后端 PHP 开发，目前公司新开发了一个项目。
前端技术栈使用的是 ReactJs ，NextJS 框架，初次上手使用这个框架，都是现学现卖，Webpack 打包上总是很慢，还有配置错误。
warn - Invalid next.config.js options detected:
- The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
- The root value has an unexpected property, configOrigin, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
- The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
- The root value has an unexpected property, webpack5, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
- The value at .amp.canonicalBase must be 1 character or more but it was 0 characters.
- The value at .experimental.outputFileTracingRoot must be 1 character or more but it was 0 characters.
这是我的 next config 文件
const path = require('path')
const fs = require('fs')
// const withCss = require('@zeit/next-css')
// const withSass = require('@zeit/next-sass')
const withPlugins = require('next-compose-plugins') //结合 sass css
const withAntd = require('./next-antd.config')
const lessToJS = require('less-vars-to-js')
const childProcess = require('child_process')
const nextTranslate = require('next-translate')
const { withSentryConfig } = require("@sentry/nextjs")
// const FilterWarningsPlugin = require('webpack-filter-warnings-plugin')
const qs = require('url')
const withLess = require('next-with-less')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
// 当前配置是翻译的时候如果切换其他语言，默认给项目加前缀
const localeSubpaths = {
'zh-cn': 'zh-cn',
}
const withTM = require('next-transpile-modules')(['antd-mobile'])
// Where your antd-custom.less file lives
const themeVariables = lessToJS(
fs.readFileSync(path.resolve(__dirname, './src/css/antd-custom.less'), 'utf8')
)
function RemoveMinimizeOptionFromCssLoaders(config) {
config.module.rules.forEach((rule) => {
if (Array.isArray(rule.use)) {
rule.use.forEach((u) => {
if (u.loader === 'css-loader' && u.options) {
delete u.options.minimize
}
})
}
})
}
const isProd = process.env.NODE_ENV === 'production'
// Sentry
const sentryWebpackPluginOptions = {
silent: true, // Suppresses all logs
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options.
}
const nextConfig = nextTranslate(
withTM({
sentry: {
hideSourceMaps: true,
autoInstrumentServerFunctions: true,
},
i18n: {
localeDetection: false,
},
images: {
domains: [
qs.parse(process.env.NEXT_PUBLIC_AVATAR_SERVER_HOST).hostname,
qs.parse(process.env.NEXT_PUBLIC_IMAGE_SERVER_HOST).hostname,
'cdn.mmogah.com',
'cdn.mmogah.club',
's3.amazonaws.com'
],
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 60,
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
rewrites: async () => [
{
source: '/api/:path*',
destination: `${process.env.NEXT_PUBLIC_BASE_API}/:path*`,
},
],
publicRuntimeConfig: {
localeSubpaths,
},
assetPrefix: '/',
// experimental: {
// basePath: isProd ? '' : '/api',
// },
sassOptions: {
includePaths: [path.join(__dirname, 'src/css')], // SCSS searches for file paths
prependData: `@import "variables/default-template.scss";`, // include global scss variable
},
webpack: (config) => {
// RemoveMinimizeOptionFromCssLoaders(config)
if (isProd) {
// 生成提交日志
// %H 提交对象（ commit ）的完整哈希字串 %ad 作者修订日期（可以用 --date= 选项定制格式）
isProd &&
childProcess.exec(
'git log --pretty="%H - %ad" --date=iso-local --since="2020-01-01"',
function (error, stdout) {
if (!error) {
const DIST_PATH = path.resolve(__dirname, './.next')
fs.appendFileSync(`${DIST_PATH}/web-commit.log`, '', 'utf-8')
fs.writeFileSync(`${DIST_PATH}/web-commit.log`, stdout, 'utf-8')
}
}
)
}
return config
},
})
)
/**
* @type {import('next').NextConfig}
*/
module.exports = withPlugins(
[
[withBundleAnalyzer],
[
withLess,
{
lessLoaderOptions: {
lessOptions: {
javascriptEnabled: true,
modifyVars: themeVariables, // make your antd custom effective
localIdentName: '[path]___[local]___[hash:base64:5]',
},
},
},
],
],
withSentryConfig(nextConfig, sentryWebpackPluginOptions)
)
如有 React 大神可以指定一二，有偿回答，价格你来定
另外公司需要长期合作的 ReactJs 工程师，要求三年经验起步
我这个 PHP 后端多少搞不定前端开发……
微信：QW5na2VlMDAx
Select Language