javascript - Gatsby JS : error TS2451: Cannot redeclare block-scoped variable 'react_1'

Question

我正在尝试将 typescript 与 gatsbyjs 中的自定义路由集成，如下所示:

require("source-map-support").install();
require("ts-node").register();

exports.createPages = require("./src/createPages");

tsconfig.json

{
  "include": ["./src/**/*"],
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "lib": ["es2015", "es2017"],
    // "allowJs": true,
    // "checkJs": true,
    "jsx": "react",
    "strict": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmit": true,
    "skipLibCheck": true
  }
}

gastby-config.js

  plugins: [
    `gatsby-plugin-typescript`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/templates`,
        name: "markdown-pages"
      }
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-svg`
  ]
};

但是当我尝试导入位于 routes 文件夹中的自定义路由时，出现以下错误:

src/Layout.tsx(6,7):错误 TS2451:无法重新声明 block 范围变量“react_1”。

对于我使用的路线

import Index from "../pages";

const routes = {
  home: {
    path: "/",
    component: Index
  }

};

// Same keys as 'routes', but the value is only the path.
const paths = Object.keys(routes).reduce((acc, route) => {
  acc[route] = routes[route].path;
  return acc;
}, {});

export { routes, paths };

createPages 包含:

import { routes } from "./routing";

const createPages = ({ actions, graphql }) => {
  const { createPage } = actions;

  Object.keys(routes).forEach(route => createPage(routes[route]));
};

export default createPages;

布局.tsx

import React from "react";
import Footer from "./Footer";
import Header from "./Header";
import "./scss/style.scss";
import "./logo.css";

const Layout: React.SFC<any> = props => {
  return (
    <>
      <Header />
      {props.children}
      <Footer />
    </>
  );
};

export default Layout;

由于我对 Gatsby 相当陌生，所以我关注了 https://dev.to/hugecoderguy/routing-with-gatsby-and-react-4dlh集成路由。但这与 typescript 结合似乎会给出一些 typescript 错误。对此有什么想法吗？

Answer 1

修正如下:

• 更改了组件，如下所示:resolve(__dirname, "../components/pages/IndexPage.tsx")
• tsconfig 至:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": false,
    "module": "commonjs",
    "target": "esnext",
    "jsx": "react",
    "lib": ["dom", "es2015", "es2017"],
    "allowSyntheticDefaultImports": true
  },
  "include": ["./src/**/*"]
}

希望它对将来的人有所帮助。