我正在用 typescript 重写一些 React 服务器端渲染文件,但我遇到了寻找自定义组件的问题。
路径结构:
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)
主页.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"
]
}
最佳答案
我的猜测是:
Layout.tsx 未编译,因为您使用的是“class”而不是“className”。
因此 ...没有生成的 Layout.js,(或捆绑输出中的相关代码)...
然后……
at Function.Module._resolveFilename (module.js:470:15)
基于你说它不起作用的事实,......只有当你尝试使用“layout.tsx”时。 假设您没有“可见”的编译错误。 假设太多的事情....
关于javascript - 为什么 node.js 无法定位其他 typescript React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41217334/