使用 React 语法时导出的模块 returns 未定义

Question

我正在使用 next.js 和 Typescript，一切编译正常，当我尝试关注我看到的任何页面时在控制台中（SSR 从下一个）未定义的导入发生的错误。

我发现任何 .tsx 文件包含 react-syntax (<div />) returns undefined 如果导入为模块。即使我不导出组件并尝试导出其他内容（例如 string），它仍然 return 未定义。

如果我使用 statefull 组件和来自渲染器的 return null - 它工作正常并且模块 returns 功能。

我的.babelrc:

{
  "presets": [
    "next/babel",
    "@zeit/next-typescript/babel"
  ],
  "plugins": [
    "babel-plugin-styled-components",
    [
      "@babel/plugin-proposal-decorators",
      { "legacy": true }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      { "loose": true }
    ],
    [
      "module-resolver",
      {
        "alias": {
          "Components": "./build/components",
          "UI": "./build/uikit",
          "Utils": "./build/utils",
          "Hooks": "./build/hooks",
          "Contexts": "./build/contexts"
        }
      }
    ]
  ],
  "env": {
    "test": {
      "plugins": [
        "@babel/plugin-transform-typescript",
        [
          "module-resolver",
          {
            "alias": {
              "Components": "./src/components",
              "UI": "./src/uikit",
              "Utils": "./src/utils",
              "Hooks": "./src/hooks",
              "Contexts": "./src/contexts",
              "Models": "./src/models",
              "Mocks": "./src/__mocks__"
            }
          }
        ]
      ]
    }
  }
}

我的tsconfig.json:

{
    "compilerOptions": {
        "typeRoots": ["./node_modules/@types", "./src/**/*.d.ts"],
        "lib": ["dom", "dom.iterable", "esnext"],
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "outDir": "./build",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "sourceMap": true,
        "jsx": "preserve",
        "skipLibCheck": true,
        "pretty": true,
        "baseUrl": "./",
        "paths": {
            "Components/*": ["./src/components/*"],
            "Utils/*": ["./src/utils/*"],
            "Hooks/*": ["./src/hooks/*"],
            "UI/*": ["./src/uikit/*"],
            "Contexts/*": ["./src/contexts/*"],
            "Models/*": ["./src/models/*"],
            "Mocks/*": ["./src/__mocks__/*"]
        },
        "allowJs": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": false,
        "resolveJsonModule": true,
        "isolatedModules": true
    },
    "include": ["./src/**/*"],
    "exclude": ["./node_modules"]
}

next.config.js是普通的，没有用来扩展功能。

之前一切正常，但我集成了 eslint 而不是 tslint 并进行了很多更正。

Answer 1

我通过将 tsconfig.json 参数目标更改为 es2020 并将模块更改为 esnext 解决了该问题，因此出于某种原因，它现在可以正常工作了。我遇到了上面的问题，因为我需要将 ts 解析为 es5，因为我通过常规节点命令 ./server/index.js 启动服务器（无法理解导入）。所以现在我有 2 tsconfig.json 个包含服务器和客户端配置的文件

使用 React 语法时导出的模块 returns 未定义

Exported modules returns undefined when used react's syntax

module

undefined

typescript

reactjs

next.js