Gatsby JS - 生成 SSR 包失败

如何解决Gatsby JS - 生成 SSR 包失败

让 Gatsby 在开发模式下在 IE11 下工作时遇到问题。 当我执行 npm start 时，出现以下错误：

 ERROR #98123  WEBPACK

Generating SSR bundle failed

.cache\develop-static-entry.js: Unexpected token,expected "," (31:10)

  29 | export default (pagePath,callback) => {
  30 |   let headComponents = [
> 31 |     <meta key="environment" name="note" content="environment=development" />,|           ^
  32 |   ]
  33 |   let htmlAttributes = {}
  34 |   let bodyAttributes = {}

File: .cache\develop-static-entry.js:31:10

这是我的 .babelrc 文件的样子

{
  "plugins": [
    ["@babel/plugin-proposal-decorators",{ "legacy": true }],["@babel/plugin-transform-arrow-functions"],["@babel/plugin-transform-object-super"],["@babel/plugin-transform-classes"],["@babel/plugin-transform-react-jsx"],["@babel/plugin-transform-typescript"]
  ],"presets": [["babel-preset-gatsby-package"]]
}

这是 gatsby-cli 的版本

"gatsby-cli": "^2.12.99",

我尝试了很多方法，但找不到解决方案。

解决方法

这是一个非常广泛的问题，缺乏试验。 IE 回退可能会因无数原因和代码片段而失败。在尝试为 IE11 调试一些有问题的代码时，请尝试在您的 .babelrc 中添加以下代码段：

{
  "plugins": [
    ["@babel/plugin-proposal-decorators",{ "legacy": true }],["@babel/plugin-transform-arrow-functions"],["@babel/plugin-transform-object-super"],["@babel/plugin-transform-classes"],["@babel/plugin-transform-react-jsx"],["@babel/plugin-transform-typescript"]
  ],"presets": [
    [
      "@babel/preset-env",{
        "useBuiltIns": "usage","corejs": 2
      }
    ],[
      "babel-preset-gatsby",{
        "targets": {
          "browsers": [
            ">0.25%","not dead"
          ]
        }
      }
    ]
  ],}

您似乎缺少 Gatsby 的一些 Babel 预设：

• babel-preset-gatsby
• babel-preset-env：这可能不是必需的，如果编译失败可以省略它。
• babel-preset-gatsby-package：似乎是支持 babel-preset-gatsby 的弃用依赖项，如果它导致问题，请将其删除。

通过 npm 或 yarn 安装它们并使用它们。

或者，您可以尝试将以下代码段添加到您的 gatsby-node.js：

exports.onCreateWebpackConfig = function onCreateWebpackConfig({ actions,stage,loaders }) {
  if (stage === 'develop') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /react-hot-loader/,use: [
              loaders.js()
            ]
          }
        ]
      }
    })
  }
}

来源：https://github.com/gatsbyjs/gatsby/issues/14502（您可以遵循其他解决方法）