I can't build the nextJs Code

[YnievesDotNet]

I have error when I run the command

npm run build

`$ npm run build

> client@0.1.0 build
> next build

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Loaded env from /Volumes/Data/public/client/.env.local
Failed to compile.

./pages/user/email/verify/[userID]/[hash].tsx:35:15
Type error: Argument of type '() => Promise<void>' is not assignable to parameter of type 'EffectCallback'.
  Type 'Promise<void>' is not assignable to type 'void | (() => void)'.
    Type 'Promise<void>' is not assignable to type '() => void'.
      Type 'Promise<void>' provides no match for the signature '(): void'.

  33 | 
  34 |     // Send api request to api upon mount of the component.
> 35 |     useEffect(async () => {
     |               ^
  36 |         const res = await props.verifyEmail(userID, hash, expires, signature);
  37 | 
  38 |         // Successfull verification.
info  - Creating an optimized production build .% 

How I can fix that?

Thanks

[YnievesDotNet]

Other think, I can put the code as JS only and publish static code, in the laravel public directory?

[niclas-timm]

Hi @YnievesDotNet , thanks for creating the issue :)!

I pushed a fix regarding your problems when running the build command. You can take the changes from the commit, but here is the gist of it:

• Under pages/user/email/verify/[userID]/[hash].tsx the callback in the useEffect function may not be async. As you probably didn't fork the repo the easiest way for you to adapt the change is to copy the following code from line 34 onwards:

  // Send api request to api upon mount of the component.
  useEffect(() => {
      const verify = async () => {
          const res = await props.verifyEmail(
              userID,
              hash,
              expires,
              signature
          );
  
          // Successfull verification.
          if (res.success) {
              setState({
                  ...state,
                  loading: false,
                  error: "",
              });
  
              // Redirect to Home route of the user after 3 seconds.
              setTimeout(() => {
                  router.push(process.env.NEXT_PUBLIC_USER_HOME_ROUTE);
              }, 3000);
              return;
          }
  
          // Set error message if verification failed.
          if (res.error) {
              setState({
                  ...state,
                  loading: false,
                  error: res.error,
              });
          }
      };
      verify();
  }, []);

• Next, there was a small mistake at pages/user/login.tsx. In line line 56, please change the return type from ReactElement to void

• Finally please delete the file store/alert/alertActions.tsx.

The build should now work as expected.

Regarding your second question: As stated in the docs, the repo does currently not support static generation due to the way Next.js works. We're dealing with a lot of dynamic data and have to reload the user every time the page refreshes. This forces us to use getInitialProps in _app.tsx, which disqualifies us from SSG. For reference see here: https://nextjs.org/docs/api-reference/data-fetching/getInitialProps

Hope this helps!

Thanks again for reaching out and best regards, Niclas

[YnievesDotNet]

Now have "CSRF token mismatch." error when try register