samuelgozi/firebase-firestore-lite

Getting an Syntax error when importing Firestore

pmdy opened this issue ยท 5 comments

pmdy commented
> Build error occurred
/Users/mike/Code/nextjs-with-typescript/node_modules/firebase-firestore-lite/dist/mod.js:1
import Reference from './Reference';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)
    at Module._compile (internal/modules/cjs/loader.js:1122:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)
    at Function.Module._load (internal/modules/cjs/loader.js:901:14)
    at Module.require (internal/modules/cjs/loader.js:1044:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at Object.OTrU (/Users/mike/Code/nextjs-with-typescript/.next/server/static/9aveSnj8fnTx770gvaxLy/pages/[username]/[repository].js:411:18)
    at __webpack_require__ (/Users/mike/Code/nextjs-with-typescript/.next/server/static/9aveSnj8fnTx770gvaxLy/pages/[username]/[repository].js:23:31)
    at Module.6kXf (/Users/mike/Code/nextjs-with-typescript/.next/server/static/9aveSnj8fnTx770gvaxLy/pages/[username]/[repository].js:129:41) {
  type: 'SyntaxError'
}

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.92. Please mark this comment with ๐Ÿ‘ or ๐Ÿ‘Ž to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

You need to set up webpack to transpile node_modules.
If you can share your config I might be able to help.

pmdy commented

Got it fixed, I just had to transpile like you said.
But, I'm getting another error/warning:

(node:37333) UnhandledPromiseRejectionWarning: ReferenceError: localStorage is not defined
    at Object.storageApi.<computed> [as get] (webpack-internal:///./node_modules/firebase-auth-lite/src/main.js:42:95)
    at new Auth (webpack-internal:///./node_modules/firebase-auth-lite/src/main.js:66:18)
    at eval (webpack-internal:///./src/redux/actions/repository.ts:18:14)
    at Module../src/redux/actions/repository.ts (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:272:1)
    at __webpack_require__ (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:29:31)
    at eval (webpack-internal:///./src/pages/[username]/[repository]/index.tsx:10:83)
    at Module../src/pages/[username]/[repository]/index.tsx (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:260:1)
    at __webpack_require__ (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:29:31)
    at Object.5 (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:295:18)
    at __webpack_require__ (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:29:31)
    at /Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:104:18
    at Object.<anonymous> (/Users/mike/Code/nextjs-with-typescript/.next/server/static/development/pages/[username]/[repository].js:107:10)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32)

@pmdy Is this error thrown at runtime or compilation?
edit: btw this error comes from the auth library.

pmdy commented

It happened at runtime, but I got it fixed somehow by just playing with babel and webpack configs.

Everything is working fine now! Thanks