开发者社区> 问答> 正文

react中自定义组件importl路径正确,代码也不报错但启动和打包都提示我的?报错

开发环境基于react16+typescript3+webpack4

错误简述:

入口文件index.tsx:

 import * as React from 'react'
 import * as ReactDOM from 'react-dom'

 import Manager from './components/Manager'

 ReactDOM.render(
      <Manager />,
     document.getElementById('root') as HTMLElement
   )

Manager组件:

import * as React from 'react'  
interface IProps {
    empty?: any
}
interface IState {
    test1?: string
    test2?: string
}
export default class Manager extends React.Component<IProps, IState> {
    constructor(props: IProps) {
      super(props)
    }
    render() {
        return (
            <div>
                可以使用基础ts语法和react了
            </div>
        )
    }
}

yarn start和yarn build都报错:

 ERROR in ./src/index.tsx
Module not found: Error: Can't resolve './components/Manager' in 'E:\myWeb\coding\DEVENV\learing1011\react-dev-env-learing\src'
 @ ./src/index.tsx 3:0-43 4:36-43
 @ multi (webpack)-dev-server/client?http://localhost:8081 ./src/index.tsx

错误复现

            代码地址:
            https://github.com/dxiuxiu/react-dev-env-learing

            yarn install

            yarn start && yarn build都可以复现

展开
收起
爱吃鱼的程序员 2020-06-23 13:49:53 994 0
1 条回答
写回答
取消 提交回答
  • https://developer.aliyun.com/profile/5yerqm5bn5yqg?spm=a2c6h.12873639.0.0.6eae304abcjaIB

    问题已经解决了,错误原因是,webpack.config.js内容错误,将原来webpack.config.js内容全部替换为下面的内容即可解决:

    constpath=require("path");module.exports={mode:'development',entry:{index:["./src/index.tsx"],//入口文件,若不配置webpack4将自动查找src目录下的index.js文件},output:{filename:"js/[name].bundle.js",//输出文件名,[name]表示入口文件js名path:path.resolve(__dirname,'build/dist/'),//输出路径},resolve:{extensions:[".ts",".tsx",".js","jsx"],},devtool:'cheap-module-eval-source-map',module:{rules:[{test:/\.tsx?$/,loader:"awesome-typescript-loader"}]}}

    https://blog.csdn.net/u011481543/article/details/79477390

    2020-06-23 13:50:09
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
利用编译将 Vue 组件转成 React 组件 立即下载
React Native 全量化实践 立即下载
React在大型后台管理项目中的工程实践 立即下载