Не удается развернуть приложение React на страницах Github. Приложение не внедряется в ‹div id=app/›

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
 <title>My App</title>
 <link href="styles.css" rel="stylesheet"></head>
<body>
  <p>Hello gh-pages!</p>
  <div id="app"></div>
  <script type="text/javascript" src="transformed.js"></script>
</body>
</html>

Это мой index.html, хранящийся в ветке gh-pages вместе с styles.css и transformed.js, которые я скопировал из построить папку на главной ветке. На ветке gh-pages больше ничего нет. Когда я перехожу к https://krasnokutskiyea.github.io/myProj/, я вижу только Hello gh -pages!, но мое фактическое приложение для реагирования не внедряется в div id="app". Ошибок в консоли нет. Любые идеи, как это решить? Мой package.json из основной ветки:

{
  "name": "newapp",
  "version": "1.0.0",
  "description": "myfirstapp",
  "main": "index.js",
  "homepage": "https://krasnokutskiyea.github.io/myProj",
  "scripts": {
    "build": "webpack",
    "build:stats": "webpack --env production --json > stats.json",
    "start": "webpack-dev-server",
    "lint": "eslint .",
    "deploy": "gh-pages -d build"
  },
  "author": "evgeny krasnokutskiy",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-redux": "^5.0.5",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.0",
    "redux-act": "^1.3.2",
    "redux-form": "^7.1.0",
    "redux-saga": "^0.16.0",
    "superagent": "^3.6.0"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-eslint": "^8.0.0",
    "babel-loader": "^7.0.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "css-loader": "^0.28.5",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.4.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "gh-pages": "^1.2.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }
}

Конфигурация вебпака:

const HTMLWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const path = require('path')

const HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
  template: path.join(__dirname, '/app/index.html'),
  filename: 'index.html',
  inject: 'body',
})

module.exports = {
  entry: ['babel-polyfill', path.join(__dirname, '/app/index.js')],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }, {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules,localIdentName="[name]-[local]-
[hash:base64:6]"',
        }),
      }],
  },
  output: {
    filename: 'transformed.js',
    path: path.join(__dirname, '/build'),
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    HTMLWebpackPluginConfig,
    new ExtractTextPlugin('styles.css'),
  ],
  mode: 'production',
}

мое приложение/index.js:

/* eslint-env node */

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, compose, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import createSagaMiddleware from 'redux-saga'
import { BrowserRouter, Route } from 'react-router-dom'

import allReducers from './reducers/index'
import RootSaga from './sagas/index'
import EntryPage from './containers/EntryPage'


// CREATING STORE AND SAGA
const saga = createSagaMiddleware()
const composeEnchancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(allReducers, 
composeEnchancers(applyMiddleware(saga)))
saga.run(RootSaga)



// RENDERING ROOT COMPONENT
ReactDOM.render(

  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Route exact path="/" component={EntryPage} />
      </div>
    </BrowserRouter>
  </Provider>,

  document.getElementById('app'),
)

webpack reactjs javascript github-pages webpack-4
person KrasnokutskiyEA    schedule 12.07.2018    source источник
comment
Будет ли загружаться ваш transformed.js файл, если вы отметите вкладку «Сеть» в инструментах разработки?   -  person Tholle    schedule 12.07.2018
comment
Да, скачивает, как и styles.css.   -  person KrasnokutskiyEA    schedule 12.07.2018
comment
Не могли бы вы показать файл с записью от /app/index.js?   -  person sarneeh    schedule 12.07.2018
comment
Глядя на код, похоже, что у вас есть только path="/". Пробовали ли вы установить базовый путь, так как ваша база это /myProj/?   -  person Tholle    schedule 12.07.2018

Ответы (2)


arrow_upward
2
arrow_downward

Ваш Route с path="/" не будет работать, так как база вашей веб-страницы /myProj.

Вы можете исправить это, дав BrowserRouter basename из /myProj:

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter basename="/myProj">
      <div>
        <Route exact path="/" component={EntryPage} />
      </div>
    </BrowserRouter>
  </Provider>,
  document.getElementById('app'),
)
person Tholle    schedule 12.07.2018

arrow_upward
1
arrow_downward

Проблема связана с вашим маршрутизатором/путем.

Ваше приложение React отображается, но ваш единственный маршрут не соответствует вашему URL-адресу:

<Route exact path="/" component={EntryPage} />

Это не сработает, потому что ваше приложение находится на /myProj/.

Изменение пути маршрута на /myProj/ исправит это.

person sarneeh    schedule 12.07.2018