Project can't build due to @sentry/next-js integration

frmysantana commented 3 years ago

[X] Review the documentation: https://docs.sentry.io/
[X] Search for existing issues: https://github.com/getsentry/sentry-javascript/issues
[X] Use the latest release: https://github.com/getsentry/sentry-javascript/releases
[ ] Provide a link to the affected event from your Sentry account

Package + Version

[ ] @sentry/browser
[ ] @sentry/node
[ ] raven-js
[ ] raven-node (raven for node)
[X] other: @sentry/nextjs

Version:

6.12.0

Description

Our project runs fine locally and sentry is able to register errors but running our build script leads to webpack errors saying that we are missing modules (either @zeit/next-less, @zeit/next-sass, or @zeit/next-stylus). Here is our next.config.js:

/* eslint-disable @typescript-eslint/no-var-requires */
const { withSentryConfig } = require("@sentry/nextjs")

let BackendCDKOUT
try {
  BackendCDKOUT = require("../backend/output.json")
} catch (e) {
  BackendCDKOUT = {}
}

const moduleExports = {
  experimental: {
    externalDir: true
  },
  images: {
    domains: ["via.placeholder.com"],
    disableStaticImages: true
  },
  async rewrites() {
    if (
      process.env.NODE_ENV !== null &&
      process.env.NODE_ENV !== undefined &&
      process.env.NODE_ENV.toLowerCase() === "production" &&
      BackendCDKOUT !== null &&
      BackendCDKOUT !== undefined &&
      Object.keys(BackendCDKOUT).includes("BackendStack") &&
      Object.keys(BackendCDKOUT.BackendStack).includes("ApiEndpoint")
    ) {
      return [
        {
          source: "/api/graphql-production",
          destination: `${BackendCDKOUT.BackendStack.ApiEndpoint}graphql`
        }
      ]
    } else {
      const localPort = process.env["SERVER_PORT"] ?? 4000
      const localHostName = process.env["SERVER_NAME"] ?? "localhost"
      const redirects = [
        {
          source: "/graphql-local",
          destination: `http://${localHostName}:${localPort}/graphql`
        }
      ]
      if (
        BackendCDKOUT !== null &&
        BackendCDKOUT !== undefined &&
        Object.keys(BackendCDKOUT).includes("BackendStack") &&
        Object.keys(BackendCDKOUT.BackendStack).includes("ApiEndpoint")
      ) {
        redirects.push({
          source: "/graphql-aws",
          destination: `${BackendCDKOUT.BackendStack.ApiEndpoint}graphql`
        })
      }
      return redirects
    }
  }
}

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore

  silent: true // Suppresses all logs
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
}

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions)

As you can see, we do not have a serverless target in our config. I've tried using target: experimental-serverless-trace just in case but it didn't help. Disabling the webpack plugin to avoid source maps (i.e. setting disableServerWebpackPlugin and disableClientWebpackPlugin to true) didn't work. Any help would be greatly appreciated.

Let me know if any other information is needed in order to debug this.

AbhiPrasad commented 3 years ago

Hey, thanks for writing in - appreciate the detailed report. What Next and Webpack version are you on?

You mention that there are webpack errors relating to @zeit/next-less and/or @zeit/next-stylus, but I don't see them being used in your next config - any idea why it still errors then?

Also, if you could include the specific webpack build logs, that would be great help for debugging.

frmysantana commented 3 years ago

Thanks for the help, @AbhiPrasad! We're using Next version 11.1.2, Webpack 5.51.1.

Regarding the packages not being used in the config - we have no idea. Like i mentioned in the original comment, our dev script works with no issues. It's only when we run our build script that those ModuleNotFound errors show up. We suspect it has something to do with generating sourcemaps, but even when we turn off the sourcemap generation using the disable<Server,Client>WebpackPlugin options, we still see those errors.

Here's the webpack output:

