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

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

关于它所抱怨的浏览器字段，我能够找到的文档是:package-browser-field-spec。也有webpack文档，但它似乎默认开启:aliasFields: ["browser"]。我尝试在我的包中添加一个浏览器字段。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
}

我做错了什么/遗漏了什么?

当前回答

我在运行一个GitHub动作时得到这个错误。这个问题是因为我将包列为对等依赖项而不是依赖项。

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

2021-10-21 13:47:01

其他回答

在我的例子中，它是作为包中的依赖项安装的包。Json的相对路径是这样的:

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

并导入到js/app.js，导入"phoenix_html"

这是有效的，但在更新node, npm等…它失败了，出现上述错误消息。

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

2017-09-23 12:46:50

在我的例子中(:p)，我有一个。d。Ts文件最初包含定义，但我在其中定义了一个导出enum。我没有在webpack中解析这个文件，因为它只包含定义。

将enum移动到一个单独的.ts文件解决了这个问题。

2022-12-19 18:49:41

我正在构建一个React服务器端渲染器，发现这也可能发生在从头构建一个单独的服务器配置时。如果您看到此错误，请尝试以下操作:

确保您的条目值相对于您的上下文值具有正确的路径。我的文件缺少了入口文件名前面的。/。确保包含了resolve值。在node_modules中导入的任何内容都会默认在上下文文件夹中查找，否则。

例子:

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')
    ]
}
};

2017-10-09 15:00:30

angular was导入也有同样的问题吗

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

改成了

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

2021-09-22 06:13:02

在我的情况下，我导入库文件如下:

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

在我从导入中删除了public-api之后，一切都正常工作:

import { MyFile } from "my-library";

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

2021-08-31 12:29:03

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

推荐文章

最新文章

标签