webpack：找不到模块：错误：无法解析（使用相对路径）

Question

我有一个应用程序的结构（

node_modules

目录不包括在这个列表中）：

├── actions.js
├── bundle.js
├── components
│   ├── App.js
│   ├── Footer.js
│   ├── Link.js
│   ├── Todo.js
│   └── TodoList.js
├── Containers
│   ├── AddTodo.js
│   ├── FilterLink.js
│   └── VisibleTodoList.js
├── index.html
├── index.js
├── main.js
├── package.json
├── package-lock.json
├── reducers.js
└── webpack.config.js

我的 webpack 配置如下所示：

module.exports = {
    entry: "./main.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          }
        ]
    }
};

npm 配置：

{
  "name": "webpack-redux",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "nothing"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^3.5.5"
  },
  "dependencies": {
    "react": "^15.6.1",
    "babel-preset-react": "^6.24.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2"
  }
}

当我运行

webpack

命令时，出现此错误：

ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/AddTodo' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/App.js 11:15-47
 @ ./index.js
 @ ./main.js

ERROR in ./components/Footer.js
Module not found: Error: Can't resolve '../containers/FilterLink' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/Footer.js 11:18-53
 @ ./components/App.js
 @ ./index.js
 @ ./main.js

ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/VisibleTodoList' in '/home/oerp/js-programs/redux-test/components'
 @ ./components/App.js 15:23-63
 @ ./index.js
 @ ./main.js

我的

components/App.js

内容是这样的：

import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

export default App

例如

containers/AddTodo.js

：

import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
  let input

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault()
          if (!input.value.trim()) {
            return
          }
          dispatch(addTodo(input.value))
          input.value = ''
        }}
      >
        <input
          ref={node => {
            input = node
          }}
        />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )
}
AddTodo = connect()(AddTodo)

export default AddTodo

它似乎不理解带双点的相对路径，例如

../something

？

我需要以某种方式配置

webpack

才能让它理解这些路径吗？

Answer 1

您的文件结构显示文件夹名称为

Container

，大写 C。但是您尝试通过

container

，小写 c 导入它。您将需要更改导入或文件夹名称，因为路径区分大小写。

Answer 2

我用

typescript

遇到了这个问题，但忘记在

ts

条目中添加

tsx

和

resolve

后缀。

module.exports = {
  ...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

这对我来说很合适

Answer 3

您必须在 webpack.config.js 中使用以下代码来指示 webpack 解析源代码

module.exports={
   ...
   resolve:{
      extensions:['.js','.jsx'];
   }
}

更新：有一个新的构建工具“Vite”，旨在为现代 Web 项目提供更快、更精简的开发体验。它是一个即插即用工具，需要很少的配置。

Answer 4

导入库时使用文件的确切路径，包括相对于当前文件的目录，例如：

import Footer from './Footer/index.jsx'
import AddTodo from '../containers/AddTodo/index.jsx'
import VisibleTodoList from '../containers/VisibleTodoList/index.jsx'

希望这会有所帮助

Answer 5

刚刚遇到这个...我有一个在多个转译产品之间共享的公共库。我使用符号链接和早午餐来处理项目之间的共享。当迁移到 webpack 时，这不再起作用。

让事情正常工作的是使用 webpack 配置来关闭符号链接解析。

即将其添加到

webpack.config.js

：

module.exports = {
  //...
  resolve: {
    symlinks: false
  }
};

如此处记录：

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

Answer 6

如果您使用多个

node_modules

（yarn 工作区等），请告诉 webpack 它们在哪里：

  externals: [nodeExternals({
    modulesDir: path.resolve(__dirname, '../node_modules'),
  }),  nodeExternals()],

Answer 7

我在将项目转换为 TypeScript 后遇到了这个问题。对我来说，问题是我的项目没有 tsconfig.json 文件。我的解决方案是创建一个新的 TypeScript 项目，并将 tsconfig.json 文件从新创建的项目复制到我的项目中。

Answer 8

我遇到了类似的问题。我通过从旧的 [电子邮件受保护] 和 [电子邮件受保护] 升级到 [电子邮件受保护] 和 [电子邮件受保护] 解决了这个问题。

Answer 9

与这个问题无关，对于使用打字稿的人来说，你应该首先通过

初始化ts

npx tsc --init

那么如果你使用的是react，你应该在 tsconfig.json 文件中添加这个标志

"jsx": "react",

Answer 10

遇到同样的问题，找不到模块。原来我有一个组件

import Picture from './Picture/Picture';

位于所有进口的最底部。当我将其移至

import React, { Component } from 'react';

下方时，它起作用了。

Answer 11

只需将其添加到您的配置中即可。来源：https://www.jumoel.com/2017/zero-to-webpack.html

externals: [ nodeExternals() ]

Answer 12

查看路径，例如此导入不正确 从'@/components/Navbar.vue'导入导航栏 应该看起来像这样 ** 从 './components/Navbar.vue' 导入导航栏**

Answer 13

我有一个不同的问题。我的一些包含设置为“app/src/xxx/yyy”而不是“../xxx/yyy”

Answer 14

将

templateUrl: ''

更改为

template: ''

修复了它

webpack：找不到模块：错误：无法解析（使用相对路径）

问题描述投票：0回答：14

14个回答

最新问题

webpack：找不到模块：错误：无法解析（使用相对路径）

问题描述 投票：0回答：14

14个回答

最新问题

问题描述投票：0回答：14