info  - Creating an optimized production build...
    at makeError (/.../frontend/node_modules/execa/lib/error.js:60:11)
    at handlePromise (/.../frontend/node_modules/execa/index.js:118:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at Builder.build (/.../frontend/node_modules/@sls-next/lambda-at-edge/dist/build.js:348:13) {
  shortMessage: 'Command failed with exit code 1: ./node_modules/.bin/next build',
  command: './node_modules/.bin/next build',
  escapedCommand: '"./node_modules/.bin/next" build',
  exitCode: 1,
  signal: undefined,
  signalDescription: undefined,
  stdout: 'info  - Loaded env from /.../frontend/.env\n' +
    'info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5\n' +
    'info  - Checking validity of types...\n' +
    '\n' +
    './pages/_app.tsx\n' +
    "116:6  Warning: React Hook useEffect has a missing dependency: 'listener'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps\n" +
    '\n' +
    './pages/auth/oauth-callback-s.tsx\n' +
    "51:6  Warning: React Hook useEffect has missing dependencies: 'appContext' and 'query.shop'. Either include them or remove the dependency array.  react-hooks/exhaustive-deps\n" +
    "63:6  Warning: React Hook useEffect has a missing dependency: 'user?.attributes.brandId'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps\n" +
    '\n' +
    './pages/onboarding/success.tsx\n' +
    "20:6  Warning: React Hook useEffect has a missing dependency: 'refreshUser'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps\n" +
    '\n' +
    './components/DevInfo.tsx\n' +
    '13:16  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types\n' +
    '\n' +
    './components/Icon.stories.js\n' +
    '42:25  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types\n' +
    '\n' +
    './components/Tab.stories.js\n' +
    '21:22  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types\n' +
    '\n' +
    './components/Tabs.stories.js\n' +
    '18:22  Warning: Missing return type on function.  @typescript-eslint/explicit-module-boundary-types\n' +
    '\n' +
    './components/Upload.tsx\n' +
    '22:6  Warning: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any\n' +
    "37:5  Warning: React Hook useCallback has a missing dependency: 'brandId'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps\n" +
    "53:7  Warning: Do not use <img>. Use Image from 'next/image' instead. See https://nextjs.org/docs/messages/no-img-element.  @next/next/no-img-element\n" +
    '\n' +
    'Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules\n' +
    '\n' +
    'info  - Creating an optimized production build...',
  stderr: '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' +
    '\n' +
    'warn - You have enabled the JIT engine which is currently in preview.\n' +
    'warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.\n' +
    'Failed to compile.\n' +
    '\n' +
    "ModuleNotFoundError: Module not found: Error: Can't resolve '@zeit/next-sass' in '/.../frontend/node_modules/next/dist/build'\n" +
    '\n' +
    '\n' +
    '> Build error occurred\n' +
    'Error: > Build failed because of webpack errors\n' +
    '    at /.../frontend/node_modules/next/dist/build/index.js:15:924\n' +
    '    at async Span.traceAsyncFn (/.../frontend/node_modules/next/dist/telemetry/trace/trace.js:6:584)',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}
Subprocess exited with error 1

Also I forgot to mention that if I install @zeit/next-sass, webpack will say the @zeit/next-less package is missing. If I install that as well, then @zeit/next-stylus will be missing and after installing that sass is missing (we aren't using Sass) so I don't think installing those packages is the way to go.

AbhiPrasad commented 3 years ago

It's only when we run our build script that those ModuleNotFound errors show up

What is your build script? Is it just next build? Or do you have some extra steps in there? I noticed that you also have the tailwind css JIT active, do you have a special webpack/postcss setup related to that?

If possible a repro would be super helpful so we don't have to keep going back and forth, but if it's not possible no worries.

frmysantana commented 3 years ago

Our build script deploys Next.js to AWS Lamda@Edge using CDK. So it's a serverless environment that isn't quite the same as an out-of-the-box next build. I have tried using target: serverless and target: experimental-serverless-trace options but the build still breaks.

Tailwind just has the out-of-the-box postcss.config.js file. Unfortunately I don't think i can give a repo.

nguyenjk commented 2 years ago

do we have any update?

AbhiPrasad commented 2 years ago

@nguyenjk are you encountering this same issue? Do you mind opening a new issue with your sdk version and copy of your next.config.js?

nguyenjk commented 2 years ago

@AbhiPrasad , I was able to solve this issue with the help from above comment. web-app: component: '@sls-next/serverless-component@3.3.0' inputs: useServerlessTraceTarget: true

lobsterkatie commented 2 years ago

@frmysantana Can you say if @nguyenjk's fix works for you, using the current version of @sentry/nextjs?

github-actions[bot] commented 2 years ago

This issue has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you label it Status: Backlog or Status: In Progress, I will leave it alone ... forever!

"A weed is but an unloved flower." ― Ella Wheeler Wilcox 🥀

getsentry / sentry-javascript