NextJS error on launch: Module not found: Can't resolve 'net'

[azuken]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.26.0

Framework Version

13.0.6

Link to Sentry event

No response

Steps to Reproduce

Update from ^7.21.1 to ^7.26.0 leads to an initialization error I did not have before.

I already have a webpack configuration which tell that NodeJS dependencies must not be resolved :

webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve = {
        ...config.resolve,
        fallback: {
          // fixes proxy-agent dependencies
          net: false,
          dns: false,
          tls: false,
          assert: false,
          // fixes sentry dependencies
          process: false
        }
      };
    }
    return config;
  },
  sentry: {
    hideSourceMaps: true
  }

I cannot tell why this is happening.

Expected Result

Have no error on next command

Actual Result

error - ./node_modules/https-proxy-agent/dist/agent.js:15:0
Module not found: Can't resolve 'net'

Import trace for requested module:
./node_modules/https-proxy-agent/dist/index.js
./src/services/xx/xx.ts
./src/utils/xx/xx.ts
./src/utils/xx/xx.ts
./src/utils/xx/xx/Error.ts
./src/pages/_error.tsx

https://nextjs.org/docs/messages/module-not-found

[lforst]

That error seems funky. Just a sanity check: Can you try deleting your node_modules folder and reinstall your dependencies?

[azuken]

Already tried, I do a full cleanup of my project folder when error like these occurs.

For more context, I use HttpsProxyAgent in my Axios requests. Here is a sample :

Axios.post<T>(path, body, {
      headers: {
        ...
      },
      proxy: false,
      httpsAgent: HTTPS_PROXY ? new HttpsProxyAgent.HttpsProxyAgent(HTTPS_PROXY) : null
    })
      .then(this.responseHandler)
      .catch(this.catchErrorHandler);

[azuken]

And for the record, I've tried version 7.22.0 (I update @sentry/integrations package in the same time) and this error also occurs.

EDIT : You should also know that my proxy usage is only on production servers, not in local, and this error occurs in local.

[lforst]

Hm, the node SDK also has a https-proxy-agent dependency. Maybe it's related to that. Pretty sure we didn't change anything relevant in that version...

Could you provide a minimal reproduction repo we could clone to debug this further?

I have to say this resolving business looks a bit funky.

[topaxi]

I have a similar issue where fs/promises can't be resolved once sentry is installed,this was working before in version 7.21.0 but stopped working when I try to upgrade.

master/…//portal-frontend]% npm run build

> portal-frontend@0.1.0 build
> cross-env NODE_ENV=production next build

info  - Loaded env from /Users/damsen/projects/fs24/portal-frontend/.env.local
info  - Loaded env from /Users/damsen/projects/fs24/portal-frontend/.env.production
info  - Linting and checking validity of types
info  - Creating an optimized production build
Failed to compile.

./mocks/handlers/graphql.contentful.com/index.ts
Module not found: Can't resolve 'fs/promises' in '/Users/damsen/projects/fs24/portal-frontend/mocks/handlers/graphql.contentful.com'

Import trace for requested module:
./mocks/handlers/graphql.contentful.com/index.ts
./mocks/server.ts
./src/test-utils/mock-server.ts
./src/test-utils/index.ts

./mocks/handlers/graphql.contentful.com/index.ts
Module not found: Can't resolve 'fs' in '/Users/damsen/projects/fs24/portal-frontend/mocks/handlers/graphql.contentful.com'

Import trace for requested module:
./mocks/handlers/graphql.contentful.com/index.ts
./mocks/server.ts
./src/test-utils/mock-server.ts
./src/test-utils/index.ts


> Build failed because of webpack errors

[lforst]

@topaxi can you share your next.js config?

[azuken]

Hm, the node SDK also has a https-proxy-agent dependency. Maybe it's related to that. Pretty sure we didn't change anything relevant in that version...

Could you provide a minimal reproduction repo we could clone to debug this further?

I have to say this resolving business looks a bit funky.

I've tried with a new Next project and adding Axios, HttpsProxyAgent and Sentry to dependencies, not reproducing the error...

[lforst]

@azuken Can you share your entire Next.js config?

[azuken]

const withImages = require('next-images');
const { withSentryConfig } = require('@sentry/nextjs');
const { i18n } = require('./next-i18next.config');
const { redirects } = require('./next-redirects.config');

