BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] SyntaxError: React (Javascript)をインポートする予期しない識別子 [重複].

2022-02-13 18:30:02

質問

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>

index.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の識別子がコンパイルされないのです。 私はいくつかの助けを感謝します:)

解決方法は？

問題は、スタートスクリプト（webpackの設定を無視したもの）です。 

"start": "node ./Client/src/index.js"

を使用することを検討する必要があります。 webpack-dev-server というようなことをします。 

"start": "webpack-dev-server --mode development",

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します