Почему node.js не может найти другие компоненты React машинописного текста

Question

Я переписываю некоторые реагирующие серверные файлы рендеринга с помощью машинописи, и я просто столкнулся с проблемой поиска своих пользовательских компонентов.

Структура пути:

node_modules/
src/
    page/Homepage.tsx
    component/Layout.tsx
    utility/
typings/

Когда node.js анализирует Homepage.tsx, он может найти все модули под node_modules лайк react а также memobindОднако он не может найти мой компонент Layout, Мой IDE phpstorm не имеет проблем с определением местоположения моего компонента, но когда я захожу на страницу, он дает:

 Error: Cannot find module '../component/Layout'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/base/node/src/page/Homepage.tsx:5:1)
    at Module._compile (module.js:571:32)
    at loader (/home/base/node/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (/home/base/node/node_modules/babel-register/lib/node.js:154:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at /home/base/node/socket.js:90:25
    at Layer.handle [as handle_request] (/home/base/node/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/base/node/node_modules/express/lib/router/route.js:131:13)

Homepage.tsx:

import * as React from "react";
import memobind from 'memobind'
import {Layout} from '../component/Layout'

class Homepage extends React.Component<{},{}>{

    render(){

        return <Layout><h4>Hello!!!</h4></Layout>
    }

}

module.exports = Homepage;

Layout.tsx:

import * as React from "react";

export class Layout extends React.Component<{},{}>{

    render(){

        return <div class="header">{this.props.children}</div>
    }

}

Когда я удаляю компонент Layout из скрипта все отлично работает.

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "moduleResolution": "node",
    "baseUrl": "src",
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "jsx": "react",
    "experimentalDecorators": true,
    "noLib": false,
    "declaration": false
  },
  "exclude": [
    "node_modules"
  ]
}

Answer 1

Мое предположение:

Layout.tsx не компилируется, потому что вы используете "class" вместо "className".

следовательно... нет сгенерированного Layout.js (или связанного кода в выходных данных) ...

затем...

at Function.Module._resolveFilename (module.js:470:15)

исходя из того, что вы сказали, что это не работает,... только когда вы пытаетесь использовать "layout.tsx". при условии, что у вас нет "видимых" ошибок компиляции. предполагая слишком много вещей....