寻找一位 ReactJs 大神，有偿解决技术难题，有机会可以长期合作，价格你来定

[angkee]

之前我有发帖子提过，我是一位远程工程师，主要做后端 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

[yacolinqi]

你这 warn webpackDevMiddleware 、configOrigin 、target 是由于你配置 api 代理导致的。next 的本地开发代理你可能还需要用 express 那一套来弄。

本人建议，如果不是公司强烈要求，可以换到自己之前成熟的 React 项目经验上，Nextjs 的配置什么的可以看他官方网站的文档来弄。

[angkee]

@yacolinqi 之前公司也没开发过 React 项目……

[yacolinqi]

@angkee 那你选择了一个 React 深层次的东西，来开始你的 React 初体验 加油💪🏻

[looppppp]

create-react-app 直接搭建不可以吗

[liu66666]

这个不是 react 的问题，应该是 next 配置问题呀，GitHub 也有类似问题: https://github.com/vercel/next.js/issues/39161 ，你可以参考一下，我看上面也有解决方案。

[horizon]

next 版本使用 12.0.7 ？