m0_37148591
SarinaDu
采纳率44.4%
2018-10-11 10:57 阅读 2.9k

react中自定义组件importl路径正确,代码也不报错但启动和打包都提示我的那个组件找不到不能被解析

20

开发环境基于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都可以复现
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    m0_37148591 SarinaDu 2018-10-15 02:44

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

     const path = 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"
          }
        ]
      }
    }
    
    
    点赞 评论 复制链接分享
  • devmiao devmiao 2018-10-11 15:57

相关推荐