Unable to run locally: Can't resolve 'fs'

[thngdude]

On node 18.12.0

Followed the instructions deploying to Vercel, then cloning the project locally, then installed packages, then ran npm run dev

Got the error:

error - ./node_modules/next/dist/compiled/@vercel/og/index.node.js:17950:0
Module not found: Can't resolve 'fs'

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

Import trace for requested module:
./node_modules/next/dist/server/web/spec-extension/image-response.js
./node_modules/next/server.js
./node_modules/@supabase/auth-helpers-nextjs/dist/index.js
./pages/_app.tsx

If I add the following to next.config.js:

webpack(config, { nextRuntime }) { 
    if (typeof nextRuntime === "undefined") {
      const { IgnorePlugin } = require("webpack");
      const ignoreFs = new IgnorePlugin({ resourceRegExp: /fs/ });
      config.plugins.push(ignoreFs);
    }

    return config;
  },

... then it runs, but I get another error:

I basically did the same thing of deploying this starter project in mid-Feb without issue.

Has anyone successfully cloned and run the project locally?

[thorwebdev]

@silentworks is this related to the recent next.js breaking 13 changes? Do we need to upgrade the auth-helpers?

[Vwing]

I'm getting the same thing

[thngdude]

@thorwebdev You may be onto something - I downgraded to next@12.3.0 and it worked.

[Animus-Development]

I've had the same issue this morning.

Taking a blend of stackoverflow and other advice whilst keeping Next.JS 13, I changed next.config.js to:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(config, { nextRuntime }) {
    if (typeof nextRuntime === "undefined") {
      const { IgnorePlugin } = require("webpack");
      const ignoreFs = new IgnorePlugin({ resourceRegExp: /fs/ });
      config.plugins.push(ignoreFs);
    }

    return config;
  }
};

module.exports = nextConfig;

Having done that I then got Error: Cannot find module react-merge-refs. I played around with dynamic imports & no ssr etc and also copy/pasted the function and imported it but received the same error.

What worked was pasting the function into the Button.tsx file

import cn from 'classnames';
import React, { forwardRef, useRef, ButtonHTMLAttributes } from 'react';

import LoadingDots from '@/components/ui/LoadingDots';

import styles from './Button.module.css';

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'slim' | 'flat';
  active?: boolean;
  width?: number;
  loading?: boolean;
  Component?: React.ComponentType;
}

const Button = forwardRef<HTMLButtonElement, Props>((props, buttonRef) => {
  function mergeRefs<T = any>(
    refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
  ): React.RefCallback<T> {
    return (value) => {
      refs.forEach((ref) => {
        if (typeof ref === "function") {
          ref(value);
        } else if (ref != null) {
          (ref as React.MutableRefObject<T | null>).current = value;
        }
      });
    };
  }

  const {
    className,
    variant = 'flat',
    children,
    active,
    width,
    loading = false,
    disabled = false,
    style = {},
    Component = 'button',
    ...rest
  } = props;
  const ref = useRef(null);
  const rootClassName = cn(
    styles.root,
    {
      [styles.slim]: variant === 'slim',
      [styles.loading]: loading,
      [styles.disabled]: disabled
    },
    className
  );
  return (
    <Component
      aria-pressed={active}
      data-variant={variant}
      ref={mergeRefs([ref, buttonRef])}
      className={rootClassName}
      disabled={disabled}
      style={{
        width,
        ...style
      }}
      {...rest}
    >
      {children}
      {loading && (
        <i className="pl-2 m-0 flex">
          <LoadingDots />
        </i>
      )}
    </Component>
  );
});

export default Button;

And this worked for me and it's deployed to Vercel happily.

Hope it helps!

[silentworks]

@silentworks is this related to the recent next.js breaking 13 changes? Do we need to upgrade the auth-helpers?

@thorwebdev yes, we would need to upgrade the auth-helpers version to the latest version in this example.

[karma0]

Just ran into this as well. I'm not sure that this is an ideal fix, but I was able to circumvent this issue by adding the following to the package.json:

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

[roveneliah]

You need to install @supabase/auth-helpers-nextjs explicitly.

[helloromero]

Following what @silentworks said I updated @supabase/auth-helpers-nextjs to version 0.6.1 (the latest as of today) in my package json and it fixed the issue for me.

[gooodsoil]

Worked for me as well^

[tijszwinkels]

Works for me as well. This should be the permanent fix: https://github.com/vercel/nextjs-subscription-payments/pull/182

[ishbaid]

Following what @silentworks said I updated @supabase/auth-helpers-nextjs to version 0.6.1 (the latest as of today) in my package json and it fixed the issue for me.

This did the trick!