Closed thngdude closed 1 year ago
@silentworks is this related to the recent next.js breaking 13 changes? Do we need to upgrade the auth-helpers?
I'm getting the same thing
@thorwebdev You may be onto something - I downgraded to next@12.3.0 and it worked.
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 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.
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
}
You need to install @supabase/auth-helpers-nextjs
explicitly.
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.
Worked for me as well^
Works for me as well. This should be the permanent fix: https://github.com/vercel/nextjs-subscription-payments/pull/182
Following what @silentworks said I updated
@supabase/auth-helpers-nextjs
to version0.6.1
(the latest as of today) in my package json and it fixed the issue for me.
This did the trick!
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:
If I add the following to next.config.js:
... then it runs, but I get another error:![Screen Shot 2023-04-11 at 10 38 55 AM](https://user-images.githubusercontent.com/1459102/231198056-6b25477d-afd4-4ce8-9acd-5bc59a49b7f4.png)
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?