Экспортированные модули возвращают неопределенное значение при использовании синтаксиса реакции - PullRequest
Новая
       11

Экспортированные модули возвращают неопределенное значение при использовании синтаксиса реакции

0 голосов
/ 17 марта 2020

Я использую следующий. js и Typescript , все компилируется нормально, когда я пытаюсь проследить любую страницу, которую вижу в консоли ( SSR далее) ошибки, возникшие при неопределенном импорте.

Я получил, что любой файл .tsx , содержащий синтаксис реагирования (<div />), возвращает значение undefined, если импортируется как модуль. И даже если я не экспортирую компонент и попытаюсь экспортировать что-то еще (например, string), он все равно возвращает неопределенное значение.

Если я использую компонент statefull и возвращаю null из средства визуализации - он работает нормально и модуль возвращает функцию.

My .babelr c: 

{
  "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__"
            }
          }
        ]
      ]
    }
  }
}

My 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 является обычным, для расширения функциональности ничего не использовалось.

Раньше все работало нормально, но вместо tslint я интегрировал eslint и имел много исправления.

1 Ответ

0 голосов
/ 17 марта 2020

Я решил проблему, изменив целевой параметр tsconfig. json на es2020, а модуль на esnext, поэтому по какой-то причине он теперь работает нормально. У меня была проблема выше, потому что мне нужно разобрать ts в es5, потому что я запускаю сервер с помощью обычной команды узла ./server/index.js (импорт не будет понятен). Итак, теперь у меня есть 2 файла tsconfig. json с конфигурациями сервера и клиента

...