ReactJS:意外令牌'<'
Posted
技术标签:
【中文标题】ReactJS:意外令牌\'<\'【英文标题】:ReactJS: unexpected token '<'ReactJS:意外令牌'<' 【发布时间】:2019-05-26 05:38:42 【问题描述】:您好,我尝试搜索其他问题,但我尝试的提到的解决方案均不适合我。
使用命令时:
npm 开始
我有一个错误:
./src/index.js 中的错误 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js): SyntaxError: D:/Kodilla/Projekty/webpack-to-do-app/src/index.js: Unexpected > token (6:4)
5 | ReactDOM.render( 6 | <App />, | ^ 7 | document.getElementById('app') 8 | );
package.json 中定义的命令:
"scripts":
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack"
,
index.js 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
ReactDOM.render(
<App />,
document.getElementById('app')
);
App.js 文件:
import React from 'react';
import uuid from 'uuid';
import style from './App.css';
class App extends React.Component
constructor(props)
super(props);
this.state =
data: []
;
addTodo(val)
const todo =
text: val,
id: uuid.v4(),
;
const data = [...this.state.data, todo];
this.setState(data);
removeTodo(id)
const remainder = this.state.data.filter(todo => todo.id !== id);
this.setState(data: remainder);
render()
return (
<div className=style.TodoApp>
Tutaj pojawią się komponenty naszej aplikacji.
</div>
);
export default App;
webpack.config.js 文件:
const path = require('path');
module.exports =
entry: './src/index.js',
output:
path: path.resolve(__dirname, 'build'),
filename: 'app.bundle.js'
,
module:
rules: [
test: /\.js$/,
loader: "babel-loader"
,
test: /\.css$/,
use: [
loader: 'style-loader',
loader: 'css-loader',
options:
modules: true
]
]
;
.babelrc 文件:
"presets": [
["env", "react"]
]
Link to repository
编辑: 我尝试了您建议我复制但复制 1:1 的帖子中的解决方案对我不起作用。我将我的 webpack 配置更改为:
module:
loaders: [...
test: /\.(js|jsx)?$/,
loader: 'babel-loader',
query:
presets: ['es2015', 'react']
]
,
问题仍然存在。我想我可能在提到的例子之外的其他地方做错了。
编辑 2:
-
我使用 babel-core@6.26.3 和 babel-loader@7.1.5 因为这些是项目的要求。
已安装 React 和 react-dom 依赖项。
预设:反应。 env, es2015, stage-0 安装者
首先建议 .babelrc 配置完成:npm install babel-preset-... --save-dev.
发生错误:“预设”:[“react”,“es2015”,“stage-0”]
找不到相对于目录的预设“@babel/preset-env” "...webpack-to-do-app\node_modules\css-loader"
我到底做错了什么?
问题已解决。
有帮助的事情: 1. 将预设从 babel-env、babel-react 更新为 @babel/preset-env 和 @babel/preset-react。 @babel-core 已安装,但 babel-core 留在原地。最终集:
"devDependencies":
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel": "^6.23.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"css-loader": "^2.1.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
,
2。卸载并安装 babel-loader,这会导致需要错误版本的 babel 本身。 @Alireza 您的建议部分正确。感谢您的帮助。
【问题讨论】:
reactjs Unexpected token '<'的可能重复 链接到 repo 根本没有帮助我。和你的代码不一样 【参考方案1】:请考虑将下面的配置放在你的 .babelrc 中
"presets": ["react", "es2015", "stage-0"]
它应该工作。 我还看到您在“预设”内有嵌套数组。每个预设都应该是预设元素之一。
我强烈建议您使用最新的 babel(版本 7)。当你升级到 babel 7 时,你应该下载 @babel/preset-react
和 @babel/preset-env
就足够了。
.babelrc 看起来像这样:
"presets": [
"@babel/react",
"@babel/env"
]
【讨论】:
配置本身有问题看看codesandbox.io/s/l7np0313k7 签出此链接codesandbox.io/s/z62m6kwwjx 你还应该在代码和框中安装 react 和 react-dom 的依赖项,我对你的链接所做的所有更改 是的,我也这样做了。 我使用 babel-core@6.26.3 和 babel-loader@7.1.5 因为这些是项目的要求。已安装 React 和 react-dom 依赖项。预设:反应。 env, es2015, stage-0 由 npm install babel-preset-... --save-dev 安装。首先 .babelrc config ("presets": ["react", "es2015", "stage-0"]) 完成。发生错误:找不到相对于目录“...webpack-to-do-app\\node_modules\\css-loader”的预设“@babel/preset-env”我做错了什么? 在 babel 7 上你必须安装 @babel/preset-env 和 @babel/preset-react 代替 (npm install -D @babel/preset-env @babel-preset-react) 的 babel-preset -react 和 ... 并像我上面提到的那样使用它们。以上是关于ReactJS:意外令牌'<'的主要内容,如果未能解决你的问题,请参考以下文章
意外的令牌 <Container> ,reactjs,打字稿