Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NextJS Deployment Build Issue - Amplify, Netlify, Vercel | NX Monorepo

See original GitHub issue

What version of Next.js are you using?

12.0.5 (Tested from 12.0.1 to 12.0.5 & canary versions)

What version of Node.js are you using?

v16.2.0 (Used > 12.2 as well when searching for the bug)

What browser are you using?

Chrome

What operating system are you using?

Ubuntu 20

How are you deploying your application?

AWS Amplify | Custom Amplify build script that utilizes NX npm package for building.

Describe the Bug

For the last 20 days or so I’ve been stuck trying to deploy my application to AWS Amplify. I’ve contacted the AWS support team, spoken to members of the Amplify discord, and haven’t found a solution to this issue.

The issue revolves around NextJs build command. Every time the errors vary but the issue always boils down to SWC. So I recently converted my application to a monorepo to split my news app, main and future apps. The repo was built with https://nx.dev/ and it’s a fairly basic structure.

|- apps
|-- main
|--- package.json (contains only Next as a dependency and the next build and start commands)
|-- news
|--- package.json (contains only Next as a dependency and the next build and start commands)
|- packages
|-- 20+ packages (Use Material UI, Styled-components, Formik, and a few other packages)
|- tsconfigbase & NX configs

The problem seems to be whenever I deploy the application to Amplify, it builds the pages with no problem, it installs everything with no problem, although after it builds it gets a bit tricky. As far as I’ve been able to determine, you need to have node_moduels in the app root along with the .next folder to get everything to work. My current solution or at least what has gotten me close is this build configuration:

  - frontend:
      phases:
        preBuild:
          commands:
            - cd ../..
            - nvm install v16.2.0
            - echo "//registry.npmjs.org/:_authToken=${TOKEN}" > .npmrc
            # Replicates NPM CI with RM and Frozen Lock
            - rm -rf node_modules **/node_modules
            - rm -rf yarn.lock **/yarn.lock
            - yarn cache clean
            - yarn install --frozen-lockfile
            # I was hoping this would solve the swc build issue.
            - rm -r node_modules/@next/swc-linux-x64-gnu
            - ls
        build:
          commands:
            - ls
            # Build the app and generate a .next folder inside the apps folder (apps/news/dist/.next) 
            # The reason dist is build inside the app is to make it easier to access for te build script.
            - npx nx build news
            # Amplify wants an nm folder, instead of running the install again I just copy the npm modules here.
            - cp -r node_modules apps/news/node_modules
            - cd apps/news
            - ls
            # Copy the .next into the root of the apps folder so base directory can just be .next instead of ../../dist/apps/news/.next
            - cp -r dist/.next .next
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: apps/news

This structure should technically work, I found another user who used this cp approach for his project and it worked. However in my case, it keeps complaining about SWC most often. The error it throws often looks like this failing on Next Build. Before I did the whole copy files thing I used to just install the npm packages in the apps folder although that just caused issues such as ENOENT node_modules/.bin/next build