const nextConfig = {
  redirects,
  images: {
    disableStaticImages: true,
    domains: [
      ...
    ]
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve = {
        ...config.resolve,
        fallback: {
          // fixes proxy-agent dependencies
          net: false,
          dns: false,
          tls: false,
          assert: false,
          // fixes next-i18next dependencies
          path: false,
          fs: false,
          // fixes mapbox dependencies
          events: false,
          // fixes sentry dependencies
          process: false
        }
      };
    }
    config.module.exprContextCritical = false; // Workaround to suppress next-i18next warning, see https://github.com/isaachinman/next-i18next/issues/1545

    return config;
  },
  i18n,
  sentry: {
    hideSourceMaps: true
  },
  experimental: {
    largePageDataBytes: 192 * 1000
  }
};

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 = _phase => {
  const plugins = [withImages];
  return plugins.reduce((acc, plugin) => plugin(acc), {
    ...withSentryConfig(nextConfig, SentryWebpackPluginOptions)
  });
};

nextjs-i18n.config.js

const intervalPlural = require('i18next-intervalplural-postprocessor');

module.exports = {
  i18n: {
    locales: ['fr-FR', 'en-US', 'es-ES', 'de-DE', 'catchAll'],
    defaultLocale: 'catchAll'
  },
  defaultNS: 'translation',
  serializeConfig: false,
  fallbackLng: 'fr-FR',
  interpolation: {
    escapeValue: false
  },
  react: {
    transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p', 'u']
  },
  use: [intervalPlural],
  allowObjectInHTMLChildren: true
};

next-redirects.config.js

const locale = false;
const permanent = true;

module.exports = {
  async redirects() {
    return [
      { source: '/xxxx*', destination: '/fr-FR/xxxx*', permanent, locale },
...
    ];
  }
};

[lforst]

@azuken Your config doesn't take into account that plugins may return functions. Try this:

const withImages = require('next-images');
const { withSentryConfig } = require('@sentry/nextjs');
const { i18n } = require('./next-i18next.config');
const { redirects } = require('./next-redirects.config');

const nextConfig = {
  redirects,
  images: {
    disableStaticImages: true,
    domains: [
      ...
    ]
  },
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve = {
        ...config.resolve,
        fallback: {
          // fixes proxy-agent dependencies
          net: false,
          dns: false,
          tls: false,
          assert: false,
          // fixes next-i18next dependencies
          path: false,
          fs: false,
          // fixes mapbox dependencies
          events: false,
          // fixes sentry dependencies
          process: false
        }
      };
    }
    config.module.exprContextCritical = false; // Workaround to suppress next-i18next warning, see https://github.com/isaachinman/next-i18next/issues/1545

    return config;
  },
  i18n,
  sentry: {
    hideSourceMaps: true
  },
  experimental: {
    largePageDataBytes: 192 * 1000
  }
};

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 = (...args) => {
  const sentrifiedConfig = withSentryConfig(nextConfig, SentryWebpackPluginOptions)(...args);

  const plugins = [withImages];

  return plugins.reduce(
    (config, plugin) => {
      const appliedPlugin = plugin(config);

      return typeof appliedPlugin === 'function'
        ? appliedPlugin(...args)
        : appliedPlugin;
    },
    sentrifiedConfig,
  );
};

[azuken]

Finally works ! 😃 Thank you for the advice.

Can you please explain a little more what and why you modified ?

[lforst]

I suggest looking at this thread where I go into a bit more detail: #6339

TLDR: Plugins may return functions and you need to pass all args from the module.exports function to it OR you put the sentry plugin last like the docs suggest.

[jeanhdev]

On my end, the error was due to the import in client-side code of a server-side package !
Be careful with client / server-side imports mismatch and it might do the trick as it did for me.

[dragos199993]

This usually happens when you forget to add 'use server' on a server action file. Happened to me couple of times 👍 . Not really an issue, but on nextjs side the error message can be better.

[sujjeee]

@dragos199993 Thanks, man. It's been 20 minutes searching for what the issue is, and it turns out I forgot to add 'use server'

[estubmo]

This usually happens when you forget to add 'use server' on a server action file. Happened to me couple of times 👍 . Not really an issue, but on nextjs side the error message can be better.

Thanks @dragos199993

This should be higher. For visibility:

This usually happens when you forget to add 'use server' on a server action file.

[JasonSouthin]

Thanks @jeanhdev and @dragos199993 , that as my error lol.