В чем проблема «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 />
Чего он ругается?

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

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 была
все равно спасибо вам за время

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

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

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

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

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

JavaScript

+2 ещё

Простой
Как настроить CORS .NET 8?
- 1 подписчик
- 7 часов назад
- 37 просмотров
1

ответ
React

+1 ещё

Простой
Как убрать 404, которая возникает при обновлении любой страницы, кроме главной в Telegram Mini App?
- 1 подписчик
- 19 часов назад
- 36 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать универсальную HTML-ссылку на яндекс карты?
- 1 подписчик
- 21 час назад
- 103 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Дергается анимация снега, почему и как исправить?
- 1 подписчик
- вчера
- 140 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как открыть CSS селектор при помощи onclick?
- 1 подписчик
- вчера
- 102 просмотра
1

ответ
JavaScript

Простой
Как исправить ошибку «Uncaught ReferenceError: $ is not defined» хотя jQuery подключен?
- 1 подписчик
- вчера
- 82 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как убрать экспоненциальную запись числа в input type=number?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
JavaScript

Простой
Как запустить проверку? try catch?
- 1 подписчик
- 16 дек.
- 85 просмотров
1

ответ
JavaScript

Простой
Почему не работает проверка формы на валидность?
- 1 подписчик
- 16 дек.
- 74 просмотра
1

ответ
JavaScript

Простой
Почему массив заполняется одним и тем же объектом?
- 1 подписчик
- 15 дек.
- 140 просмотров
0

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

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

JavaScript FullStack developer

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

До 220 000 ₽

Сортировка товаров в каталоге на Битрикс

18 дек. 2024, в 16:42

2000 руб./за проект

Разработка ПК игры

18 дек. 2024, в 16:33

2000 руб./в час

Внести изменения на сайт Битрикс

18 дек. 2024, в 16:06

5000 руб./за проект

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

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

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»?

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

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

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