search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.13k stars 26.73k forks source link

TypeError: Class constructor App cannot be invoked without 'new' after upgrade to next.js9 #7914

Closed yufengwang closed 5 years ago

yufengwang commented 5 years ago

Bug report

TypeError: Class constructor App cannot be invoked without 'new'

Describe the bug

After upgrade to next.js9, my app can't get compiled correctly, and here is the error message

TypeError: Class constructor App cannot be invoked without 'new'
    at new MyApp (/Users/richard/tuya/developer-service-market/.next/server/static/development/pages/_app.js:8925:17)
    at processChild (/Users/richard/tuya/developer-service-market/node_modules/react-dom/cjs/react-dom-server.node.development.js:2846:14)
    at resolve (/Users/richard/tuya/developer-service-market/node_modules/react-dom/cjs/react-dom-server.node.development.js:2812:5)
    at ReactDOMServerRenderer.render (/Users/richard/tuya/developer-service-market/node_modules/react-dom/cjs/react-dom-server.node.development.js:3202:22)
    at ReactDOMServerRenderer.read (/Users/richard/tuya/developer-service-market/node_modules/react-dom/cjs/react-dom-server.node.development.js:3161:29)
    at renderToString (/Users/richard/tuya/developer-service-market/node_modules/react-dom/cjs/react-dom-server.node.development.js:3646:27)
    at render (/Users/richard/tuya/developer-service-market/node_modules/next-server/dist/server/render.js:81:16)
    at renderPage (/Users/richard/tuya/developer-service-market/node_modules/next-server/dist/server/render.js:230:20)
    at _callee$ (/Users/richard/tuya/developer-service-market/.next/server/static/development/pages/_document.js:261:22)
    at tryCatch (/Users/richard/tuya/developer-service-market/node_modules/regenerator-runtime/runtime.js:45:40)
    at Generator.invoke [as _invoke] (/Users/richard/tuya/developer-service-market/node_modules/regenerator-runtime/runtime.js:271:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/richard/tuya/developer-service-market/node_modules/regenerator-runtime/runtime.js:97:21)
    at asyncGeneratorStep (/Users/richard/tuya/developer-service-market/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)
    at _next (/Users/richard/tuya/developer-service-market/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:27:9)
    at /Users/richard/tuya/developer-service-market/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:34:7
    at new Promise (<anonymous>)

Expected behavior

My app get compiled correctly

System information

Additional context

my .babelrc file 

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": {
            "browsers": ["last 2 versions", "ie > 9"]
          },
          "corejs": "2",
          "useBuiltIns": "usage",
          "loose": true
        },
        "transform-runtime": {
          "useESModules": false
        }
      }
    ]
  ],
  "env": {
    "development": {
      "plugins": [
        "react-intl"
      ]
    },
    "production": {
      "plugins": [
        ["react-intl", {
          "messagesDir": "lang/.messages/"
        }]
      ]
    }
  },
  "plugins": [
    ["lodash"],
    [
      "import",
      {
        "libraryName": "@tuya-fe/moon",
        "libraryDirectory": "lib",
        "style": "css"
      }
    ],
    ["styled-components"]
  ],
  "comments": false,
  "compact": "auto"
}
yufengwang commented 5 years ago

compiled code in dev mode image

AlanPieczonka commented 5 years ago

Having the same issue when trying to build

yufengwang commented 5 years ago

It's my wrong next.config.js

AlanPieczonka commented 5 years ago

@YUFENGWANG Could you tell what was causing the issue in next.config.js?

jacintorodrigues commented 5 years ago

can this be open? I having the same issue.

timneutkens commented 5 years ago

"I have the same issue" won't solve the issue. There is no reproduction provided in the initial issue. So please create a new issue that follows the issue template 🙏

In general always provide a reproduction when commenting you have an issue otherwise it's impossible for maintainers to look into it.

yufengwang commented 5 years ago

It's because of my wrong webpack external config, hope it'll help @jacintorodrigues @AlanPieczonka 

function externalsConfig(dir, isServer) {
  const externals = [
    {
      log4js: 'log4js',
      '@tuya-fe/next-log4js' : 'commonjs2 @tuya-fe/next-log4js'
    },
  ]
  if (!isServer) {
    return externals
  }
  externals.push((context, request, callback) => {
    resolve(request, { basedir: dir, preserveSymlinks: true }, (err, res) => {
      if (err) {
        return callback()
      }
      // Default pages have to be transpiled
      if (res.match(/node_modules[/\\]next[/\\]dist[/\\]pages/)) {
        return callback()
      }
      // Webpack itself has to be compiled because it doesn't always use module relative paths
      if (res.match(/node_modules[/\\]webpack/)) {
        return callback()
      }
      if (
        res.match(/node_modules[/\\].*\.js$/) &&
        !res.match(/node_modules[/\\]@tuya-fe/) &&
        !res.match(/node_modules[/\\]lodash-es/)
      ) {
        return callback(null, `commonjs ${request}`)
      }
      callback()
    })
  })
  return externals
}
webdevsyd commented 5 years ago

I also encouter this after upgrading to version 9

yufengwang commented 5 years ago

@webdevsyd Check your custom next.config.js or .babelrc

webdevsyd commented 5 years ago

@YUFENGWANG this is my next.config.js

