NodeJS Won't Import a Non-NodeJS File

Question

I have the following two files on my site:

firebase.js
gridsome-server.js

The firebase.js is a 'regular' javascript file with the following contents:

import firebase from 'firebase/app'
import 'firebase/firestore'

const config = {
  apiKey: '[APIKEY],
  authDomain: '[AUTHDOMAIN],
  databaseURL: '[DATABASEURL],
  projectId: '[PROJECTID],
  storageBucket: '[STORAGEBUCKET],
  messagingSenderId: '[MESSAGINGSENDERID],
  appId: '[APPID]'
}

firebase.initializeApp(config)

const db = firebase.firestore()

export default db

Now, I want to import the default export (db) into gridsome-server.js - which (I believe) is a nodejs file. Now, I thought I could do the following: const db = require('./src/config/firebase.js') - but that did not work. I got the following error message:

Initializing plugins...
SyntaxError: gridsome.server.js: Unexpected identifier (1:12)

> 1 | const db = require('./src/config/firebase')
    |            ^
  2 |
  3 | module.exports = function(api) {
  4 |   api.loadSource(({ addCollection }) => {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So I changed require to import - as follows: import db from './src/config/firebase. But that also gave me an error:

Initializing plugins...
C:\code\tutorials\vue\gridsome\vuetify-gridsome\gridsome.server.js:2
import db from './src/config/firebase'
       ^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Plugins.initialize (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\Plugins.js:45:11)
    at App.init (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:120:18)
    at App.bootstrap (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:49:16)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\index.js:12:18)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\develop.js:20:21)
    at C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:44:12
    at Command.program.command.description.option.option.action.args (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:13:44)
    at Command.listener (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:198:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

So I am stuck -- how can I import firebase.js into gridsome-server.js?

Update

I also tried changing to a named export in firebase.js (i.e., to export const db) and using a named import in gridsome-server.js (i.e., import { db } from...). That also lead to an error:

Initializing plugins...
C:\code\tutorials\vue\gridsome\vuetify-gridsome\gridsome.server.js:2
import { db } from './src/config/firebase'
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Plugins.initialize (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\Plugins.js:45:11)
    at App.init (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:120:18)
    at App.bootstrap (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\App.js:49:16)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\app\index.js:12:18)
    at module.exports (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\lib\develop.js:20:21)
    at C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:44:12
    at Command.program.command.description.option.option.action.args (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\gridsome\index.js:13:44)
    at Command.listener (C:\code\tutorials\vue\gridsome\vuetify-gridsome\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:198:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Might be using AoT imports, similar to angular.js instead you. you'll need to do import { db } from '' The default export might not even work tbh you'll need to export an actual variable export db instead. — Andrei
– Andrei, Commented Dec 2, 2019 at 14:46
@Andrei I had also tried import { db } from '' and also got an error message. And I just now changed the firebase.js store to export const db... and tried import { db }... and also got an error :(. — Moshe
– Moshe, Commented Dec 2, 2019 at 14:57

Shivam · Accepted Answer · 2019-12-02 15:19:36Z

1

I believe the problem is with how you are importing FireBase

import firebase from 'firebase/app'

As from the documentation on NPM website

If you are using native ES6 module with --experimental-modules flag, you should do: import firebase from 'firebase/app';

Otherwise you should be importing like this

const firebase = require('firebase');

answered Dec 2, 2019 at 15:19

Shivam

3,6622 gold badges15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Moshe Over a year ago

You mean in the firebase.js file? If so, do I also have to a module.exports? And how do I import firebase/firestore? And either way, I thought that node could import regular javascript files using the require method.

Shivam Over a year ago

Yes,When you import a regular js file, it has its own importing and that is handled by node and node as of today cannot handle imports like import firebase from 'firebase/app'

Moshe Over a year ago

That was the problem. Thanks. NOTE -- for anyone who may need it. I solved it by moving the code from firebase.js directly into gridsome-server.js and using commonsjs syntax.

Collectives™ on Stack Overflow

NodeJS Won't Import a Non-NodeJS File

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related