В чем проблема Unexpected token <?

220
04 апреля 2022, 16:20

Мой главный jsx:

import React from 'react'
import ReactDOM from 'react-dom'
import Header from './components/header/header'
ReactDOM.render(<Header />, document.getElementById('wrapper'))

components/header/header.jsx:

import React from 'react';
class Header extends React.Component {
  render() {
   return (
     <header className="header_block">
       <div className="header_block-logo"></div>
       <div className="header_block-score">
         Score:
         <span className="header_block-score_curr" id="score">0</span>
       </div>
     </header>
   );
 }
}
export default Header;

Мой проект:

При сборке ошибка выскакивает:

Подскажите в чем проблема?

Ведь в ReactDOM.render нужно добавить <Header />

Чего он ругается?

UPDATE: мой package.json:

{
 "name": "songbird",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1",
   "clean": "rm -f -r dist",
   "build-dev": "webpack -d --mode development",
   "build-prod": "webpack -p",
   "start": "webpack-dev-server --open --hot --mode development"
 },
 "repository": {
   "type": "git",
   "url": "git+https://github.com/kirillleogky/songbird.git"
 },
 "author": "Kirill Leogky",
 "license": "ISC",
 "bugs": {
   "url": "https://github.com/kirillleogky/songbird/issues"
 },
 "homepage": "https://github.com/kirillleogky/songbird#readme",
 "devDependencies": {
   "@babel/core": "^7.8.4",
   "@babel/plugin-proposal-class-properties": "^7.8.3",
   "@babel/plugin-syntax-dynamic-import": "^7.8.3",
   "@babel/preset-env": "^7.8.4",
   "@babel/preset-react": "^7.8.3",
   "babel-eslint": "^10.0.3",
   "babel-loader": "^8.0.6",
   "copy-webpack-plugin": "^5.1.1",
   "css-loader": "^3.4.2",
   "eslint": "^6.8.0",
   "eslint-config-airbnb": "^18.0.1",
   "eslint-config-prettier": "^6.10.0",
   "eslint-loader": "^3.0.3",
   "eslint-plugin-import": "^2.20.1",
   "eslint-plugin-jsx-a11y": "^6.2.3",
   "eslint-plugin-prettier": "^3.1.2",
   "eslint-plugin-react": "^7.18.3",
   "eslint-plugin-react-hooks": "^2.3.0",
   "html-webpack-plugin": "^3.2.0",
   "node-sass": "^4.13.1",
   "prettier": "^1.19.1",
   "sass-loader": "^8.0.2",
   "style-loader": "^1.1.3",
   "url-loader": "^3.0.0",
   "webpack": "^4.41.5",
   "webpack-cli": "^3.3.10",
   "webpack-dev-server": "^3.10.3"
 },
 "dependencies": {
   "react": "^16.12.0",
   "react-dom": "^16.12.0"
 }
}
Answer 1

У вас файл .babelrc находится в dist папке, а должен быть в корне (рядом с другими конфигурационными файлам: .eslintrc, webpack.config.js).

READ ALSO
Повторный onclick

Повторный onclick

Если нажать на картинку, то она будет следовать за курсоромНо а как сделать так, чтобы при втором клике на картинку она бы уже отстала от курсора...

233
Отладка пока не достигнется значение

Отладка пока не достигнется значение

Есть огромный код Среди него нужно найти, когда (место в коде) значение одной из переменных-строк не станет равным "GV 7" из Visual Studio

107
Может кто-то поможет упростить код?

Может кто-то поможет упростить код?

Дан квадрат его пересекают произвольным количеством прямых параллельных основанию, так, что делят на прямоугольникиНайти точки пересечения...

87