【问题标题】:Uncaught SyntaxError: Unexpected token < occurring when deployingUncaught SyntaxError: Unexpected token < 在部署时发生
【发布时间】:2018-03-27 22:41:18
【问题描述】:

有一个在后端使用带有 node/express 服务器的反应路由器的反应应用程序,我正在尝试部署到 heroku,但它给了我这个错误...

'Uncaught SyntaxError: Unexpected token

我相信这是我的快速服务器中的“catch all”路由,它正在提供 index.html.. 不完全确定...这是我的服务器文件的一部分..

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const path = require('path');
const bcrypt = require('bcrypt');
const db = require('../database/index.js');
const passport = require('passport');
const helpers = require('./helpers.js');//eslint-disable-line
require('../server/config/passport')(passport);

app.use(express.static(path.join(__dirname, '/../client/dist')));
app.use(require('cookie-parser')());
app.use(require('body-parser').urlencoded({ extended: true }));
app.use(require('express-session')({
  secret: process.env.SESSION_PASSWORD || 'supersecretsecret',
  resave: false,
  saveUninitialized: false,
}));

app.use(passport.initialize());
app.use(passport.session());
app.use(bodyParser.json());

app.post('/', (req, res) => {
  res.end();
});

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, '/../client/dist/index.html'));
});

app.listen(process.env.PORT || 3000, () => {
  console.log('listening on port 3000!');
});

这是我的前端 index.jsx 文件..

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import Home from './components/homepage.jsx';
import ArtistRegister from './components/artistregister.jsx';
import VenueRegister from './components/venueregister.jsx';
//import Test from './components/test.jsx';
import reducer from './reducers/index.js';
import { BrowserRouter as Router, Route, Switch } from 'react-router- 
dom';//eslint-disable-line

const store = createStore(reducer, applyMiddleware(thunk));

const Base = ({ store }) => (
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/artistregister" component={ArtistRegister} 
        />
        <Route exact path="/venueregister" component={VenueRegister} />
        {/* <Route path="/artist/:username" component={Test} /> */}
      </Switch>
    </Router>
  </Provider>
);

const render = () => {
  ReactDOM.render(<Base store={store} />, 
  document.getElementById('app'));
  };

store.subscribe(render);
render();

有什么帮助吗?

【问题讨论】:

  • 您需要在推送到服务器之前将 JSX 转换为 Javascript,或者拥有一个运行构建的 postinstall 脚本。
  • 好的,我会调查一下,但是当它在本地时,这是否有理由在 heroku 上不起作用??
  • 因为我以前从未遇到过这个问题,所以我认为 jsx 是使用 webpack 自动转译的。

标签: javascript reactjs express router


【解决方案1】:

我想通了!它使用 babel 正确编译,唯一的问题是部署时,我的 bundle.js 在 git-ignore 中。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-05-17
    • 2019-02-10
    • 2014-07-08
    • 2011-03-09
    • 2014-01-06
    • 2012-04-10
    • 1970-01-01
    相关资源
    最近更新 更多