Create-React-App构建-“未捕获的SyntaxError:意外令牌<”

时间:2019-01-24 06:01:31

标签: reactjs webpack jsx create-react-app

我知道这个问题已被问过多次,但对我没有任何帮助...

我正在尝试为List<Person> persons = new List<Person>(); // add Person elements to it. persons.add(person1); persons.add(person2); Persons_List persons_list = new Persons_List(); persons_list.setPersons(persons); JAXBContext context = JAXBContext.newInstance(Persons_List.class, Person.class); Marshaller jaxbMarshaller = context.createMarshaller(); jaxbMarshaller.setProperty(Marshaller.JAXB_FORMATTED_OUTPUT, true); //if you want to output to file. OutputStream os = new FileOutputStream( "Person.xml" ); jaxbMarshaller.marshal(persons_list, os); //if you want to display in console. jaxbMarshaller.marshal(persons_list,new PrintWriter(System.out)); 项目创建静态版本,但出现以下错误:

<Persons_List>
   <Person>
       <firstName>John</firstName>
       <lastName>Smith</lastName>
   </Person>
   <Person>
       <firstName>Will</firstName>
       <lastName>Smith</lastName>
   </Person>
</Persons_List>

由于这些文件已缩小,因此我不确定从哪里开始调试它们。

对于其他SO响应,这是我尝试过的一些事情:

create-react-app

不确定是否相关,但是我在我的Express服务器上有此文件,我认为这是标准的:

Uncaught SyntaxError: Unexpected token <     1.ca81c833.chunk.js:1
Uncaught SyntaxError: Unexpected token <     main.7ced8661.chunk.js:1

假设这实际上是JSX问题,那么整个过程就很混乱-//Original index.html file, which gets included in the built file: <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script> //package.json "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", //.babelrc file { "presets": ["react", "es2015", "stage-1"] } 是否应该自动处理JSX?

更新:我刚刚发布了此问题,但已经有相关更新。通过运行if (process.env.NODE_ENV === "production") { app.use(express.static('client/built')); app.get("*", (req, res) => { res.sendFile(require('path') .resolve(__dirname, 'client', 'build', 'index.html')); }) } ,我可以通过pm2静态地为页面提供服务,因此我认为问题可能出在我的服务器配置上。

9 个答案:

答案 0 :(得分:3)

这对我很有帮助。 只是想添加一个具有相同解决方案的Create-React-App项目中的示例作为补充: 部署到heroku后,我收到了相同的错误。

  

未捕获到的SyntaxError:服务-s构建后出现意外的令牌<< / p>

对我来说,问题出在packages.json文件中。我提供的“首页”参数不正确。将其更改为正确的heroku URL可解决此问题。

"homepage": "https://myapp.herokuapp.com/"

希望此添加对您有所帮助。

答案 1 :(得分:2)

我最终在这里找到答案:https://github.com/facebook/create-react-app/issues/1812

我从上面修剪了完整的解决方案,但是我改变了:

app.use(express.static('client/build'));
app.get("*", (req, res) => {
    res.sendFile(require('path')
        .resolve(__dirname, 'client', 'build', 'index.html'));
})

收件人:

const root = require('path').join(__dirname, 'client', 'build')
app.use(express.static(root));
app.get("*", (req, res) => {
    res.sendFile('index.html', { root });
})

对于我来说,第一个街区不起作用绝对让我有些奇怪。我认为这与我的React项目中的相对链接有关,因为尽管出现了错误,但确实将index.html文件传送到了浏览器。也许一个完全静态的文件可以与第一个块一起使用,但是我想知道它是否正确。

答案 2 :(得分:1)

从package.json中删除"homepage": "app-url"。 package.json中不存在homepage时,将假定它将托管在服务器根目录下,或者您将使用serve -s build为该构建提供服务。

是的,如果要在服务器根目录的子目录中部署该应用程序,则指定homepage将很有帮助。

