Cannot set up Firebase in React Project because of parsing errors?

Question

I am trying to setup Firebase for a simple Tetris game I created. Right now, I am stuck. I created a file called fire.js, where all my scripts will go. I am doing this on Visual Studio Code and what I have inside that folder, VSC is not accepting it. Can somebody help me out? This is my first time working with React and Firebase. Thank you!

I am getting the following message for the script tags:

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?

Meanwhile, I am getting this message for my apiKey:

any '}' expected.ts(1005)

The <script> tag should be used in an html file not a JS... Since this is your first time working with React and Firebase, I'd recommend starting with a guide (not necessarily a Tetris game) but something simple enough to get the hang of the new technologies. When you're comfortable and know your way around then you can attempt your Tetris game... You can try this tutorial for React+Redux+Firebase blog.bitsrc.io/… — Kwame Opare Asiedu
– Kwame Opare Asiedu, Commented Dec 2, 2019 at 0:10

Tim · Accepted Answer · 2019-12-02 01:34:41Z

You typically wouldn't have a <script> element inside a JS file.

As mentioned in the comments, it would probably be best if you started with a tutorial to gain a base understanding of React.

I'll try to cover the errors you've mentioned anyway.

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...?'

JSX is essentially a way of writing elements and components in an HTML-like syntax, within JS. (More here: https://reactjs.org/docs/introducing-jsx.html)

JSX must have one root element. In your screenshot, you have three <script> nodes all at the same level. You would normally fix this by nesting all the elements within another element (e.g. a <div> or <React.Fragment>). That won't work in this case cause the first two <script> tags shouldn't be in this file anyway.

any '}' expected.ts(1005)

This is happening because you're using a <script> tag in a JS file.

Move the tags that are just importing external scripts to your HTML file.

Remove the <script> tag from the initialisation code so your JS file looks like this.

import firebase from 'firebase';

const firebaseConfig = {
    // Your config here
}

// Your function calls here

Collectives™ on Stack Overflow

Cannot set up Firebase in React Project because of parsing errors?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related