- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在关注 Site Point tutorial尝试创建一个 React 应用程序。
我坚持这些步骤:
第一个命令会失败,因为我已经有了一个“公共(public)”文件夹(?),里面有很多资源文件夹和 index.html。
npm install 工作正常。
npm run development 遇到语法错误:
ERROR in ./app-client.js
Module build failed: SyntaxError: Unexpected token (12:2)
10 |
11 | const Routes = (
> 12 | <Router history={history}>
| ^
13 | { routes }
14 | </Router>
15 | )
第 n 次复制粘贴所有内容后,我很确定 app-client.js 中没有任何拼写错误。在这里:
// app-client.js
import React from 'react'
import { render } from 'react-dom'
import { Router } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
const history = createBrowserHistory()
// Routes
import routes from './routes'
const Routes = (
<Router history={history}>
{ routes }
</Router>
)
const app = document.getElementById('app')
render(Routes, app)
我的文件夹结构与教程中的相同:
package.json
public
|-css
|-bootstrap.min.css
|-cosmic-custom.css
|-js
|-jquery.min.js
|-bootstrap.min.js
|-clean-blog.min.js
views
|-index.html
webpack.config.js
这也让我很困惑,为什么我会在这里运行“mkdir public”?
我尝试重命名文件以具有 .jsx 结尾;那没有用。此外,这是我的 webpack.conf.js 文件:
// webpack.config.js
var webpack = require('webpack')
module.exports = {
devtool: 'eval',
entry: './app-client.js',
output: {
path: __dirname + '/public/dist',
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{ test: /\.js$/, loaders: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loaders: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} }
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.COSMIC_BUCKET': JSON.stringify(process.env.COSMIC_BUCKET),
'process.env.COSMIC_READ_KEY': JSON.stringify(process.env.COSMIC_READ_KEY),
'process.env.COSMIC_WRITE_KEY': JSON.stringify(process.env.COSMIC_WRITE_KEY)
})
]
};
最佳答案
在您的 webpack.config.js
中,您需要修改加载器,
首先,不是两次包含同一个加载器,而是只包含一次。
其次,不要在 loaders 数组中使用加载器,而是使用不带 s
的 loader
。
如下所示:
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }
]
}
最后安装 babel-preset-stage-0、babel-preset-react、es2015 作为开发依赖项,如 npm install --save-dev babel-preset-stage-0 babel-preset-es2015 babel-preset-react
,并使用这样的内部查询对象:
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/,
query: {presets: ['stage-0','es2015', 'react']} }
]
}
最好的另一种方法是创建 .babelrc
文件而不是在根目录中的 webpack.config.js
中查询(你的 webpack.config.js
) 是然后包含以下代码:
{presets: ['stage-0','es2015', 'react']}
如果所有这些都令人难以抗拒,那么最好的起点 React不用担心任何依赖或其他问题是 create-react-app .
关于javascript - 遵循 React + Node.js 博客教程时出现语法错误 "Unexpected token",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47551058/
一旦在 qconsole Marklogic 中运行以下代码,我就会遇到以下错误 XDMP-UNEXPECTED: (err:XPST0003) Unexpected token syntax err
我已经在我的包中编写了这个函数。 def partitionIntoDays(ls, number, lookupKey=None): ''' Partitions the location
我只是一个 android 初学者,我已经安装了 Android Studio(版本是 1.0.2),并创建了一个新的空白应用程序,按照名为“构建你的第一个应用程序”的官方教程,我学习到这个页面' h
这只是前几天工作,但我刚刚将我的代码更新到运行乘客 2.2.4 的审查服务器,而我的 2.3.4 rails 应用程序现在无法在那个盒子上启动。 乘客报告: Passenger encountered
我正在尝试使用带有 Angular 2的整页, 将其导入我的 app.module.ts 时出现以下错误。 "(SystemJS) Unexpected token ) at Obje
TFS2015 vNext 构建失败并出现记录器错误(下面附有错误消息)。根据我的调查,这看起来与 CentralLogger - "Microsoft.TeamFoundation.Distribu
计算机科学学校项目。我需要编写一个程序,其中用户声明数组的大小,然后以数字、非递减顺序填充数组,然后声明一个值 x。然后将 X 分配到适当的位置,以便整个数组按数字、非递减顺序排列。然后输出该数组。
在这 2 个方法中,inspect1 显示编译错误“Unexpected bound”而 inspect2 工作正常,为什么? public void inspect1(List u){ S
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我正在尝试运行以下代码,但遇到了“此时意外”错误。 (echo COPY (SELECT ta.colA as name, ta.colB as user_e, ta.colC as user_n,
我有以下查询: select u.UserName, count(*) as total from Voting v join User u using (UserID) where unique (
我们有以下查询在 MSSQL 中完美运行但在 MySQL 中无法运行: select CONVERT(datetime, dateVal) as DateOccurred, itemID, COUNT
我的代码中存在缩进错误问题。它看起来是正确的...有人能指出我做错了什么吗?我的查询行不断收到错误。 def invoice_details(myDeliveryID): conn = pym
我有以下代码: int a , b , sum; cin>>a>>b; sum=a+b; cout>a>>b>>c; cout<
这个问题不太可能帮助任何 future 的访问者;它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关,这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用,visit
我在一个批处理文件上运行这个命令: for %I in (*.txt *.doc) do copy %I c:\test2 ...它不断返回: I was unexpected at this tim
创建查询时出现错误: 'from' unexpected 我的代码如下: @Override public Admin findByAdmin(Admin admin) {
我正在尝试运行此 python 代码,但我不断收到错误消息“意外缩进”。我不确定怎么了。间距似乎很好。有什么想法吗? services = ['Service1'] for service in
我在名为“circular_dependency”的目录中有一些 python 文件: 导入文件_1.py: from circular_dependency.import_file_2 import
我正在尝试使用 gcc 编译代码并运行可执行文件,但它抛出错误: gcc somefile.c -o somefile 编译成功。但是,当我尝试执行它时: $sh somefile 它导致:语法错误:
我是一名优秀的程序员,十分优秀!