要将应用程序托管在IIS上(名称为somedomain.net),并且您的解决方案已经具有Web API项目。

  1. 您将使用主Web应用程序(即somedomain.net)映射解决方案文件夹
  2. 您将从IIS将Web API项目转换为Application。
  3. 然后,您将像Web API一样将React App的build文件夹转换为Web App
  4. 要使前端应用正常工作,请指定"homepage": "somedomain.net/React-Project/Client-App/build"

答案 3 :(得分:1)

将我的React构建部署到生产中时,我遇到了同样的问题。花了数小时试图弄清楚以前工作的代码出了什么问题之后,我才发现我在部署中犯了一个错误。

我没有将static内的文件夹build复制到服务器,因为我使用scp build/*来代替scp -r build/*来复制构建文件夹。

我知道这并不是这里提出问题的确切答案。但是,在我发现自己犯了错误之前,我已经尝试了这里专家给出的几乎所有可能的选择。 因此,将其添加到此处是指向面临类似问题的任何人的指针,以同样验证部署步骤。

答案 4 :(得分:0)

我使用“ npm run build”创建了React应用的构建版本。 我有一台服务器(节点/快速)。 我想将构建包含在服务器端并部署到heroku。我所做的是将构建文件夹复制到服务器根文件夹,并在服务器端启动文件中使用了代码:

app.get('/*', function (req, res, next) {
    if (!req.path.includes('api'))
        res.sendFile(path.join(__dirname, 'build', 'index.html'));
    else next();
});

我遇到了同样的错误。所以我只是在开始时设置静态内容的路径:

var app = express();
//here below
app.use(express.static(path.join(__dirname, 'build')));

我的静态index.html很好用,并且能够找到css和js资源。

答案 5 :(得分:0)

只需删除

  

“主页”:“您的应用网址”

从package.json修复

答案 6 :(得分:0)

如果要将客户端部署到S3,则在使用react-deploy-s3进行部署时,请从CloudFront分配distribution-id

react-deploy-s3 deploy \
  --access-key-id XXXXXXXXXXXXXXXXX \
  --secret-access-key XXXXXXXXXXXXXXXXXXXXXXXX \
  --bucket XXXXXXX \
  --region us-east-1 \
  --distribution-id XXXXXXXXXXXXX                        <---

答案 7 :(得分:0)

当我想将create-react-app项目的静态版本部署到我的linux服务器时遇到同样的问题。

我用this issue comment on cra's githubthe cra's official document about how to deploy production build解决了。

例如:

我想将生产构建网站放在http://example.com/foo/bar之类的地方。

在不更改任何默认设置的情况下进行部署时,会出现此“ Uncaught SyntaxError:Unexpected token <”错误,并且屏幕上没有任何显示。

这是解决方案:

1)将homepage参数添加到package.json。

+ "homepage": "/foo/bar"

2)在CSS中的所有静态资源中添加“ / foo / bar”,如下所示:

.dummyimage {
 - content: url('/dummyimage.jpg');
 + content: url('/foo/bar/dummyimage.jpg');
}

3)在所有链接和路线中添加“ / foo / bar”。

- linkTo: '/contact'
+ linkTo: '/foo/bar/contact'

4)更改您的服务程序代码,在node.js / express中就像:

- app.use(express.static(path.join(__dirname, '/build')));
+ app.use('/foo/bar/', express.static(path.join(__dirname, '/build')));

5)重新构建。

6)将build /部署到服务器。

7)重新启动服务程序,例如node.js / express。

问题解决了!

希望此解决方案会有所帮助。

答案 8 :(得分:0)

当我想将我的应用程序部署到github-pages时,我遇到了同样的问题:- 它的需要遵循一些准则

  1. 存储库名称应小写

  2. 如果项目名称与有用的回购名称相同

  3. 添加了{ “ predeploy”:“ npm run build”, “ deploy”:“ gh-pages -d build” } on package.json

  4. 在package.json的开头添加首页脚本

    { “ homepage”:“ http:// [用户名] .github.io / [reponame]”, “名称”: ” - ”, “ version”:“-”, “私人”:布尔值, }