SyntaxError: Cannot use import statement outside a module

[johnpc]

Describe the bug

Build fails with error:

(node:61259) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

node:internal/event_target:1083
  process.nextTick(() => { throw err; });
                           ^
/Users/xss/repo/svelte-crossword/node_modules/@capacitor-community/apple-sign-in/dist/esm/index.js:1
import { registerPlugin } from '@capacitor/core';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:807:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v20.8.1

To Reproduce
Steps to reproduce the behavior:

1. Clone my repo git clone https://github.com/johnpc/svelete-siwa-capacitor-demo && cd svelete-siwa-capacitor-demo
2. install dependencies npm install
3. Attempt build npm run build
4. See the error

Note, that reproduction repo was created as a default svelte app, using

npm create svelte@latest my-app
cd my-app
npm install
npm i @capacitor-community/apple-sign-in

then editing src/routes/Header.svelte to include usage of @capacitor-community/apple-sign-in

Expected behavior

I expect my app to build after importing this plugin

[johnpc]

I've also created this Stack Overflow question: https://stackoverflow.com/questions/78118589/how-to-update-js-build-process-to-fix-syntaxerror-cannot-use-import-statement

[johnpc]

My temporary workaround is I've updated node_modules/@capacitor-community/apple-sign-in/package.json to use "type": "module".

That caused this build error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/xss/repo/svelte-crossword/node_modules/@capacitor-community/apple-sign-in/dist/esm/definitions' imported from /Users/xss/repo/svelte-crossword/node_modules/@capacitor-community/apple-sign-in/dist/esm/index.js
    at new NodeError (node:internal/errors:406:5)
    at finalizeResolution (node:internal/modules/esm/resolve:233:11)
    at moduleResolve (node:internal/modules/esm/resolve:845:10)
    at defaultResolve (node:internal/modules/esm/resolve:1043:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:85:39)
    at link (node:internal/modules/esm/module_job:84:36) {
  url: 'file:///Users/xss/repo/svelte-crossword/node_modules/@capacitor-community/apple-sign-in/dist/esm/definitions',
  code: 'ERR_MODULE_NOT_FOUND'
}

node:internal/event_target:1083
  process.nextTick(() => { throw err; });
                           ^
Error: 500 /login
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///Users/xss/repo/svelte-crossword/node_modules/@sveltejs/kit/src/core/config/options.js:201:13
    at file:///Users/xss/repo/svelte-crossword/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:64:25
    at save (file:///Users/xss/repo/svelte-crossword/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:399:4)
    at visit (file:///Users/xss/repo/svelte-crossword/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:232:3)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:807:20)
    at exports.emitMessage (node:internal

So I also replaced node_modules/@capacitor-community/apple-sign-in/dist/esm/index.js with the following contents:

import { registerPlugin } from '@capacitor/core';
const SignInWithApple = registerPlugin('SignInWithApple', {
    web: () => import('./web').then(m => new m.SignInWithAppleWeb()),
});
export { SignInWithApple };

This makes it so Sign in with Apple works locally. But it's not a great situation because it doesn't work on other machines or CI/CD without scripting the process and running it on build, which doesn't feel right to me.

[germangetgloby]

Same issue here. Any solution found?

[halexalexe]

This is your Solution of your problem at new NodeError (node:internal/errors:406:5)
at finalizeResolution (node:internal/modules/esm/resolve:233:11) 롤토토
at moduleResolve (node:internal/modules/esm/resolve:845:10)
at defaultResolve (node:internal/modules/esm/resolve:1043:11)
at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:383:12)
at ModuleLoader.resolve (node:internal/modules/esm/loader:352:25)
at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:228:38)
at ModuleWrap. (node:internal/modules/esm/module_job:85:39)
at link (node:internal/modules/esm/module_job:84:36) {
url: 'file:///Users/xss/repo/svelte-crossword/node_modules/@capacitor-community/apple-sign-in/dist/esm/definitions',
code: 'ERR_MODULE_NOT_FOUND' 롤토토
}

[ron137]

Same issue here

[SamX23]

If you are using Next js, you will need to transpile the package, this is my next 14 configuration for using google and apple login

  transpilePackages: [
    "@codetrix-studio/capacitor-google-auth",
    "@capacitor-community/apple-sign-in",
  ],