const resolve = require('resolve')
const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  publicRuntimeConfig: {
    PORT: process.env.PORT,
    NODE_ENV: process.env.NODE_ENV,
    EXPRESS_API_URL: process.env.EXPRESS_API_URL,
    PLATFORM_URL: process.env.PLATFORM_URL,
    APP_URL: process.env.APP_URL,
    CUSTOMER_PRIVATE_URL: process.env.CUSTOMER_PRIVATE_URL,
    TRACKING_URL: process.env.TRACKING_URL,
    RAVEN_DSN: process.env.RAVEN_DSN,
    UWAI_COM_URL: process.env.UWAI_COM_URL,
    WECHAT_APP_ID: process.env.WECHAT_APP_ID,
    WECHAT_APP_SECRET: process.env.WECHAT_APP_SECRET,
    GTM_CONTAINER_ID: process.env.GTM_CONTAINER_ID
  },

  webpack (config, options) {
    const { dir, isServer } = options

    config.externals = []

    if (isServer) {
      config.externals.push((context, request, callback) => {
        resolve(request, { basedir: dir, preserveSymlinks: true }, (err, res) => {
          if (err) {
            return callback()
          }
          if (res.match(/node_modules[/\\]next/)) {
            return callback(null, `commonjs ${request}`)
          }
          callback()
        })
      })
    }
    return config
  }
})

and this is my babelrc

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    ["import", {"libraryName": "antd", "style": false}],
    ["styled-components", { "ssr": true, "displayName": true, "preprocess": true }]
  ]
}
yufengwang commented 5 years ago

@webdevsyd Check this https://github.com/zeit/next.js/blob/aac5121466f3d58e2c18c4921a9ce36fb7512d2e/packages/next/build/webpack-config.ts#L183 I think it's your wrong external config

timneutkens commented 5 years ago

The whole webpack (config, options) { section of your next.config.js looks wrong, I'm not sure how you ended up adding that, would be curious to know.

rzschoch commented 5 years ago

This is probably related to: https://github.com/zeit/next.js/issues/8175

sebaveg commented 4 years ago

I have the same issue. With next version 9.0.2 run correctly, but if upgrade it I can see this error.

System inofrmation

my next.config.js file

const withLess = require('@zeit/next-less');
let AVAILABLE_LANGUAGES = require('./src/shared/constants/Language');
const BabelPluginTransformImports = require('babel-plugin-transform-imports');

module.exports = withLess({
    cssModules       : false,
    cssLoaderOptions : {
        minimize: true,
    },
    assetPrefix : process.env.ASSET_PREFIX ? process.env.ASSET_PREFIX : '',
    webpack     : (config, options) => {
        config.module.rules.push({
            test    : /\.js$/,
            exclude : /(node_modules|bower_components)/,
            use     : [
                options.defaultLoaders.babel,
                {
                    loader : 'babel-loader',
                    query  : {
                        presets : ['next/babel'],
                        plugins : [
                            [
                                BabelPluginTransformImports,
                                {
                                    // configs ...
                                },
                            ],
                        ],
                    },
                },
            ],
        });

        return config;
    },
});

my .babelrc file

{
    "presets": [
        [
            "next/babel",
            {
                "preset-env": {
                    "targets": {
                        "node": "true"
                    }
                }
            }
        ]
    ],
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"],
                "alias": {
                    "shared": "./src/shared",
                    "assets": "./src/assets"
                }
            }
        ],
        ["@babel/plugin-proposal-class-properties"],
        ["@babel/plugin-proposal-optional-chaining"],
        ["@babel/plugin-proposal-nullish-coalescing-operator"],
    ],
    "env": {
        "development": {
            "plugins": ["inline-dotenv"],
            "presets" : [
                [
                    "@babel/env",
                    {
                        "useBuiltIns": "usage",
                        "corejs": "3.4.7",
                        "targets": {
                            "browsers": ["ie >= 11"]
                        }
                    }
                ]
            ]
        },
        "production": {
            "plugins": [
                "transform-inline-environment-variables",
                [
                    "transform-react-remove-prop-types",
                    {
                        "mode": "remove",
                        "removeImport": true
                    }
                ]
            ],
            "presets" : [
                [
                    "@babel/env",
                    {
                        "useBuiltIns": "usage",
                        "corejs": "3.4.7",
                        "targets": {
                            "browsers": ["ie >= 11"]
                        }
                    }
                ]
            ]
        },
        "test": {
            "plugins": ["inline-dotenv",
                ["css-modules-transform", {
                    "generateScopedName": "[local]___[hash:base64:5]",
                    "extensions": [".css"]
                }]
            ]
        }
    }
}

I believe there is a conflict between next.config and babelrc with 'next/babel'. I deleted presets: ['next/babel'] but get same error.

lenaggar commented 4 years ago

@sebaveg yeah same here 🖐 Next version 9.0.2 works fine, but starting from version 9.0.3 onwards I see this problem

I basically have a custom document component pages/_document.js, and the error looks like:

TypeError: Class constructor Document cannot be invoked without 'new'
sebaveg commented 4 years ago

When I disabled/comment my config.module.rules.push in next.config.js and add target.node: 'current' in .baberc then the app run correctly. Check this comment 9000

balazsorban44 commented 2 years ago

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.