CapacitorGoogleAuth icon indicating copy to clipboard operation
CapacitorGoogleAuth copied to clipboard

CapacitorGoogleAuth with nextjs typescript build problem

Open mohameddev19 opened this issue 9 months ago • 1 comments

am using Capacitor in next js project when try ti use CapacitorGoogleAuth i have this error:

 Collecting page data  .D:\Clients_Projects\CIRCLES-UI-mobile\node_modules\@codetrix-studio\capacitor-google-auth\dist\esm\index.js:1
import { registerPlugin } from '@capacitor/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at mod.require (D:\Clients_Projects\CIRCLES-UI-mobile\node_modules\next\dist\server\require-hook.js:64:28)
    at require (node:internal/modules/helpers:179:18)
    at 6418 (D:\Clients_Projects\CIRCLES-UI-mobile\.next\server\pages\[locale]\auth\login.js:1:648)

> Build error occurred
Error: Failed to collect page data for /[locale]/auth/login
    at D:\Clients_Projects\CIRCLES-UI-mobile\node_modules\next\dist\build\utils.js:1171:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
   Collecting page data  .

How to fix this SyntaxError error? this is the component code:

import { registerPlugin } from '@capacitor/core';
import { GoogleAuth } from "@codetrix-studio/capacitor-google-auth";

const LoginForm = () => {

	async function logInWithGoogle() {
		const response = await GoogleAuth.signIn();
		console.log(`token=${response.authentication.accessToken}`);
	}

	return (
	<></>
	);
};

export default LoginForm;

mohameddev19 avatar May 11 '24 17:05 mohameddev19

I read it somewhere else, forgot the source but you will need to transpile the latest package Add it on your next config, this is the config for Next 14

{
   ...anotherNextConfig,
   transpilePackages: [ ...anotherPackages, "@codetrix-studio/capacitor-google-auth"]
}

SamX23 avatar Aug 16 '24 04:08 SamX23