Question

我的 src / components 中有此代码：

import PropTypes from 'prop-types';
import React from 'react';
import Typography from 'Typography';

我在相同目录中有一个名为Typography.js的文件。

我有两个Ubuntu系统。在一个系统中，此代码可以正常工作，而在另一个系统中，则在第3行中给出此错误：

未找到模块：无法解析“版式”

如果我使用import Typography from './Typography';，它不会给我错误，但是为什么相同的代码在一个系统上却不能在另一个系统上起作用？

我应该到处使用import Typography from './Typography';吗？

这是我的 webpack-config

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]),
    ],
  }

Answer 1

尝试使用前端模板时，我总是遇到同样的问题

import Typography from 'Typography';

代替相对路径：

import Typography from './Typography'

模板实际上可以在一台笔记本电脑上工作，而不能在另一台笔记本电脑上工作。

似乎与环境变量NODE_PATH有关，有些与笔记本电脑之间的区别，我不确定为什么。

因此，我的快速解决方法是在与.env相同的文件夹中创建一个名为package.json的文件，并在这行NODE_PATH=./src中进行设置，这将有助于设置NODE_PATH到./src的值。

Err，希望您仍然需要答案！

Answer 2

由于文件位于同一目录

如果不是默认导出，则应将其导入

  import { Typography} from './Typography';

如果是默认导出，则应以类似方式导入

 import Typography from './Typography';

Answer 3

Module not found: Can't resolve <module name> in <file path>

我跑了

npm install
npm build
npm start

现在该模块已安装在dependencies的{{1}}下，并且我的Web应用程序从package.json（在http://localhost:3000/中指定的端口）启动。

Answer 4

https://webpack.js.org/configuration/resolve/#resolvemodules

resolve.modules [string]：['node_modules']

告诉webpack解决时应搜索哪些目录   模块。

绝对路径和相对路径都可以使用，但是请注意它们   行为会有所不同。

相对路径的扫描方式与Node扫描方式相似   通过查看当前目录及其目录，查看node_modules   祖先（即./node_modules、../node_modules等）。

具有绝对路径，它将仅在给定目录中搜索。

webpack的resolve.modules是一个数组，其中包含webpack用来解析代码中目录的路径。因此，如果您使用：

import Typography from 'Typography';

resolve.modules中的数组应包含src/components或任何等效的内容，以便Webpack知道在哪里查找文件夹排版。您可以尝试查看该配置部分，以查看是否存在相同的路径。

反应：“找不到模块：无法解决”路径错误

4 个答案: