Question

我已经开始使用webpack2（准确地说，v2.3.2），在重新创建配置后，我一直遇到一个我似乎无法解决的问题。我得到了（对于丑陋的转储事先抱歉）：

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
resolve 'components/DoISuportIt' in '[absolute path to my repo]/src'
  Parsed request is a module
  using description file: [absolute path to my repo]/package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    aliased with mapping 'components': '[absolute path to my repo]/src/components' to '[absolute path to my repo]/src/components/DoISuportIt'
      using description file: [absolute path to my repo]/package.json (relative path: ./src)
        Field 'browser' doesn't contain a valid alias configuration
      after using description file: [absolute path to my repo]/package.json (relative path: ./src)
        using description file: [absolute path to my repo]/package.json (relative path: ./src/components/DoISuportIt)
          as directory
            [absolute path to my repo]/src/components/DoISuportIt doesn't exist
          no extension
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt doesn't exist
          .js
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt.js doesn't exist
          .jsx
            Field 'browser' doesn't contain a valid alias configuration
            [absolute path to my repo]/src/components/DoISuportIt.jsx doesn't exist
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt]
[[absolute path to my repo]/src/components/DoISuportIt.js]
[[absolute path to my repo]/src/components/DoISuportIt.jsx]

的package.json

{
  "version": "1.0.0",
  "main": "./src/main.js",
  "scripts": {
    "build": "webpack --progress --display-error-details"
  },
  "devDependencies": {
    ...
  },
  "dependencies": {
    ...
  }
}

就其所抱怨的browser字段而言，我能够找到的文档是：package-browser-field-spec。还有webpack文档，但默认情况下它似乎已打开：aliasFields: ["browser"]。我尝试在browser添加package.json字段，但这似乎没有任何好处。

webpack.config.js

import path from 'path';
const source = path.resolve(__dirname, 'src');

export default {
  context: __dirname,
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  resolve: {
    alias: {
      components: path.resolve(__dirname, 'src/components'),
    },
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: source,
        use: {
          loader: 'babel-loader',
          query: {
            cacheDirectory: true,
          },
        },
      },
      {
        test: /\.css$/,
        include: source,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            query: {
              importLoader: 1,
              localIdentName: '[path]___[name]__[local]___[hash:base64:5]',
              modules: true,
            },
          },
        ],
      },
    ],
  },
};

的src / main.js

import DoISuportIt from 'components/DoISuportIt';

的src /组件/ DoISuportIt / index.jsx

export default function() { ... }

为了完整性，.babelrc

{
  "presets": [
    "latest",
    "react"
  ],
  "plugins": [
    "react-css-modules"
  ],
  "env": {
    "production": {
      "compact": true,
      "comments": false,
      "minified": true
    }
  },
  "sourceMaps": true
}

我做错了什么/失踪了？

Answer 1

Turned out to be an issue with Webpack just not resolving an import - talk about horrible horrible error messages :(

// Had to change
import DoISuportIt from 'components/DoISuportIt';

// To (notice the missing `./`)
import DoISuportIt from './components/DoISuportIt';

Answer 2

我正在构建一个React服务器端渲染器，并发现在从头开始构建单独的服务器配置时也会发生这种情况。如果您发现此错误，请尝试以下操作：

确保您的＆＃34;条目＆＃34;相对于你的＆＃34; context＆＃34;正确地改变了价值。值。我错过了先前的＆＃34; ./"在输入文件名之前。
确保你有＆＃34;解决＆＃34;值包括在内。您对node_modules中任何内容的导入都将默认查看您的＆＃34; context＆＃34;文件夹，否则。

示例：

const serverConfig = {
name: 'server',
context: path.join(__dirname, 'src'),
entry: {serverEntry: ['./server-entry.js']},
output: {
    path: path.join(__dirname, 'public'),
    filename: 'server.js',
    publicPath: 'public/',
    libraryTarget: 'commonjs2'
},
module: {
    rules: [/*...*/]
},
resolveLoader: {
    modules: [
        path.join(__dirname, 'node_modules')
    ]
},
resolve: {
    modules: [
        path.join(__dirname, 'node_modules')
    ]
}
};

Answer 3

我遇到了同样的问题，但是因为路径中的错误套路而导致我的问题：

// Wrong - uppercase C in /pathCoordinate/
./path/pathCoordinate/pathCoordinateForm.component

// Correct - lowercase c in /pathcoordinate/
./path/pathcoordinate/pathCoordinateForm.component

Answer 4

仅供记录，因为我遇到了类似的问题，也许这个答案会对某人有所帮助：就我而言，我使用的是使用 .js 文件的库，而我在 webpack 解析扩展中没有这样的扩展。添加适当的扩展修复问题：

module.exports = {
(...)
  resolve: {
    extensions: ['.ts', '.js'],
  }
}

Answer 5

在我的情况下，在webpack.config.js的最后，我应该exports配置，有一个拼写错误：export（应该是exports），这导致了加载webpack.config.js的失败。

const path = require('path');

const config = {
    mode: 'development',
    entry: "./lib/components/Index.js",
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, "node_modules")
            }
        ]
    }
}

// pay attention to "export!s!" here
module.exports = config;

Answer 6

将我的条目更改为

entry: path.resolve(__dirname, './src/js/index.js'),

并且有效。

Answer 7

我在一个 TypeScript 项目中遇到了这个错误。在我的 webpack.config.js 文件中，我只解析了 TypeScript 文件，即

resolve: {
    extensions: [".ts"],
}

但是我注意到导致错误的 node_module ：

<块引用>

字段“浏览器”不包含有效的别名配置

没有任何“.ts”文件（这是可以理解的，因为该模块已转换为 vanilla JS！）。

为了解决这个问题，我将 resolve 声明更新为：

resolve: {
    extensions: [".ts", ".js"],
}

Answer 8

在我的情况下，它是一个在package.json中作为依赖项安装的包，其相对路径如下：

"dependencies": {
  ...
  "phoenix_html": "file:../deps/phoenix_html"
},

并使用js/app.js

导入import "phoenix_html"

这已经有效，但是在更新了节点，npm等之后......它因上述错误消息而失败。

将导入行更改为import "../../deps/phoenix_html"修复它。

Answer 9

对于构建离子应用并试图上传它的任何人。确保您为该应用添加了至少一个平台。否则你会收到这个错误。

Answer 10

对于每个有Ionic的人：更新到最新的@ ionic / app-scripts版本会给出更好的错误消息。

npm install @ionic/app-scripts@latest --save-dev

组件中的styleUrls到非现有文件的路径是错误的。奇怪的是，它没有给开发带来任何错误。

Answer 11

在我的情况下，我的webpack.config.js文件底部没有导出。只需添加

export default Config;

解决了它。

Answer 12

根据我的经验，此错误是由于Webpack中别名的命名不正确造成的。这样，我有了一个名为redux的别名，并且webpack尝试在别名路径中查找redux软件包随附的redux。

为解决此问题，我不得不将别名重命名为Redux之类的东西。

Answer 13

在我的情况下，这是由于尝试npm将自定义角度库链接到使用的应用程序时，符号链接损坏。运行npm后，链接@ authoring / canvas

```“ @ authoring / canvas”：“路径/至/ ui-authoring-canvas / dist”``

似乎一切正常，但仍找不到该模块：

当我将导入语句更正为编辑器可以找到的链接时：

import {CirclePackComponent} from '@authoring/canvas/lib/circle-pack/circle-pack.component';

我收到了溢出线程中提到的内容：

要解决此问题，我必须：

cd /usr/local/lib/node_modules/packageName
cd ..
rm -rf packageName
在库的根目录中，运行：一种。 rm -rf dist b。 npm run build C。 cd dist d。 npm link
在使用中的应用中，使用“ packageName”更新package.json：“ file：/ path / to / local / node_module / packageName”“
在使用该应用的根目录中，运行npm链接packageName

Answer 14

我的情况相当尴尬：我为JS库添加了一个打字稿绑定，而没有添加该库本身。

因此，如果您这样做：

npm install --save @types/lucene

别忘了做

npm install --save lucene

Kinda很明显，但是我完全忘记了，那花了我很多时间。

Answer 15

我使用的是 single-spa，遇到了这个错误的问题

Module not found: Error: Can't resolve '/builds/**/**/src\main.single-spa.ts' in /builds/**/**'

我最终发现在 angular.json 构建选项中“main”被设置为 src\\main.single-spa.ts。将其更改为 src/main.single-spa.ts 修复了它。

Answer 16

就我而言，这是由于导入路径中存在区分大小写的错字。例如，

应该是：

import Dashboard from './Dashboard/dashboard';

代替：

import Dashboard from './Dashboard/Dashboard';

Answer 17

我使用的是“ @ google-cloud / translate”：“ ^ 5.1.4”，并且一直在苦苦挣扎，直到尝试为止：

我打开google-gax \ build \ src \ operationsClient.js文件并进行了更改

quit = tk.Button(root, text="quit", bg='#AFAFAF', command=lambda: quitProgram(root))

到

const configData = require('./operations_client_config');

解决了错误

const configData = require('./operations_client_config.json');

我希望它可以帮助某人

Answer 18

就我而言，我使用的是无效的templateUrl。通过更正它，问题已解决。

@Component({
        selector: 'app-edit-feather-object',
        templateUrl: ''
    })

Answer 19

将此添加到您的package.json：

"browser": {
  "[module-name]": false   
},

Answer 20

我的情况与@witheng 的回答相似。

在某些时候，我注意到在我的开发环境中的某些文件名中存在一些大小写错误。例如文件名是

type.ts

我把它重命名为

Type.ts

在我的 Mac 开发环境中，这并未在 git 中注册为更改，因此此更改未进入源代码管理。

在文件名区分大小写的基于 Linux 的构建机器中，它无法找到具有不同大小写的文件。

为了避免以后出现类似问题，我在 repo 中运行了这个命令：

git config core.ignorecase false

字段“浏览器”不包含有效的别名配置

20 个答案: