將 App.Js 導入節點時的 BABEL_PARSE_ERROR

Question

所以我一直試圖讓我彈出的 create-react-app 切換到服務器端呈現。 這是我的文件結構的簡化版本：

...
/client
  /build
  /public
  package.json
  /src
    index.js
    /components
      /app
        App.js
/routes
  /api
    Canvas.js
.babelrc
server.js
package.json
...

我正在嘗試將 App.js 導入 Canvas.Js，以便我可以在 ReactDOMServer.renderToString() 中使用它； 但是，問題在於實際導入。 導入會出現此錯誤：

client/src/components/app/App.js: Unexpected token (34:4)

  32 | 
  33 |   return (
> 34 |     <div>
     |     ^
  35 |       <IconSettings
    at Parser.raise (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/location.js:41:63)
    at Parser.unexpected (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/util.js:150:16)
    at Parser.parseExprAtom (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:1116:20)
    at Parser.parseExprSubscripts (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:526:23)
    at Parser.parseMaybeUnary (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:506:21)
    at Parser.parseExprOps (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:295:23)
    at Parser.parseMaybeConditional (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:247:23)
    at Parser.parseMaybeAssign (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:195:21)
    at Parser.parseParenAndDistinguishExpression (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:1293:16)
    at Parser.parseExprAtom (/Users/braydenparkinson/dev/workingAppopsCopy/appops-app/node_modules/@babel/parser/src/parser/expression.js:1023:21) {
  pos: 1681,
  loc: Position { line: 34, column: 4 },
  code: 'BABEL_PARSE_ERROR'
}

我只是把它拉進來：

const App = require('../../client/src/components/app/App');

我同時使用了 require 和 import，結果相同。 不是這樣，那應該改變任何事情，但萬一有人問。

這是我的 babelrc：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-react-jsx"]
}

這是我的 package.json：

{
  "name": "express-canvas-app",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "babel-node server.js",
    "build": "babel server.js --out-file server.compiled.js",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.0.0-beta.40",
    "@babel/register": "7.8.3",
    "@material-ui/core": "^4.4.3",
    "@salesforce-ux/design-system": "^2.10.2",
    "@salesforce/design-system-react": "^0.10.16",
    "aws-param-store": "^3.2.0",
    "aws-sdk": "^2.594.0",
    "axios": "^0.19.0",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "babel-preset-es2015": "^6.24.1",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "crypto-js": "^3.1.9-1",
    "dotenv": "^8.2.0",
    "enzyme": "^3.10.0",
    "express": "^4.17.1",
    "express-sse": "^0.5.1",
    "fs": "0.0.1-security",
    "http": "0.0.0",
    "https": "^1.0.0",
    "jsforce": "^1.9.3",
    "node-cache": "^5.1.0",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.3.1",
    "salesforce-signed-request": "0.0.1",
    "validator": "^11.1.0",
    "webpack-node-externals": "^1.7.2"
  },
  "devDependencies": {
    "@salesforce/babel-preset-design-system-react": "^3.0.0",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-plugin-import": "^2.18.2",
    "eslint-plugin-jest": "^23.0.4",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-react-hooks": "^1.7.0",
    "nodemon": "^1.19.2",
    "npm-run-all": "^4.1.5",
    "salesforce-signed-request": "0.0.1",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-node-externals": "^1.7.2"
  }
}

任何幫助或想法都會很棒！ 過去幾天我一直在努力確定我的錯誤並配置 babel！

Answer 1

我認為在這種特殊情況下，我仍然在客戶端文件夾中有一些 webpack 和 package json 文件。 在使用 webpack.server.js 和 package.json 將邏輯移植到一個新的應用程序后，我似乎已經解決了這個問題。