为什么 node.js 无法定位其他 typescript React 组件答案

【问题标题】：Why is node.js unable to locate other typescript React components为什么 node.js 无法定位其他 typescript React 组件
【发布时间】：2017-05-04 04:40:11
【问题描述】：

我正在用打字稿重写一些反应服务器端渲染文件，但我遇到了查找自定义组件的问题。

路径结构：

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

node.js解析Homepage.tsx时，可以定位到@987654323@下的所有模块，比如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)

主页.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;

布局.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"
  ]
}

【问题讨论】：

这是一个堆栈跟踪，表明您也在使用 Babel。目前尚不清楚您现在正在使用哪些其他工具。你在使用 babel-node 吗？你是如何编译这个的？你是怎么运行这个的？

标签： javascript node.js reactjs typescript isomorphic

【解决方案1】：

我的猜测是：

Layout.tsx 没有编译，因为你使用 'class' 而不是 'className'。

因此...没有生成的 Layout.js，（或捆绑输出中的相关代码）...

那么……

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

基于您说它不起作用的事实，...仅当您尝试使用“layout.tsx”时。假设您没有“可见的”编译错误。假设太多事情......

【讨论】：