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

2022-11-10 22:21:05 +08:00
 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

1610 次点击
所在节点    酷工作
6 条回复
yacolinqi
2022-11-10 23:40:59 +08:00
你这 warn webpackDevMiddleware 、configOrigin 、target 是由于你配置 api 代理导致的。next 的本地开发代理你可能还需要用 express 那一套来弄。

本人建议,如果不是公司强烈要求,可以换到自己之前成熟的 React 项目经验上,Nextjs 的配置什么的可以看他官方网站的文档来弄。
angkee
2022-11-11 09:41:15 +08:00
@yacolinqi 之前公司也没开发过 React 项目……
yacolinqi
2022-11-11 09:42:54 +08:00
@angkee 那你选择了一个 React 深层次的东西,来开始你的 React 初体验 加油💪🏻
looppppp
2022-11-11 14:43:26 +08:00
create-react-app 直接搭建不可以吗
liu66666
2022-11-22 20:53:49 +08:00
这个不是 react 的问题,应该是 next 配置问题呀,GitHub 也有类似问题: https://github.com/vercel/next.js/issues/39161 ,你可以参考一下,我看上面也有解决方案。
horizon
2022-12-12 15:27:50 +08:00
next 版本使用 12.0.7 ?

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/894279

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX