TypeError：没有'new'就不能调用类构造函数文档

Posted 2023-03-10

【中文标题】TypeError：没有\'new\'就不能调用类构造函数文档

【英文标题】：TypeError: Class constructor Document cannot be invoked without 'new'TypeError：没有'new'就不能调用类构造函数文档

【发布时间】：2020-11-27 18:50:52

【问题描述】：

我正在开发一个项目（Next.js 版本 8.1.0），我想升级到版本 9.2。我将 Next.js 版本更改为 9.2，我遇到了这个问题：

TypeError：没有'new'就不能调用类构造函数App 在新的 MyApp (/home/node/app/src/.next/server/static/development/pages/_app.js:4384:191) 在 processChild (/home/node/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2995:14) 在解决（/home/node/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5） 在 ReactDOMServerRenderer.render (/home/node/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22) 在 ReactDOMServerRenderer.read (/home/node/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29) 在 renderToString (/home/node/app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27) 在渲染（/home/node/app/node_modules/next/dist/next-server/server/render.js:81:16） 在 renderPage (/home/node/app/node_modules/next/dist/next-server/server/render.js:346:16) 在 Object.ctx.renderPage (/home/node/app/src/.next/server/static/development/pages/_document.js:2266:26) 在 Function.getInitialProps (/home/node/app/src/.next/server/static/development/pages/_document.js:1515:19) 在 _callee$ (/home/node/app/src/.next/server/static/development/pages/_document.js:2282:77) 在 tryCatch (/home/node/app/src/.next/server/static/development/pages/_document.js:428:40) 在 Generator.invoke [as _invoke] (/home/node/app/src/.next/server/static/development/pages/_document.js:654:22) 在 Generator.prototype.(anonymous function) [as next] (/home/node/app/src/.next/server/static/development/pages/_document.js:480:21) 在 asyncGeneratorStep (/home/node/app/src/.next/server/static/development/pages/_document.js:124:24) 在 _next (/home/node/app/src/.next/server/static/development/pages/_document.js:146:9)

这是我的 next.config.js：

    const withSass = require('@zeit/next-sass');
const  resolve  = require('path');

let baseUrl = process.env.BASE_URL;
baseUrl = baseUrl && baseUrl.length && '/' !== baseUrl ? baseUrl : '';

module.exports = withSass(
  transpileModules: ['file-type'],
  webpack(config, options) 
    config.module.rules.push(
      test: /\.tsx?$/,
      use: [
        
          loader: 'babel-loader',
          options: 
            configFile: resolve('babel.config.js'),
          ,
        ,
        
          loader: 'ts-loader',
          options: 
            // disable type checker - we will use it in fork plugin
            transpileOnly: true,
          ,
        ,
      ],
    );
    config.module.rules.push(
      test: /node_modules\/file-type/,
      use: [
        
          loader: 'babel-loader',
          options: 
            configFile: resolve('babel.config.js'),
            exclude: /node_modules\/(?!(file-type))/,
            include: /node_modules\/file-type/,
            sourceType: 'unambiguous',
          ,
        ,
      ],
    );

    config.resolve.extensions.push('.ts');
    config.resolve.extensions.push('.tsx');
    config.resolve.extensions.push('.jsx');
    /* if (options.isServer) 
      config.plugins.push(new ForkTsCheckerWebpackPlugin( tsconfig: resolve('./tsconfig.json') ));
     */

    return config;
  ,
  pageExtensions: ['jsx', 'tsx'],
  cssModules: true,
  cssLoaderOptions: 
    importLoaders: 1,
    localIdentName: '[local]___[hash:base64:5]',
  ,
  sassLoaderOptions: 
    includePaths: [resolve('src/scss')],
  ,
  webpackDevMiddleware: config => 
    if (process.env.ENABLE_WATCH_POLL) 
      const watchOptions = 
        poll: true,
        aggregateTimeout: 500,
        ignored: [
          '.git/**',
          'src/.next/**',
          '**/__tests__/**',
          '.scannerwork/**',
          'cypress/**',
          'doc/**',
          'node_modules/**',
          'src/static/**',
        ],
      ;
      return  ...config, watch: true, watchOptions ;
    
    return config;
  ,
  publicRuntimeConfig: 
    env: process.env.APP_ENV,
    nodeEnv: process.env.NODE_ENV,
    apiProxy: process.env.API_PROXY,
    subscriptionKey: process.env.OCP_APIM_SUBSCRIPTION_KEY,
    apiEndpoint: process.env.API_ENDPOINT,
    serverPort: process.env.SERVER_PORT,
    gmapApiendpoint: process.env.GMAP_API_KEY,
    gigyaApiKey: process.env.GIGYA_API_KEY,
    gigyaDatacenter: process.env.GIGYA_DATACENTER,
    templateReimbursementLink: process.env.TEMPLATE_REIMBURSEMENT_LINK,
    reimbursementStatusLink: process.env.REIMBURSEMENT_STATUS_LINK,
    gtmId: process.env.GTM_ID,
    captchaSiteKey: process.env.CAPTCHA_SITE_KEY,
    baseUrl,
    redisPort: process.env.REDIS_PORT,
    redisHost: process.env.REDIS_HOST,
    redisPassword: process.env.REDIS_PASSWORD,
  ,
);

【问题讨论】：

您是否使用new-关键字调用了MyApp？例如。 const app = new MyApp();?

【参考方案1】：

从comment in the GitHub issue you also have commented on 中说要从next.config.js 中删除babel-loader，因为Next.js 已经包含此内容。