Missing webpack dependency

jonahallibone commented 3 years ago

Issue Summary

When deploying, it fails with the error

ModuleNotFoundError: Module not found: Error: Can't resolve 'webpack' in '/home/runner/work/privco-frontend/privco-frontend/node_modules/@next/react-refresh-utils'

Actual behavior

I removed useServerlessTrace option and I am not unable to build and deploy my application. I'd prefer to not put it back.

Steps to reproduce

Attempt building with useServerlessTrace option

Screenshots/Code/Configuration/Logs

stderr: 'Failed to compile.\n' +
    '\n' +
    "ModuleNotFoundError: Module not found: Error: Can't resolve 'webpack' in '/home/runner/work/privco-frontend/privco-frontend/node_modules/@next/react-refresh-utils'\n" +
    '\n' +
    '\n' +
    '> Build error occurred\n' +
    'Error: > Build failed because of webpack errors\n' +
    '    at /home/runner/work/privco-frontend/privco-frontend/node_modules/next/dist/build/index.js:397:19\n' +
    '    at async Span.traceAsyncFn (/home/runner/work/privco-frontend/privco-frontend/node_modules/next/dist/telemetry/trace/trace.js:60:20)\n' +
    '    at async Object.build [as default] (/home/runner/work/privco-frontend/privco-frontend/node_modules/next/dist/build/index.js:77:25)\n' +
    'npm ERR! code ELIFECYCLE\n' +
    'npm ERR! errno 1\n' +
    'npm ERR! privco-frontend@1.0.18 build: `next build`\n' +
    'npm ERR! Exit status 1\n' +
    'npm ERR! \n' +
    'npm ERR! Failed at the privco-frontend@1.0.18 build script.\n' +
    'npm ERR! This is probably not a problem with npm. There is likely additional logging output above.\n' +
    '\n' +
    'npm ERR! A complete log of this run can be found in:\n' +
    'npm ERR!     /home/runner/.npm/_logs/2021-09-14T22_48_04_274Z-debug.log',
  failed: true,
  timedOut: false,
  isCanceled: false,
  killed: false
}

`serverless.yml`

privco-frontend:
  component: "@sls-next/serverless-component@3.4.0-alpha.6"
  inputs:
    roleArn: arn:aws:iam::272119801063:role/serverlessDeploymentRole
    publicDirectoryCache:
      value: public, max-age=31536000, must-revalidate
      test: /\.(gif|jpe?g|jp2|tiff|css|png|webp|bmp|svg|ico|woff2?)$/i
    bucketName: ${env.BUCKET_NAME}
    cloudfront:
      distributionId: ${env.CLOUDFRONT_DISTRO}
      defaults:
        forward:
          headers: [Host]
    name:
      defaultLambda: ${env.DEFAULT_LAMBDA_NAME}
      apiLambda: ${env.API_LAMBDA_NAME}
      imageLambda: ${env.IMAGE_LAMBDA_NAME}
    timeout:
      imageLambda: 30
    memory:
      imageLambda: 2048
    build:
      env:
        SENDGRID_API_KEY: ${env.SENDGRID_API_KEY}
      cmd: npm
      args: [run, build]

Versions

I've tried on every version since 3.4.0-alpha.1, including the new alpha's using npx @sls-next/serverless-patched --debug

OS/Environment: Github Actions
@sls-next/serverless-component version: 3.4.0-alpha.1 - 3.4.0-alpha.6
Next.js version: 11.1.1

Checklist

[x] You have reviewed the README and FAQs, which answers several common questions.
[x] You have reviewed our DEBUGGING wiki and have tried your best to include complete information and reproduction steps (including your configuration) as is possible.
[x] You have first tried using the most recent latest or alpha @sls-next/serverless-component release version, which may have already fixed your issue or implemented the feature you are trying to use. Note that the old serverless-next.js component and the serverless-next.js plugin are deprecated and no longer maintained.

jonahallibone commented 3 years ago

While I'm here, I'd love some clarification on useServerlessTraceTarget. It seems like it was removed from the input's table in the readme.md but it's mentioned immediately below for making lighter pages. It seems like Vercel deprecated it sometimes, and other times it seems like it's still in use? The Sentry documentation, for instance, explicitly recommends it. If you have any more info that'd be great!

dphang commented 3 years ago

I think it has to do with serverless trace using the NFT module to trace dependencies rather than webpack. But I thought Vercel had already deprecated their serverless trace target because they changed code splitting to be more efficient that it's no longer needed? (that's why you see the chunks in .next/serverless/chunks/...)

Do you know where else it's being used by Vercel?

I think you can resolve by adding webpack to your dependencies, but seems like a problem on Next.js side? As we don't use webpack in this component. It looks like @next/react-refresh-utils (per your logs) may need it: https://github.com/vercel/next.js/blob/canary/packages/react-refresh-utils/package.json

dphang commented 3 years ago

For sentry, I don't use it but I'm guessing why it needs experimental-serverless-trace is because it could not be bundled correctly via webpack. Serverless trace was supposed to create trace all the dependencies and generate a node_modules. If you are using Sentry and it's not working, it may possible neednode_modules/@sentry/nextjs into the lambda directories?

jonahallibone commented 3 years ago

@dphang I'm not sure if this will effect this project at all, but I was just in a webinar with Vercel + Sentry, and a Vercel Dev mentioned their new tracing for the serverless target will be landing in this next release. It seems it was based off of experimental-severless-trace despite what I've read from maintainers of next over the past year. It's currently available in the canary version of next, I wonder if that might break this projects build in some way?

odannyc commented 2 years ago

I'm also running into this exact issue. The issue only comes up when we try to import @sentry/next into our project. This ends up breaking our builds with webpack not found error.

I don't specify a target in my nextjs config so I'm assuming it's using the default (server).

I tried to add the useServerlessTrace: true option and the build passed but instantly our site broke with a Cloudfront 503 error. I wasn't able to debug because I had to rollback instantly.

@jonahallibone @dphang is there something else I can try? I went down the rabbit hole of adding webpack, then it kept asking me to install dependencies and it was just never ending so I stopped doing that.

jonahallibone commented 2 years ago

@odannyc using experimental-serverless-trace worked for me. On Vercel, not using any options for target at all also worked fine. But I am still curious if @dphang could perhaps remove the target configuration altogether and see what happens, as that key in next.config.js is deprecated entirely. I believe the default traced output should work, even if for some people the tree shaking doesn't work properly for MUI.

serverless-nextjs / serverless-next.js