Expected a JavaScript module script but the server responded with a MIME type of "text/html"

user_13641093 0
Viewed 10519

I have a problem when try to import firebase in my project. Previously i installed firebase dependencies in my project. I'm using ELM-SPA.

Error

Error

My firebase config file:

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
  };


  //init firebase
  firebase.initializeApp(firebaseConfig)

  //init services
  const projectFirestore = firebase.firestore()
  const projectAuth = firebase.auth()
  const projectStorage = firebase.storage()


  //timestamp
  const timestamp = firebase.firestore.FieldValue.serverTimestamp

  export{
      projectFirestore,
      projectAuth,
      projectStorage,
      timestamp
  }

Place where i try to call some firebase functions

import { projectAuth } from '../public/config'

const app = Elm.Main.init({
  flags: JSON.parse(localStorage.getItem('storage'))
})

app.ports.save.subscribe(storage => {
  localStorage.setItem('storage', JSON.stringify(storage))
  app.ports.load.send(storage)
})

My html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="/style.css">
  <link rel="shortcut icon" href="assets/logo.png" />
</head>
<body>
  <script src="/dist/elm.js"></script>
  <script type="module" src="/main.js"></script>
</body>
</html>
elm firebase
2 Answers

In main.js you're importing '../public/config', which is what the error is referring to. This is all happening in the browser, so the browser is trying to load that URL and failing. You could change the import to './config.js', but if you have secret information in that config file you shouldn't be exposing it to the public. In that case, you'll need to introduce some server-side component where you store your secrets.

bdukes_26880

For me, I just had a typo in the name of the component I was trying to render. I was importing and attempting to render approversSettings when the name of the component was actually approverSettings. It was trying to import from approversSettings which did not exist.

user_132342660
Related