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

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

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

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 9 часов назад
- 23 просмотра
0

ответов
JavaScript

+1 ещё

Простой
Three.js объект сзади не виден при повороте к нему лицом?
- 2 подписчика
- 13 часов назад
- 186 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 16 часов назад
- 115 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 17 часов назад
- 45 просмотров
0

ответов
React

Простой
В чем заключается суть оптимизации скорости обновления компонентов через useReducer?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 108 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 84 просмотра
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 45 просмотров
0

ответов
React

Простой
Почему Vite/Rollup не может зарезолвить абсолютные импорты?
- 1 подписчик
- вчера
- 46 просмотров
1

ответ
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 69 просмотров
0

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

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

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

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

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL

25 апр. 2024, в 05:57

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

Правки в webApp готового и написанного телеграмм бота next, tailwind

25 апр. 2024, в 05:29

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

Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот

25 апр. 2024, в 04:38

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

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

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

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

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

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

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