使用webpack打包时,Module not found:

使用webpack打包时,Module not found:在使用webpack打包React的时候,出现了一个Modulenotfound的错误。ERRORin./src/common.jsModulenotfound:Error:Can’tresolve’react-demo-1’in’G:\chenqk\app\webpack-react-project\src’@./src/common.js11:17-40…

在使用webpack打包React的时候,出现了一个Module not found的错误。

ERROR in ./src/common.js
Module not found: Error: Can't resolve 'react-demo-1' in 'G:\chenqk\app\webpack-react-project\src'
 @ ./src/common.js 11:17-40

由于刚接触,不是很懂,就很疑惑的在网上查了一下,结果发现并没有什么类似的问题。网上谈到的大都是关于在引入第三方库时出现这个问题,那么多半都是没有安装,而直接拿来import了,导致找不到组件,才会报错。

由于是自己写的一个简单的组件,出现这个错误就没法参考网上的意见了,但是,总觉得应该是同一类型的错误,要么就是没定义,要么就是引入的问题。

但是在,import是IDE会自动提示,引入的组件,按照提示引入的文件,在运行时居然也会报错。

后来就想到是不是文件的引入路径有问题呢?

这是我的工作目录

使用webpack打包时,Module not found:

在common.js中引入react-demo-1.js文件,这个是之前的写法:

react-demo-1.js文件:

import React from "react";

class HelloWorld extends React.Component {
    render() {
        return React.createElement('h1', null, 'Hello World!');
    }
}

export default HelloWorld;

common.js文件:

import React from "react";
import ReactDom from "react-dom";
import HelloWorld from "react-demo-1";

ReactDom.render(<HelloWorld/>, document.getElementById("react-container"));

在这里可以看到我的react-demo-1就是跟common同一级目录的文件,但在这里有问题,记得在跟着视频做练习时,老师曾经说过要使用相对路径./的形式,于是改了一下

import React from "react";
import ReactDom from "react-dom";
import HelloWorld from "./react-demo-1";

ReactDom.render(<HelloWorld/>, document.getElementById("react-container"));

在执行webpack进行打包时,没出现错误

G:\chenqk\app\webpack-react-project>webpack
Hash: 430d58b5c7969b1b6060
Version: webpack 4.31.0
Time: 4614ms
Built at: 2019-05-14 15:30:52
    Asset        Size  Chunks             Chunk Names
 entry.js     118 KiB    0, 2  [emitted]  entry
entry0.js  1020 bytes       1  [emitted]  entry0
entry1.js    9.55 KiB       2  [emitted]  entry1
Entrypoint entry = entry.js
Entrypoint entry0 = entry0.js
Entrypoint entry1 = entry1.js
 [3] ./src/react-demo-1.js 2.24 KiB {0} {2} [built]
 [4] ./src/common.js 527 bytes {0} [built]
 [9] (webpack)/buildin/global.js 472 bytes {0} [built]
[10] ./src/react-demo-0.js 88 bytes {1} [built]
    + 7 hidden modules

然后执行live-server,查看浏览器显示,一切正常

使用webpack打包时,Module not found:

如果,你也出现自定义组件,module not find错误时,不妨也这么试一下

今天的文章使用webpack打包时,Module not found:分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/25828.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注