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

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

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 ещё

Средний
Как сделать чтобы виджетовая форма авторизации от Google не закрывалась?
- 1 подписчик
- 7 часов назад
- 34 просмотра
0

ответов
JavaScript

+3 ещё

Простой
Как решить проблемы со скоростью swiper slider конкретно на iPhone + Яндекс браузер?
- 1 подписчик
- 12 часов назад
- 23 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Делаю видеоплеер и в полноэкранном режиме почему-то не видит div с моими контролами?
- 1 подписчик
- вчера
- 58 просмотров
2

ответа
React

+2 ещё

Простой
Почему Unauthorized в приложении на React?
- 1 подписчик
- вчера
- 25 просмотров
0

ответов
JavaScript

Простой
Можно ли сделать, чтобы контент слайда скроллился Swiper?
- 1 подписчик
- вчера
- 38 просмотров
1

ответ
JavaScript

Простой
Почему проблема с localStorage?
- 1 подписчик
- вчера
- 107 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как добавить анимацию div?
- 1 подписчик
- вчера
- 71 просмотр
1

ответ
JavaScript

Простой
Как исправить код функции, создающей и удаляющей DIV, чтобы она заработала?
- 2 подписчика
- 12 дек.
- 418 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как сохранить авторизацию в ссылке для тега iframe?
- 1 подписчик
- 12 дек.
- 67 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как отображать форму в модальном окне при вводе некорректных данных?
- 2 подписчика
- 12 дек.
- 208 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

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

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

от 40 000 до 90 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Доработать проект на unity

14 дек. 2024, в 23:53

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

Скрипт импорта api на валдбериз

14 дек. 2024, в 22:57

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

Разработать бэкенд. Telegram Mini Apps

14 дек. 2024, в 22:46

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

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

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

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

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

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

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