字段 'browser' 不包含有效的别名配置

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. There is also webpack documentation for it, but it seems to have it turned on by default: aliasFields: ["browser"]。我尝试向我的 package.json 添加一个 browser 字段，但这似乎没有任何用处。

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/components/DoISuportIt/index.jsx

export default function() { ... }

为了完整性，.babelrc

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

我在做什么wrong/missing？

Answer 1

原来是 Webpack 的一个问题，只是没有解析导入 - 谈论可怕的错误消息:(

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

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

Answer 2

我遇到了同样的问题，但我的是因为路径中的大小写错误：

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

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

Answer 3

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

Answer 4

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

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

并使用 import "phoenix_html"

在 js/app.js 中导入

这是可行的，但在更新节点、npm 等之后...失败并显示上述错误消息。

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

Answer 5

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

确保 entry 值相对于 context 值的路径正确。我的输入文件名前缺少前面的./。
确保包含 resolve 值。您对 node_modules 中任何内容的导入将默认在您的 context 文件夹中查找，否则。

示例：

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 6

对于所有使用 Ionic 的人：更新到最新的@ionic/app-scripts 版本给出了更好的错误消息。

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

组件中的 styleUrls 到不存在的文件的路径错误。奇怪的是它在开发中没有报错。

Answer 7

将我的条目更改为

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

成功了。

Answer 8

就我而言，在 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 9

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

export default Config;

解决了。

Answer 10

根据我的经验，这个错误是由于 Webpack 中的别名命名不当造成的。因为我有一个名为 redux 的别名，webpack 尝试在我的别名路径中寻找 redux 包附带的 redux。

为了解决这个问题，我不得不将别名重命名为不同的名称，例如 Redux。

Answer 11

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

应该是：

import Dashboard from './Dashboard/dashboard';

而不是：

import Dashboard from './Dashboard/Dashboard';

Answer 12

我正在使用 "@google-cloud/translate": "^5.1.4" 并且一直在努力解决这个问题，直到我尝试了这个：

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

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

至

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

解决了错误

ERROR in ./node_modules/google-gax/build/src/operationsClient.js Module not found: Error: Can't resolve './operations_client_config' in 'C:\..\Projects\qaymni\node_modules\google-gax\build\src' resolve './operations_client_config' ......

希望对大家有所帮助

Answer 13

就我而言，这是由于在尝试 npm link 自定义 angular 库以使用应用程序时符号损坏 link。在运行ning npm link @authoring/canvas

之后

"@authoring/canvas": "path/to/ui-authoring-canvas/dist"

看起来一切正常，但仍然找不到模块：

当我将导入语句更正为编辑器可以找到的内容时 Link:

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

我收到了溢出线程中提到的这个：

要解决这个问题，我必须：

cd /usr/local/lib/node_modules/packageName
cd ..
rm -rf packageName
库根目录下，运行:

a) rm -rf dist
b) npm run build
c) cd dist 
d) npm link

在消费应用中，将 package.json 更新为：

"packageName": "file:/path/to/local/node_module/packageName""

在消费应用程序的根目录中运行 npm link packageName

Answer 14

在我的情况下，我使用了无效的 templateUrl.By 更正问题已解决。

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

Answer 15

将此添加到您的 package.json:

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

Answer 16

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

所以如果你这样做：

npm install --save @types/lucene

别忘了做：

npm install --save lucene

有点明显，但我完全忘记了，这花了我很多时间。

Answer 17

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

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

type.ts

我把它重命名为

Type.ts

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

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

为了避免将来出现此类问题，我运行在 repo 中执行此命令：

git config core.ignorecase false

Answer 18

我正在使用 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 19

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

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

Answer 20

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

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

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

Field 'browser' doesn't contain a valid alias configuration

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

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

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

Answer 21

就我而言，我导入的库文件如下：

import { MyFile } from "my-library/public-api";

在我从导入中删除 public-api 之后一切正常：

import { MyFile } from "my-library";

MyFile在库中的public-api文件中导出。

Answer 22

在导入 angular 时遇到同样的问题

import { Injectable } from "@angular/core/core";

改为

import { Injectable } from "@angular/core";

Answer 23

我在运行执行 GitHub 操作时遇到此错误。问题是因为我将包列为对等依赖项而不是依赖项。

由于我使用的是 Rollup，解决方案是将包安装为对等依赖项和开发依赖项，并使用 rollup-plugin-peer-deps-external 从最终构建中删除开发依赖项。

Answer 24

对我来说问题是，我正在导入

.ts files into .js files

将它们更改为 ts 也解决了问题。

Answer 25

就我而言，我在 index.d.ts 文件中混合了 enum 和 interface。
我将枚举提取到另一个文件中并解决了问题。

Answer 26

当 webpack.config.js 完全丢失时也会发生这种情况 (dockerignore ‍♂️)

Answer 27

我有 tsconfig.json 的别名：

{
    "compilerOptions": {
        "paths": {
            "@store/*": ["./src/store/*"]
        }
    },
}

所以 我通过向 webpack.config 添加别名也解决了这个问题:

module.exports = {
  //...
  resolve: {
    alias: {
      '@store': path.resolve(__dirname, '../src/store'),
    },
  },
};

Answer 28

就我而言，我遇到了这个错误： （我将 webpack 5 与 React v18 和 React Router v6 一起使用）

ERROR in ./src/components/App/App.jsx 5:0-42
Module not found: Error: Can't resolve '../../Pages/Profile' in 'C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\components\App'  
resolve '../../Pages/Profile' in 'C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\components\App'
  using description file: C:\Users\nicho\Desktop\projects\webpack-starter-with-react\package.json (relative path: ./src/components/App)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Users\nicho\Desktop\projects\webpack-starter-with-react\package.json (relative path: ./src/Pages/Profile)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile.wasm doesn't exist
      as directory
        C:\Users\nicho\Desktop\projects\webpack-starter-with-react\src\Pages\Profile doesn't exist
 @ ./src/index.js 3:0-43 5:46-49

webpack 5.72.1 compiled with 3 errors in 1872 ms

为模块导入添加文件扩展名为我解决了这个问题：

来自这个：

import Home from '../../Pages/Home'

对此：

import Home from '../../Pages/Home.jsx'

字段 'browser' 不包含有效的别名配置

Field 'browser' doesn't contain a valid alias configuration

commonjs

npm

webpack

package.json

webpack-2