Next build error - The `target` config is deprecated and will be removed in a future version.

[Lea23VC]

Hello, I tried to deploy a serverless Next js project, but it doesn't build with the new next.config.js that's created after "npx @sls-next/serverless-patched"

  15s › moobFront › Error: Command failed with exit code 1: node_modules/.bin/next build
warn  - The `target` config is deprecated and will be removed in a future version.
See more info here https://nextjs.org/docs/messages/deprecated-target-config
Failed to compile.

./node_modules/sharp/build/Release/sharp.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
./node_modules/sharp/lib/constructor.js
./node_modules/sharp/lib/index.js
./node_modules/plaiceholder/dist/index.js
./pages/index.js
./node_modules/next/dist/build/webpack/loaders/next-serverless-loader/index.js?page=%2F&absolutePagePath=private-next-pages%2Findex.js&absoluteAppPath=private-next-pages%2F_app.js&absoluteDocumentPath=private-next-pages%2F_document.js&absoluteErrorPath=next%2Fdist%2Fpages%2F_error&absolute404Path=&distDir=private-dot-next&buildId=YvL8lCvvSCgKXqanObHuA&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22abf5d961bcc318cd54616cdc4931f206%22%2C%22previewModeSigningKey%22%3A%2256a75bd2be27365de12a639bf1bbb5c39d058d28aadeef293fbddae7e6b958a9%22%2C%22previewModeEncryptionKey%22%3A%22fbd1c60f84a3694f9e236ce2b8305d1a2094a19c8426d52b7f27541167d35340%22%7D&loadedEnvFiles=W3sicGF0aCI6Ii5lbnYiLCJjb250ZW50cyI6IlNJVEVfTElOS19VUkw9aHR0cDovL2Rldi5tb29iZ3JvdXAuY29tL2dyYXBocWwvXG5XUF9BUElfVVJMPWh0dHA6Ly9kZXYubW9vYmdyb3VwLmNvbS9ncmFwaHFsL1xuTkVYVF9QVUJMSUNfR09PR0xFX0FOQUxZVElDUz1VQS04Mjc0MzM4Mi0xXG5BV1NfQUNDRVNTX0tFWV9JRD1BS0lBV1hVQ1gyNE1CVTNJSVpSM1xuQVdTX1NFQ1JFVF9BQ0NFU1NfS0VZPWtwWUlpZFpoUHhSVm5rTU9WTTlUaTNiK0VkRyt4Unpyenk0czR4UmoifV0%3D&i18n=!


> webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
info  - Loaded env from /home/lea/Documents/Local Repo/moob_frontend/.env
info  - Checking validity of types...
info  - Creating an optimized production build...

And the next.config.js created by serverless

module.exports = function(...args) {
  let original = require('./next.config.original.1643665795819.js');
  const finalConfig = {};
  const target = { target: 'serverless' };
  if (typeof original === 'function' && original.constructor.name === 'AsyncFunction') {
    // AsyncFunctions will become promises
    original = original(...args);
  }
  if (original instanceof Promise) {
    // Special case for promises, as it's currently not supported
    // and will just error later on
    return original
      .then((originalConfig) => Object.assign(finalConfig, originalConfig))
      .then((config) => Object.assign(config, target));
  } else if (typeof original === 'function') {
    Object.assign(finalConfig, original(...args));
  } else if (typeof original === 'object') {
    Object.assign(finalConfig, original);
  }
  Object.assign(finalConfig, target);
  return finalConfig;
}

I know that target's the problem, but I didn't created this, this file is autogenerated by the serverless command. I'm using this severless.yml file:

moobFront:
  component: "@sls-next/serverless-component@3.6.0" # it is recommended you pin the latest stable version of serverless-next.js

[nalejandroveron]

You sure that target is the problem? On my project it's a warning and doesn't do anything, I'm more concerned about:

/node_modules/sharp/build/Release/sharp.node
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Which looks to be breaking Webpack...

[Purii]

I get a similar error when trying to integrate Sentry using this workaround: #1038 (comment)
Not with sharp, but another library (currently not on the computer to check) with unexpected characters.

[Lea23VC]

Yes, target is actually just a warning

The problem is sharp. I use placeholder to hash all my images in getStaticProps, and that module uses sharp

It actually works if I don't use it, but that's not the solution I've been searching (and next/image doesn't load external images from a CMS, I receive
503 errors, but that's another issue I think)

[Lea23VC]

I fixed it using @plaiceholder/next

const { withPlaiceholder } = require("@plaiceholder/next");

module.exports = withPlaiceholder({
  // your Next.js config
});

I'll open another issue for the 503 errors.

[revmischa]

I don't know if this is a serverless-next issue but this warning has become an error for me in the latest nextjs

> Build error occurred
MiddlewareInServerlessTargetError: Next.js Middleware is not supported in the deprecated serverless target.
Please remove `target: "serverless" from your next.config.js to use Middleware.

And my next.config.mjs is empty

[brkdmn35]

I don't know if this is a serverless-next issue but this warning has become an error for me in the latest nextjs

> Build error occurred
MiddlewareInServerlessTargetError: Next.js Middleware is not supported in the deprecated serverless target.
Please remove `target: "serverless" from your next.config.js to use Middleware.

And my next.config.mjs is empty

Any solution you used?