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


131

我已经开始使用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
}

我在做什么错/遗漏?

Answers:


101

原来是Webpack的一个问题,只是不解决导入问题-谈论可怕的错误消息:(

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

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

1
问题是npm引起的吗?今天,我通过卸载和安装模块的最新版本,使用npm升级了模块,现在我收到此错误,错误提示要更改模块的相对位置,但是文件列表太高了,导致所有这些文件改变其相对位置?
DEEPAN KUMAR'9

2
这也救了我的屁股。在sass文件中可以使用'folder'导入,但在.js文件中您需要像'./folder'这样来实现。同样,如果没有--display-error-details,也不会显示任何错误消息,它只会崩溃
CoolGoose

1
非常感谢。你救了我的日子。
Jaroslaw K.

6
@Matthew Herbst最愚蠢的错误消息之一:)我的屁股被保存了,谢谢!
德米特里·森科维奇

5
疯了吧。
coolboyjules

15

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

  1. 确保相对于“上下文”值正确地输入了“ entry”值。我的输入文件名之前缺少前一个“ ./”。
  2. 确保包含“解决”值。默认情况下,您在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')
    ]
}
};

11

我遇到了同样的问题,但是我的原因是路径中的错误大小写:

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

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

1
这也是我的问题。但是,它在我的Windows笔记本电脑上工作正常,但在服务器(Linux)上却失败。
马特M

4

在我的情况下,这是一个作为依赖项安装的软件包,package.json具有如下相对路径:

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

js/app.jsimport "phoenix_html"

这已经奏效,但是在更新节点,npm等之后,它失败了,并显示上述错误消息。

更改导入线以import "../../deps/phoenix_html"对其进行修复。


哦,不,您的想法为何Webpack如此直觉?我也有本地依赖性。
vintproykt


3

在我的情况下,到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;

3

以我的经验,此错误是由于Webpack中别名的命名不正确造成的。因为我有一个别名redux,webpack尝试redux在别名路径中查找redux软件包随附的。

要解决此问题,我必须将别名重命名为,如Redux


2

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


1

对于所有使用Ionic的用户:更新到最新的@ ionic / app-scripts版本会提供更好的错误消息。

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

对于组件中的styleUrls到不存在的文件,这是错误的路径。奇怪的是,它在开发中没有出错。


1

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

export default Config;

解决了。


0

我使用的是“ @ 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' ......

我希望它可以帮助某人


0

就我而言,这是由于尝试将自定义角度库链接到使用中的应用程序时将符号链接断开而导致的。运行npm后链接@ authoring / canvas

```“ @ authoring / canvas”:“路径/到/ ui-authoring-canvas / dist”

看来一切正常,但仍找不到该模块:

来自NPM链接的错误

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

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

我收到了溢出线程中提到的这个消息:

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

要解决此问题,我必须:

  1. cd /usr/local/lib/node_modules/packageName
  2. cd ..
  3. rm -rf packageName
  4. 在库的根目录中,运行:rm -rf dist b。npm run build C。cd dist d。npm link

  5. 在使用该应用的应用程序中,将package.json更新为“ packageName”:“ file:/ path / to / local / node_module / packageName”“

  6. 在使用方应用程序的根目录中,运行npm链接packageName


0

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

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

-1

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

应该:

import Dashboard from './Dashboard/dashboard';

代替:

import Dashboard from './Dashboard/Dashboard';
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.