gpt4 book ai didi

javascript - 语法错误 : Unexpected identifier importing React (Javascript)

转载 作者:行者123 更新时间:2023-11-29 20:33:59 26 4
gpt4 key购买 nike

<分区>

运行命令“npm run start”后出现此错误:

import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:721:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

我尝试升级依赖项,并更改 webpack.config.js。

HTML(没什么花哨的)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import FormContainer from './js/components/container/FormContainer.jsx';

ReactDOM.render(<FormContainer />, document.getElementById('root'));

serviceWorker.unregister();

.babelrc

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}

package.json 脚本和依赖

"scripts": {
"webpack": "webpack",
"dev": "npm run webpack",
"build": "npm run webpack",
"start": "node ./Client/src/index.js"
}

...

"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.1.0",
"prop-types": "^15.7.2",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"express": "^4.17.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"to-string-loader": "^1.1.5"
}

webpack.config.js

module.exports = {
entry:"./client/src/index.js",
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/i,
use: ['to-string-loader', 'css-loader']
},
{
test: /\.[name]$/,
use: {
loader: "to-string-loader"
}
}
]
}
};

我很确定我的项目依赖项是正确的,但出于某种原因,React 标识符未编译。我将不胜感激 :)

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com