1

enter image description here

As the arrow shows .. everything after the closed fragment comes in the same weird color, at the beginning I thought it might be a theme issue but then I recognized that it is not. I really need a solution for this. I'm new to react by the way

I thought it might be a theme issue but then I recognized that it is not. I really need a solution for this.

Muhammed Said
  • 21
  • 3
  • rename the file to `.jsx` – Thomas Oct 30 '22 at 23:15
  • the problem still there after changing the file to .jsx – Muhammed Said Oct 30 '22 at 23:19
  • @MuhammedSaid ok, so there is something else going on, as I suspected… but I don't have any ideas, unfortunately. You're using VS Code, right? Edit your question title with what editor you're using. – silvenon Oct 30 '22 at 23:22
  • Does the answer here help? https://stackoverflow.com/questions/58415347/vscode-doesnt-understand-react-fragment-doesnt-recognize-newer-es-synta – silvenon Oct 30 '22 at 23:24
  • Ok, I will update the title, and thank you for your interest! I will check that post too and see if it worked or not – Muhammed Said Oct 30 '22 at 23:26
  • Yes, the answer in that link worked! :) https://stackoverflow.com/questions/58415347/vscode-doesnt-understand-react-fragment-doesnt-recognize-newer-es-synta – Muhammed Said Oct 31 '22 at 03:24

2 Answers2

1

The solution that worked for me was to disable the extension (Babel ES6/ES7), after doing that everything worked as expected!

Muhammed Said
  • 21
  • 3
-1

I would assume that it's because the extension of your file is .js, and by default the language that VS Code uses for .js files is javascript.

If you can't change the extension to .jsx for whatever reason, you could set up your VS Code to to use the javascriptreact language for .js files by adding the following to your settings JSON:

{
  "files.associations": {
    "*.js": "javascriptreact"
  }
}

However, if this was indeed the solution, I would have guessed that fragments weren't your only problem, but let me know if this resolves it.

silvenon
  • 2,068
  • 15
  • 29
  • Unfortunately, I changed the language to "javascriptreact" and the problem still there! ... also changed the extension to .jsx but that also didn't work. – Muhammed Said Oct 30 '22 at 23:12
  • When you're viewing the file, in the bar at the bottom you should see the name of the language, at the right. Does it say "JavaScript" or "JavaScript React"? If it still says JavaScript you'll need to either set that manually to "JavaScript React" by clicking on it or reload VS Code. – silvenon Oct 30 '22 at 23:19
  • yes, I changed it to "JavaScript React" but the problem stays. – Muhammed Said Oct 30 '22 at 23:21
  • I finally solved it, it was the extension (Babel ES6/ES7) that was causing this problem, after disabling it everything worked as expected. – Muhammed Said Oct 31 '22 at 03:27