2021-11-17T20:56:19.647Z [ERROR]: 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
                                  warn  - You have enabled experimental feature(s).
                                  warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
                                  Failed to compile.
                                  ./node_modules/@next/swc-linux-x64-musl/README.md
                                  Module parse failed: Unexpected character ' ' (1:1)
                                  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
                                  > # `@next/swc-linux-x64-musl`
                                  |
                                  | This is the **linux-x64-musl** binary for `@next/swc`
                                  Import trace for requested module:
                                  ./node_modules/@next/ sync ^\.\/swc\-.*$
                                  ./node_modules/next/dist/build/swc/index.js
                                  ./node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/@next/swc-linux-x64-musl/next-swc.linux-x64-musl.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/@next/ sync ^\.\/swc\-.*$
                                  ./node_modules/next/dist/build/swc/index.js
                                  ./node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/next/dist/compiled/@vercel/nft/LICENSE
                                  Module parse failed: Unexpected token (1:10)
                                  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
                                  > Copyright 2019 Vercel, Inc.
                                  |
                                  | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
                                  Import trace for requested module:
                                  ./node_modules/next/dist/compiled/@vercel/nft/ sync ^\.\/.*$
                                  ./node_modules/next/dist/compiled/@vercel/nft/index.js
                                  ./node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/next/dist/compiled/webpack/bundle5.js
                                  Module not found: Can't resolve 'next/dist/build/webpack/plugins/terser-webpack-plugin' in '/codebuild/output/src400048429/src/fox/apps/news/node_modules/next/dist/compiled/webpack'
                                  Import trace for requested module:
                                  ./node_modules/next/dist/compiled/webpack/webpack.js
                                  ./node_modules/next/dist/server/config-utils.js
                                  ./node_modules/next/dist/server/config.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/next/dist/compiled/webpack/webpack.js
                                  Module not found: Can't resolve 'webpack5/lib/javascript/BasicEvaluatedExpression' in '/codebuild/output/src400048429/src/fox/apps/news/node_modules/next/dist/compiled/webpack'
                                  Import trace for requested module:
                                  ./node_modules/next/dist/server/config-utils.js
                                  ./node_modules/next/dist/server/config.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  > webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
                                  info  - Checking validity of types...
                                  info  - Creating an optimized production build...
                                  info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
                                  info  - Using external babel configuration from /codebuild/output/src400048429/src/fox/apps/news/.babelrc
                                  at makeError (/root/.//node_modules/execa/lib/error.js:59:11)
                                  at handlePromise (/root/.//node_modules/execa/index.js:114:26)
                                  at processTicksAndRejections (node:internal/process/task_queues:96:5) {
                                  shortMessage: 'Command failed with exit code 1: node_modules/.bin/next build',
                                  command: 'node_modules/.bin/next build',
                                  exitCode: 1,
                                  signal: undefined,
                                  signalDescription: undefined,
                                  stdout: 'info  - Checking validity of types...\n' +
                                  'info  - Creating an optimized production build...\n' +
                                  'info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled\n' +
                                  'info  - Using external babel configuration from /codebuild/output/src400048429/src/fox/apps/news/.babelrc',
                                  stderr: 'warn  - The `target` config is deprecated and will be removed in a future version.\n' +
                                  'See more info here https://nextjs.org/docs/messages/deprecated-target-config\n' +
                                  'warn  - You have enabled experimental feature(s).\n' +
                                  'warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.\n' +
                                  '\n' +
                                  'Failed to compile.\n' +
                                  '\n' +
                                  './node_modules/@next/swc-linux-x64-musl/README.md\n' +
                                  "Module parse failed: Unexpected character ' ' (1:1)\n" +
                                  '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\n' +
                                  '> # `@next/swc-linux-x64-musl`\n' +
                                  '| \n' +
                                  '| This is the **linux-x64-musl** binary for `@next/swc`\n' +
                                  '\n' +
                                  'Import trace for requested module:\n' +
                                  './node_modules/@next/ sync ^\\.\\/swc\\-.*$\n' +
                                  './node_modules/next/dist/build/swc/index.js\n' +
                                  './node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js\n' +
                                  './node_modules/next/dist/build/webpack-config.js\n' +
                                  './node_modules/next/dist/server/dev/hot-reloader.js\n' +
                                  './node_modules/next/dist/server/dev/next-dev-server.js\n' +
                                  './node_modules/next/dist/server/next.js\n' +
                                  './node_modules/@sentry/nextjs/dist/utils/instrumentServer.js\n' +
                                  './node_modules/@sentry/nextjs/dist/index.server.js\n' +
                                  './pages/_error.tsx\n' +
                                  './node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!\n' +
                                  '\n' +
                                  './node_modules/@next/swc-linux-x64-musl/next-swc.linux-x64-musl.node\n' +
                                  "Module parse failed: Unexpected character '\x7F' (1:0)\n" +
                                  '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\n' +
                                  '(Source code omitted for this binary file)\n' +
                                  '\n' +
                                  'Import trace for requested module:\n' +
                                  './node_modules/@next/ sync ^\\.\\/swc\\-.*$\n' +
                                  './node_modules/next/dist/build/swc/index.js\n' +
                                  './node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js\n' +
                                  './node_modules/next/dist/build/webpack-config.js\n' +
                                  './node_modules/next/dist/server/dev/hot-reloader.js\n' +
                                  './node_modules/next/dist/server/dev/next-dev-server.js\n' +
                                  './node_modules/next/dist/server/next.js\n' +
                                  './node_modules/@sentry/nextjs/dist/utils/instrumentServer.js\n' +
                                  './node_modules/@sentry/nextjs/dist/index.server.js\n' +
                                  './pages/_error.tsx\n' +
                                  './node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!\n' +
                                  '\n' +
                                  './node_modules/next/dist/compiled/@vercel/nft/LICENSE\n' +
                                  'Module parse failed: Unexpected token (1:10)\n' +
                                  '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\n' +
                                  '> Copyright 2019 Vercel, Inc.\n' +
                                  '| \n' +
                                  '| Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n' +
                                  '\n' +
                                  'Import trace for requested module:\n' +
                                  './node_modules/next/dist/compiled/@vercel/nft/ sync ^\\.\\/.*$\n' +
                                  './node_modules/next/dist/compiled/@vercel/nft/index.js\n' +
                                  './node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js\n' +
                                  './node_modules/next/dist/build/webpack-config.js\n' +
                                  './node_modules/next/dist/server/dev/hot-reloader.js\n' +
                                  './node_modules/next/dist/server/dev/next-dev-server.js\n' +
                                  './node_modules/next/dist/server/next.js\n' +
                                  './node_modules/@sentry/nextjs/dist/utils/instrumentServer.js\n' +
                                  './node_modules/@sentry/nextjs/dist/index.server.js\n' +
                                  './pages/_error.tsx\n' +
                                  './node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!\n' +
                                  '\n' +
                                  './node_modules/next/dist/compiled/webpack/bundle5.js\n' +
                                  "Module not found: Can't resolve 'next/dist/build/webpack/plugins/terser-webpack-plugin' in '/codebuild/output/src400048429/src/fox/apps/news/node_modules/next/dist/compiled/webpack'\n" +
                                  '\n' +
                                  'Import trace for requested module:\n' +
                                  './node_modules/next/dist/compiled/webpack/webpack.js\n' +
                                  './node_modules/next/dist/server/config-utils.js\n' +
                                  './node_modules/next/dist/server/config.js\n' +
                                  './node_modules/next/dist/server/next.js\n' +
                                  './node_modules/@sentry/nextjs/dist/utils/instrumentServer.js\n' +
                                  './node_modules/@sentry/nextjs/dist/index.server.js\n' +
                                  './pages/_error.tsx\n' +
                                  './node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!\n' +
                                  '\n' +
                                  './node_modules/next/dist/compiled/webpack/webpack.js\n' +
                                  "Module not found: Can't resolve 'webpack5/lib/javascript/BasicEvaluatedExpression' in '/codebuild/output/src400048429/src/fox/apps/news/node_modules/next/dist/compiled/webpack'\n" +
                                  '\n' +
                                  'Import trace for requested module:\n' +
                                  './node_modules/next/dist/server/config-utils.js\n' +
                                  './node_modules/next/dist/server/config.js\n' +
                                  './node_modules/next/dist/server/next.js\n' +
                                  './node_modules/@sentry/nextjs/dist/utils/instrumentServer.js\n' +
                                  './node_modules/@sentry/nextjs/dist/index.server.js\n' +
                                  './pages/_error.tsx\n' +
                                  './node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!\n' +
                                  '\n' +
                                  '\n' +
                                  '> webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias',
                                  failed: true,
                                  timedOut: false,
                                  isCanceled: false,
                                  killed: false
                                  }
                                  
2021-11-17T20:56:19.650Z [ERROR]: [?25h
                                  75s › d2wuxof40gra3l › 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
                                  warn  - You have enabled experimental feature(s).
                                  warn  - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
                                  Failed to compile.
                                  ./node_modules/@next/swc-linux-x64-musl/README.md
                                  Module parse failed: Unexpected character ' ' (1:1)
                                  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
                                  > # `@next/swc-linux-x64-musl`
                                  |
                                  | This is the **linux-x64-musl** binary for `@next/swc`
                                  Import trace for requested module:
                                  ./node_modules/@next/ sync ^\.\/swc\-.*$
                                  ./node_modules/next/dist/build/swc/index.js
                                  ./node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/@next/swc-linux-x64-musl/next-swc.linux-x64-musl.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/@next/ sync ^\.\/swc\-.*$
                                  ./node_modules/next/dist/build/swc/index.js
                                  ./node_modules/next/dist/build/webpack/plugins/terser-webpack-plugin/src/index.js
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/next/dist/compiled/@vercel/nft/LICENSE
                                  Module parse failed: Unexpected token (1:10)
                                  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
                                  > Copyright 2019 Vercel, Inc.
                                  |
                                  | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
                                  Import trace for requested module:
                                  ./node_modules/next/dist/compiled/@vercel/nft/ sync ^\.\/.*$
                                  ./node_modules/next/dist/compiled/@vercel/nft/index.js
                                  ./node_modules/next/dist/build/webpack/plugins/next-trace-entrypoints-plugin.js
                                  ./node_modules/next/dist/build/webpack-config.js
                                  ./node_modules/next/dist/server/dev/hot-reloader.js
                                  ./node_modules/next/dist/server/dev/next-dev-server.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/next/dist/compiled/webpack/bundle5.js
                                  Module not found: Can't resolve 'next/dist/build/webpack/plugins/terser-webpack-plugin' in '/codebuild/output/src400048429/src/fox/apps/news/node_modules/next/dist/compiled/webpack'
                                  Import trace for requested module:
                                  ./node_modules/next/dist/compiled/webpack/webpack.js
                                  ./node_modules/next/dist/server/config-utils.js
                                  ./node_modules/next/dist/server/config.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  ./node_modules/next/dist/compiled/webpack/webpack.js
                                  Module not found: Can't resolve 'webpack5/lib/javascript/BasicEvaluatedExpression' in '/codebuild/output/src400048429/src/fox/apps/news/node_modules/next/dist/compiled/webpack'
                                  Import trace for requested module:
                                  ./node_modules/next/dist/server/config-utils.js
                                  ./node_modules/next/dist/server/config.js
                                  ./node_modules/next/dist/server/next.js
                                  ./node_modules/@sentry/nextjs/dist/utils/instrumentServer.js
                                  ./node_modules/@sentry/nextjs/dist/index.server.js
                                  ./pages/_error.tsx
                                  ./node_modules/next/dist/build/webpack/loaders/next--loader/index.js?page=%2F404&absolutePagePath=private-next-pages%2F404.tsx&absoluteAppPath=private-next-pages%2F_app.tsx&absoluteDocumentPath=private-next-pages%2F_document.tsx&absoluteErrorPath=private-next-pages%2F_error.tsx&absolute404Path=private-next-pages%2F404.tsx&distDir=private-dot-next&buildId=rIjD7m7Q-WXbLYtah-ekz&assetPrefix=&generateEtags=true&poweredByHeader=true&canonicalBase=&basePath=&runtimeConfig=&previewProps=%7B%22previewModeId%22%3A%22bcfc63a153299404ecbd1fae2fbb31e3%22%2C%22previewModeSigningKey%22%3A%22ac823193573e81c60585d2bea65c82e7ea9e9063a56560df52b4e02dd962bde7%22%2C%22previewModeEncryptionKey%22%3A%222c193d2c6a4388292f4f57d6af4b84f922383cdfe8af929918c455afe1f4464d%22%7D&loadedEnvFiles=W10%3D&i18n=!
                                  > webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
                                  info  - Checking validity of types...
                                  info  - Creating an optimized production build...
                                  info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
                                  info  - Using external babel configuration from /codebuild/output/src400048429/src/fox/apps/news/.babelrc
                                  [?25h
Terminating logging...
Terminating logging...

Expected Behavior

A normal build should deploy like this, and before I switched to a monorepo I used Next 12 the day it came out and it compiled fine for a single app.

2021-10-27T07:15:37.731Z [INFO]: info  - Generating static pages (3/3)
2021-10-27T07:15:38.242Z [INFO]: info  - Finalizing page optimization...
2021-10-27T07:15:38.244Z [INFO]: 
2021-10-27T07:15:38.261Z [INFO]: Page                                Size     First Load JS
                                 ┌ λ /                               13.6 kB         345 kB
                                 ├   /_app                           0 B             245 kB
                                 ├ ○ /404 (2515 ms)                  627 B           246 kB
                                 ├ ○ /500 (2400 ms)                  627 B           246 kB
                                 ├ ○ /create-restaurant (2553 ms)    5.66 kB         308 kB
                                 ├ λ /edit-restaurant/[id]           7.59 kB         316 kB
                                 ├ λ /news                           5.34 kB         257 kB
                                 ├ λ /news/post/[id]                 13.2 kB         265 kB
                                 ├ λ /restaurant/[id]                49.5 kB         360 kB
                                 ├ λ /s                              3.44 kB         307 kB
                                 ├   └ css/bef3b7e0e6ff82409e5b.css  1.31 kB
                                 └ λ /s/[city]                       3.44 kB         307 kB
                                 + First Load JS shared by all       245 kB
                                 ├ chunks/framework.ee7f4d.js      42.7 kB
                                 ├ chunks/main.b31750.js           23.7 kB
                                 ├ chunks/pages/_app.1d3a34.js     176 kB
                                 ├ chunks/webpack.4d9376.js        3.22 kB
                                 └ css/633c699f4ca314253cb4.css    28.1 kB
2021-10-27T07:15:38.261Z [INFO]: λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
                                 ○  (Static)  automatically rendered as static HTML (uses no initial props)
                                 ●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
                                 (ISR)     incremental static regeneration (uses revalidate in getStaticProps)
2021-10-27T07:15:38.387Z [INFO]: Done in 75.62s.
2021-10-27T07:15:38.392Z [INFO]: Starting SSR Build...
2021-10-27T07:22:19.498Z [INFO]: SSR Build Complete.
2021-10-27T07:22:20.850Z [INFO]: # Completed phase: build
2021-10-27T07:22:20.876Z [INFO]: ## Build completed successfully
2021-10-27T07:22:20.878Z [INFO]: # Starting caching...
2021-10-27T07:22:21.031Z [INFO]: # Creating cache artifact...
2021-10-27T07:22:52.827Z [INFO]: # Cache artifact is: 1025MB
2021-10-27T07:22:52.954Z [INFO]: # Uploading cache artifact...
2021-10-27T07:23:10.976Z [INFO]: # Caching completed
2021-10-27T07:23:11.078Z [INFO]: No custom headers found.
2021-10-27T07:23:11.096Z [INFO]: # Starting build artifact upload process...
2021-10-27T07:23:19.743Z [INFO]: # Build artifact is: 90MB
2021-10-27T07:23:19.788Z [INFO]: # Build artifact is: 90MB
2021-10-27T07:23:19.789Z [INFO]: # Uploading build artifact '__artifacts.zip'...
2021-10-27T07:23:19.877Z [INFO]: # Uploading build artifact '__artifactsHash.zip'...
2021-10-27T07:23:21.014Z [INFO]: # Build artifact upload completed
2021-10-27T07:23:21.016Z [INFO]: # Starting environment caching...
2021-10-27T07:23:21.017Z [INFO]: # Uploading environment cache artifact...
2021-10-27T07:23:21.093Z [INFO]: # Environment caching completed
Terminating logging...

To Reproduce

Here are the related GitHub issues I’ve commented on or opened that revolve around this build/deployment issue. Amplify Working Build (Should’ve worked) https://github.com/bmvantunes/aws-amplify-deploy-test-nx/issues/1#issuecomment-970886347 This worked for a moment although styled-components caused issues saying the CSS prop wasn’t valid.

Amplify Support Case https://github.com/aws-amplify/amplify-console/issues/2377#issuecomment-968130246 I opened a case with the AWS team and this repo will be where it continues

NX Issue about Amplify https://github.com/nrwl/nx/issues/6172#issuecomment-966675753

Amplify deployment and SWC build issue (Methods for building do not work) https://github.com/aws-amplify/amplify-console/issues/1866#issuecomment-965795422 estyh solved this issue by using a serverless config but it’s not ideal. serverless-nextjs/serverless-next.js#1845

To Reproduce

I can’t make my repo public but I can specify all the major things that you need.

Package Json Located in root. (It’s big, I plan to slim it down)

{
  "name": "fox",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "nx": "nx",
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test",
    "lint": "nx workspace-lint && nx lint",
    "e2e": "nx e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-generator": "nx workspace-generator",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
  "private": true,
  "dependencies": {
    "@dnd-kit/core": "^4.0.1",
    "@dnd-kit/sortable": "^5.0.0",
    "@googlemaps/js-api-loader": "^1.12.9",
    "@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
    "@mui/core": "^5.0.0-alpha.54",
    "@mui/lab": "^5.0.0-alpha.54",
    "@mui/material": "^5.1.0",
    "@nrwl/next": "13.1.4",
    "@reduxjs/toolkit": "^1.6.2",
    "@sentry/nextjs": "^6.14.3",
    "@styled-icons/boxicons-logos": "^10.38.0",
    "@styled-icons/boxicons-regular": "^10.38.0",
    "@styled-icons/boxicons-solid": "^10.38.0",
    "@styled-icons/entypo": "^10.34.0",
    "@styled-icons/evaicons-outline": "^10.34.0",
    "@styled-icons/fluentui-system-filled": "^10.35.0",
    "@styled-icons/fluentui-system-regular": "^10.35.0",
    "@styled-icons/foundation": "^10.34.0",
    "@styled-icons/heroicons-outline": "^10.36.0",
    "@styled-icons/ionicons-outline": "^10.34.0",
    "@styled-icons/ionicons-solid": "^10.34.0",
    "@styled-icons/material": "^10.34.0",
    "@styled-icons/octicons": "^10.44.0",
    "@tinymce/tinymce-react": "^3.13.0",
    "aws-amplify": "^4.3.6",
    "axios": "^0.24.0",
    "core-js": "^3.19.1",
    "date-fns": "^2.25.0",
    "filepond": "^4.30.3",
    "filepond-plugin-file-poster": "^2.4.4",
    "filepond-plugin-file-validate-size": "^2.2.5",
    "filepond-plugin-file-validate-type": "^1.2.6",
    "filepond-plugin-image-preview": "^4.6.10",
    "formik": "^2.2.9",
    "framer-motion": "^5.3.0",
    "google-map-react": "^2.1.10",
    "graphql": "^16.0.1",
    "graphql-request": "^3.6.1",
    "html-react-parser": "^1.4.0",
    "next": "^12.0.5-canary.0",
    "next-compose-plugins": "^2.2.1",
    "next-seo": "^4.28.1",
    "next-transpile-modules": "^9.0.0",
    "nextjs-cors": "^2.1.0",
    "nx": "^13.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-filepond": "^7.1.1",
    "react-input-mask": "^3.0.0-alpha.2",
    "react-is": "17.0.2",
    "react-merge-refs": "^1.1.0",
    "react-query": "^3.32.1",
    "react-redux": "^7.2.6",
    "react-select": "^5.2.1",
    "react-use": "^17.3.1",
    "regenerator-runtime": "0.13.9",
    "styled-components": "^5.3.3",
    "swiper": "^7.2.0",
    "tslib": "^2.3.1",
    "use-places-autocomplete": "^1.10.0",
    "uuid": "^8.3.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@next/bundle-analyzer": "^12.0.3",
    "@nrwl/cli": "13.1.4",
    "@nrwl/cypress": "13.1.4",
    "@nrwl/eslint-plugin-nx": "13.1.4",
    "@nrwl/jest": "13.1.4",
    "@nrwl/linter": "13.1.4",
    "@nrwl/react": "13.1.4",
    "@nrwl/tao": "13.1.4",
    "@nrwl/web": "13.1.4",
    "@nrwl/workspace": "13.1.4",
    "@storybook/react": "^6.3.12",
    "@testing-library/react": "12.1.2",
    "@testing-library/react-hooks": "7.0.2",
    "@trumbitta/nx-plugin-unused-deps": "^1.10.0",
    "@types/google-map-react": "^2.1.3",
    "@types/jest": "27.0.2",
    "@types/node": "^16.11.7",
    "@types/react": "^17.0.34",
    "@types/react-dom": "^17.0.11",
    "@types/react-is": "17.0.3",
    "@types/react-redux": "^7.1.20",
    "@types/styled-components": "^5.1.15",
    "@types/swiper": "^5.4.3",
    "@types/uuid": "^8.3.1",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "babel-jest": "27.3.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-plugin-styled-components": "^1.13.3",
    "cross-env": "^7.0.3",
    "cypress": "^9.0.0",
    "dotenv": "^10.0.0",
    "duplicate-package-checker-webpack-plugin": "^3.0.0",
    "eslint": "7.32.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-airbnb-typescript": "^15.0.0",
    "eslint-config-next": "^12.0.3",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-plugin-cypress": "^2.12.1",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^7.0.4",
    "jest": "^27.3.1",
    "lint-staged": "^11.2.6",
    "ngx-deploy-npm": "^3.0.5",
    "nock": "^13.2.1",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.4.1",
    "react-test-renderer": "17.0.2",
    "rimraf": "^3.0.2",
    "style-loader": "^3.3.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.4.4",
    "typescript-plugin-styled-components": "^2.0.0"
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}

TS Config Base Located in the root of the project, created by NX.

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "typeRoots": ["styled.d.ts", "types"],
    "paths": {
      "@fox-dls/banner": ["packages/banner/src/index.ts"],
      "@fox-dls/card": ["packages/card/src/index.ts"],
      "@fox-dls/carousels": ["packages/carousels/src/index.ts"],
      "@fox-dls/checkbox": ["packages/checkbox/src/index.ts"],
      "@fox-dls/datepicker": ["packages/datepicker/src/index.ts"],
      "@fox-dls/drawer": ["packages/drawer/src/index.ts"],
      "@fox-dls/editor": ["packages/editor/src/index.ts"],
      "@fox-dls/error": ["packages/error/src/index.ts"],
      "@fox-dls/filepond": ["packages/filepond/src/index.ts"],
      "@fox-dls/footer": ["packages/footer/src/index.ts"],
      "@fox-dls/hours": ["packages/hours/src/index.ts"],
      "@fox-dls/layout": ["packages/layout/src/index.ts"],
      "@fox-dls/loading": ["packages/loading/src/index.ts"],
      "@fox-dls/map": ["packages/map/src/index.ts"],
      "@fox-dls/mobile-navigation": ["packages/mobile-navigation/src/index.ts"],
      "@fox-dls/modal": ["packages/modal/src/index.ts"],
      "@fox-dls/navigation": ["packages/navigation/src/index.ts"],
      "@fox-dls/overlays": ["packages/overlays/src/index.ts"],
      "@fox-dls/pulse": ["packages/pulse/src/index.ts"],
      "@fox-dls/routes": ["packages/routes/src/index.ts"],
      "@fox-dls/select": ["packages/select/src/index.ts"],
      "@fox-dls/skeleton": ["packages/skeleton/src/index.ts"],
      "@fox-dls/textfield": ["packages/textfield/src/index.ts"],
      "@fox-dls/theme": ["packages/theme/src/index.ts"],
      "@fox-dls/timepicker": ["packages/timepicker/src/index.ts"],
      "@fox-dls/utils": ["packages/utils/src/index.ts"],
      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
    },
    "allowJs": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "noFallthroughCasesInSwitch": true,
    "jsx": "preserve",
    "noImplicitAny": false
  },
  "exclude": ["node_modules", "tmp"]
}

NX Config Located in the root of the project. Created by NX.

{
  "npmScope": "fox",
  "affected": {
    "defaultBase": "main"
  },
  "cli": {
    "defaultCollection": "@nrwl/next"
  },
  "workspaceLayout": {
    "libsDir": "packages"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "@nrwl/workspace/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDependencies": {
    "build": [
      {
        "target": "build",
        "projects": "dependencies"
      }
    ]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "babel": true
      }
    },
    "@nrwl/next": {
      "application": {
        "style": "styled-components",
        "linter": "eslint",
        "swc": false
      }
    }
  },
  "defaultProject": "fox"
}

The following config files will be of my News app. The main app is exactly like the news app.

NextJS Config I had transpile node_moduels originally although I switch to YARN so I wouldn’t have to go through that BS and I could just use the resolution option.

const withPlugins = require('next-compose-plugins');
// const { withSentryConfig } = require('@sentry/nextjs');
const withNx = require('@nrwl/next/plugins/with-nx');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true'
});
/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const NextConfig = {
  eslint: {
    // Warning: This allows production builds to successfully complete even if
    // your project has ESLint errors.
    ignoreDuringBuilds: true
  },
  reactStrictMode: false,
  experimental: {
    externalDir: true
  },
  images: {
    formats: ['image/webp'],
    domains: [
      DOMAINS
    ]
  },
  env: {
    GMAPS_API: KEY
    GMAPS_DEV_API: KEY
  }
};
module.exports = withPlugins([
  NextConfig,
  // [withTM],
  [withBundleAnalyzer],
  // [withSentryConfig, { silent: true }],
  [withNx, { nx: { svgr: true } }]
]);

