[英]React: "Module not found: Can't resolve" Path error
I have this code in my src/components :我的src/components中有这段代码:
import PropTypes from 'prop-types';
import React from 'react';
import Typography from 'Typography';
I have one file named Typography.js in the same directory .我在同一目录中有一个名为 Typography.js 的文件。
I have two Ubuntu systems.我有两个 Ubuntu 系统。 In one system, this code is working fine, and in the other, it gives this error on line 3:
在一个系统中,这段代码运行良好,而在另一个系统中,它在第 3 行给出了这个错误:
Module not found: Can't resolve 'Typography'
未找到模块:无法解析“排版”
If I use import Typography from './Typography';
如果我使用
import Typography from './Typography';
then it won't give me the error, but why does the same code work on one system but not the other?那么它不会给我错误,但是为什么相同的代码在一个系统上工作而在另一个系统上却不行?
Should I have used import Typography from './Typography';
我应该使用
import Typography from './Typography';
everywhere?到处?
here is my webpack-config这是我的webpack 配置
resolve: {
modules: ['node_modules', paths.appNodeModules].concat(
process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
),
extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
alias: {
'babel-runtime': path.dirname(
require.resolve('babel-runtime/package.json')
),
'react-native': 'react-native-web',
},
plugins: [
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
],
}
I have the same problem when trying to use a front end template, in which they always use我在尝试使用前端模板时遇到了同样的问题,他们总是使用
import Typography from 'Typography';
instead of the relative path:而不是相对路径:
import Typography from './Typography'
And the template actually works in one laptop, and not the other.该模板实际上适用于一台笔记本电脑,而不是另一台笔记本电脑。
And it seems to have something to do with the environment variable NODE_PATH
, some how it is different between laptops, I am not sure why.它似乎与环境变量
NODE_PATH
,笔记本电脑之间有什么不同,我不确定为什么。
So, my quick fix here is to create a file named .env
in the same folder as package.json
, with this one line NODE_PATH=./src
, this will helps setting NODE_PATH
to ./src
value.所以,我在这里的快速修复是在与
package.json
相同的文件夹中创建一个名为.env
的文件,这一行NODE_PATH=./src
,这将有助于将NODE_PATH
设置为./src
值。
Err, hope you still need the answer!呃,希望你还需要答案!
Since the file is in same directory由于文件在同一目录中
If it's not default export You should import it like如果它不是默认导出你应该像这样导入
import { Typography} from './Typography';
If default export, you should import it like如果默认导出,您应该像这样导入
import Typography from './Typography';
Module not found: Can't resolve <module name> in <file path>
I ran我跑了
npm install
npm build
npm start
Now the module has been installed under dependencies
in package.json
, and my web app starts in http://localhost:3000/
, the port specified in launch.json
.现在该模块已安装在
package.json
dependencies
下,并且我的 Web 应用程序在http://localhost:3000/
,该端口在launch.json
指定。
https://webpack.js.org/configuration/resolve/#resolvemoduleshttps://webpack.js.org/configuration/resolve/#resolvemodules
resolve.modules [string]: ['node_modules']
resolve.modules [string]: ['node_modules']
Tell webpack what directories should be searched when resolving modules.
告诉 webpack 在解析模块时应该搜索哪些目录。
Absolute and relative paths can both be used, but be aware that they will behave a bit differently.
绝对路径和相对路径都可以使用,但请注意,它们的行为会有所不同。
A relative path will be scanned similarly to how Node scans for node_modules, by looking through the current directory as well as its ancestors (ie ./node_modules, ../node_modules, and on).
通过查看当前目录及其祖先(即 ./node_modules、../node_modules 等),将类似于 Node 扫描 node_modules 的方式扫描相对路径。
With an absolute path, it will only search in the given directory.
使用绝对路径,它只会在给定的目录中搜索。
webpack's resolve.modules
is an array containing paths that webpack will use to resolve directory in your code.的WebPack的
resolve.modules
是包含路径是会的WebPack在代码中使用到的决心目录的数组。 So, if you use:所以,如果你使用:
import Typography from 'Typography';
the array in resolve.modules
should contain src/components
or any equivalent so that webpack knows where to look for folder Typography.在阵列
resolve.modules
应包含src/components
或任何等同的,以便知道的WebPack在何处查找文件夹印刷术。 You can try to look into that configuration part to see if the same path is there.您可以尝试查看该配置部分以查看是否存在相同的路径。
For me, react was importing using relative paths.对我来说,react 是使用相对路径导入。
For my project, i made the src folder the go to folder.对于我的项目,我将 src 文件夹设置为转到文件夹。
create a jsconfig.json file in your root dir(where package.json is located) and add this:在根目录(package.json 所在的位置)中创建一个 jsconfig.json 文件并添加:
{
"compilerOptions": {
"baseUrl": "src"
}
}
Also create an .env or .env.template file in the project's root dir(where package.json is located) if none exist, and add如果不存在,还要在项目的根目录(package.json 所在的位置)中创建一个 .env 或 .env.template 文件,然后添加
NODE_PATH=src
// and if this does not work try
NODE_PATH=./src
This should allow react to compile.这应该允许反应编译。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.