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

Question

kirillleogky @kirillleogky

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

Мой главный 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 />
Чего он ругается?

Вопрос задан более трёх лет назад
793 просмотра

8 комментариев

Подписаться 2 Средний 8 комментариев

camelCaseVlad @camelCaseVlad

Разобрались, в чем проблема?

На сандбоксе ваш код работает

https://codesandbox.io/s/suspicious-dan-v9lqo

Проблема в настройках приложения (т.е. бабел, вебпак и тп)

Написано более трёх лет назад
kirillleogky @kirillleogky Автор вопроса

camelCaseVlad,
структура проекта

Написано более трёх лет назад

kirillleogky @kirillleogky Автор вопроса

camelCaseVlad, исходный html:

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Songbird</title>
    <link rel="shortcut icon" href="./static/img/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
</head>

<body>
    <div class="wrapper">
    </div>
    <script type="text/jsx" src="app.js"></script>
</body>

</html>

Написано более трёх лет назад

kirillleogky @kirillleogky Автор вопроса

camelCaseVlad, конфиг вебпака:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        enforce: 'pre',
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: 'url-loader',
      },
      {
        test: /\.(css|scss|sass)$/,
        exclude: /\.module\.(css|scss|sass)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
            },
          },
          'sass-loader',
        ],
      },
      {
        test: /\.module\.(css|scss|sass)$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  devServer: {
    contentBase: './dist',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
    new CopyWebpackPlugin([
      { from: 'img', to: `static/img` },
   ]),
  ],
}

Написано более трёх лет назад

camelCaseVlad @camelCaseVlad

уж заливайте все на гитхаб)

Написано более трёх лет назад
kirillleogky @kirillleogky Автор вопроса

camelCaseVlad, https://github.com/kirillleogky/songbird/tree/songbird

Написано более трёх лет назад
camelCaseVlad @camelCaseVlad

https://stackoverflow.com/questions/33460420/babel... я думаю это починит

Написано более трёх лет назад
kirillleogky @kirillleogky Автор вопроса

camelCaseVlad, на самом деле проблема в конфиге babel была
все равно спасибо вам за время

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Яндекс Практикум

Фронтенд-разработчик

10 месяцев

Далее
Skillfactory

Профессия Веб-разработчик

12 месяцев

Далее
Яндекс Практикум

Мидл фронтенд-разработчик

5 месяцев

Далее

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

Простой
Как работать с разрозненными данными?
- 1 подписчик
- 6 минут назад
- 3 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Неправильно работает crypto.subtle.deriveKey в Firefox, баг или мой косяк?
- 2 подписчика
- 16 окт.
- 100 просмотров
0

ответов
JavaScript

Простой
Как подгружать xml с перерисовкой таблицы?
- 3 подписчика
- 14 окт.
- 147 просмотров
0

ответов
React

Средний
Как правильно обрабатывать isFetching для одного и того же запроса в нескольких компонентах (React Query)?
- 1 подписчик
- 14 окт.
- 71 просмотр
0

ответов
JavaScript

+2 ещё

Простой
Как решить задачку из контеста?
- 1 подписчик
- 13 окт.
- 230 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Есть ли js-библиотека для офлайн-распознавания русской речи?
- 1 подписчик
- 12 окт.
- 161 просмотр
2

ответа
JavaScript

Простой
Почему не работает в консоли setTimeout?
- 1 подписчик
- 11 окт.
- 326 просмотров
1

ответ
React

+1 ещё

Простой
Как исправить ошибки с типом any, пустым значением {} и с «Component definition is missing display name»?
- 1 подписчик
- 09 окт.
- 77 просмотров
1

ответ
JavaScript

Простой
Как прочитать ответ сервера после отправки формы?
- 2 подписчика
- 27 сент.
- 287 просмотров
1

ответ
React

+2 ещё

Средний
Как получить текущие bounds (границы видимой области) карты в Yandex Maps API?
- 2 подписчика
- 23 сент.
- 90 просмотров
1

ответ
Показать ещё Загружается…

Web-разработчик/WordPress программист (Full-stack). В офисе ст. м Ладожская

JustBusiness • Санкт-Петербург

от 130 000 до 150 000 ₽

Верстальщик / фронтендер для браузерного расширения

DevTeam.Space

от 1 000 до 2 000 $

React разработчик

ITK academy • Нижний Новгород

от 80 000 до 120 000 ₽

Разобрались, в чем проблема?

На сандбоксе ваш код работает

https://codesandbox.io/s/suspicious-dan-v9lqo

Проблема в настройках приложения (т.е. бабел, вебпак и тп)
camelCaseVlad, исходный html:

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Songbird</title> <link rel="shortcut icon" href="./static/img/favicon.png" type="image/x-icon"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> </head> <body> <div class="wrapper"> </div> <script type="text/jsx" src="app.js"></script> </body> </html>
camelCaseVlad, конфиг вебпака:

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { entry: './src/index.jsx', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js', }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader', exclude: /node_modules/, }, { enforce: 'pre', test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'eslint-loader', }, { test: /\.(png|svg|jpg|gif)$/, loader: 'url-loader', }, { test: /\.(css|scss|sass)$/, exclude: /\.module\.(css|scss|sass)$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, }, }, 'sass-loader', ], }, { test: /\.module\.(css|scss|sass)$/, use: [ 'style-loader', { loader: 'css-loader', options: { importLoaders: 1, modules: true, }, }, 'sass-loader', ], }, ], }, resolve: { extensions: ['.js', '.jsx'], }, devServer: { contentBase: './dist', }, plugins: [ new HtmlWebpackPlugin({ template: 'public/index.html', }), new CopyWebpackPlugin([ { from: 'img', to: `static/img` }, ]), ], }
camelCaseVlad, https://github.com/kirillleogky/songbird/tree/songbird
https://stackoverflow.com/questions/33460420/babel... я думаю это починит
camelCaseVlad, на самом деле проблема в конфиге babel была
все равно спасибо вам за время

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт