@Maverick17user

Почему не рендерится React-компонент на странице при Gulp-сборке?

Я собираю проект используя Gulp.
5c1d2584f2082321468081.png
В папке src - процесс разработки.

В gulp-файле я транспилирую React в ES5:
gulp.task('react', function() {
    return gulp.src('src/js/*.jsx')
    .pipe(babel({
        presets: ['env','react']
    })) 
    .pipe(jsx({
        factory: 'React.createClass'
    }))
    .pipe(gulp.dest('dest'))
})


Gulp'ом прохожусь по этим 2м файлам:
App.jsx
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
          To get started, editsrc/App.js and save to reload.
      </div>
    );
  }
}

export default App;

index.jsx:
import React from 'react';
import {render} from 'react-dom';
import App from './App';

render(<App />, document.getElementById('root'))

В index.html подключается протранспилированный файл index.js, который рендерит компонент App:
<body>
    <h3>HTML</h3>
    <div id="root"></div>
    <script src="./test.js"></script>
    <script src="./index.js"></script>
</body>

После запуска сборки создаётся папка dest с обработанным кодом:
5c1d287c3ee7f242636066.png
Я запускаю dest/index.html на локальном сервере -> Компонент не появился + получаю ошибку:
5c1d29e5f071b229833022.png
В чём может быть проблема? Как сделать, чтобы компонент отрендерился?
Часть package.json
"devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "del": "^3.0.0",
    "gulp": "^4.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-debug": "^4.0.0",
    "gulp-if": "^2.0.2",
    "gulp-notify": "^3.2.0",
    "gulp-sass": "^4.0.2",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-watch": "^5.0.1",
    "http-server": "^0.11.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "stream-combiner2": "^1.1.1"
  },
  "dependencies": {
    "babel-plugin-transform-react-jsx": "^6.24.1",
    "gulp-jsx": "^2.0.1"
  }
  • Вопрос задан
  • 57 просмотров
Пригласить эксперта
Ответы на вопрос 1
@curious-101
Frontend developer
Браузер ругается на то, что не знает, что такое require, вы транспилировали код, но не собрали бандл. Я не спец в галпе, не знаю актуальна ли статья , знающие люди поправят.
Если изучаете реакт, то можете воспользоваться https://facebook.github.io/create-react-app/ и не мучиться со сборщиками. По сборщикам я бы рекомендовал посмотреть в сторону webpack или parcel
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы
Ultimate Guitar Калининград
от 1 000 до 5 000 usd.
Enapter Санкт-Петербург
от 160 001 руб.
ManyChat Москва
от 140 000 руб.