Package Json of App It’s really basic and I don’t use it. It exists to tell Amplify to set up the project as NextJS SSR.

{
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "scripts": {
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "*"
  },
  "resolutions": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
  }
}

Babel SWC styled components in canary isn’t ready and it didn’t work well so I’m sticking to babel.

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "pure": true, "ssr": true, "displayName": true }]
  ]
}

build/deployment

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
juice0xcommented, Jan 30, 2022

ah nvm fixed it by upgrading netlify nextjs plugin to 4.2.1

1reaction
Rafcincommented, Jan 17, 2022

@vladanpaunovic I forgot I created this issue on the Next repo. The deployment issues had been caused by a mix of Next 12, NX, and Sentry. At the moment Next 12 and Sentry seem to work fine, and the Amplify issue boiled down to the Amplify build system not yet supporting Next 12 and being unable to properly deploy the NX output. I deployed a test application on Vercel that uses Next 12, Sentry, and NX. It deployed perfectly after updating to Next 12.0.6.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to Deploy Nx monorepos to Netlify
Deploying Nx monorepos to Netlify ; There's a slight issue though Netlify will start building and deploying every ; Now let's imagine a...
Read more >
Deploying Next.js applications to Vercel - Nx
Deploying Next.js applications to Vercel · Configure your Vercel project's settings appropriately · Skipping build if the application is not affected · Next...
Read more >
Nx, Next.js, and Module Federation - Valor Software
This project will show, how to create the basis for a fully scalable application both in production and in development. In it, we...
Read more >
Next.js App as part of a monorepo : r/nextjs - Reddit
Hello there, I'm working on a project that has two components: A Next.js App that handles all the front-end, authentication, ...
Read more >
Next failed to load SWC binary - Stack Overflow
I've tried uninstalling node and reinstalling it again with version 16.13 but without success, on the vercel page, but unsuccessful so far. Any ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

next/head deduping process can duplicate and overwrite dynamically inserted header tags

Next page

The "path" argument must be of type string or an instance of Buffer or URL (`react-dom`)