为什么node.js无法find其他types的React组件

我正在用打字机重写一些反应的服务器端渲染文件,而我只是遇到了一个find我的自定义组件的问题。

path结构:

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

当node.jsparsingHomepage.tsx ,它可以find像reactmemobind这样的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" ] } 

我的猜测是:

Layout.tsx不会编译,因为您使用'class'而不是'className'。

因此…没有生成的Layout.js(或捆绑输出中的相关代码)…

然后 …

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

基于你说它不起作用的事实,…只有当你尝试使用“layout.tsx”。 假设你没有“可见的”编译错误。 假设太多的东西….