2016-12-19 67 views
2

我正在用打字稿重寫一些反應的服務器端渲染文件,並且我遇到了一個找到我的自定義組件的問題。爲什麼node.js無法找到其他打字稿React組件

路徑結構:

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

當node.js的解析Homepage.tsx,它可以找到不過所有模塊node_modules下像reactmemobind,它未能找到我的組件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" 
    ] 
} 
+0

這是一個表明你也在使用Babel的堆棧跟蹤。目前還不清楚您正在使用的其他工具。你在使用babel-node嗎?你怎麼編譯這個?你如何運行? –

回答

1

我的猜測是:

Layout.tsx不編譯,因爲你使用的 '類',而不是 '類名'。

因此...有不產生Layout.js,(或在捆綁的輸出相關的代碼)...

然後...基於以下事實:

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

你說它不起作用,......只有當你嘗試使用「layout.tsx」。假設您沒有「可見」編譯錯誤,則爲 。 假設太多東西....