字段“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
}

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

当前回答

在我的例子中，这是由于在尝试npm链接一个自定义angular库到消费应用程序时出现了符号链接中断

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

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

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

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

在消费应用程序中，更新包。json:

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

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

2020-01-21 17:34:53

其他回答

对于任何使用Webpack模块联盟插件的人: 我在插件的“暴露”条目中的一个字段的值中有一个拼写错误。检查拼写:

exposes: {
            './ShopApp': './src/bootstrap' // check this value
        }

2022-07-28 06:33:38

我得到了同样的问题，并修正了添加文件扩展名。

// Old:

import RadioInput from './components/RadioInput'

// New:

import RadioInput from './components/RadioInput.vue'

此外，如果你仍然想使用没有扩展，你可以添加这个webpack配置:(谢谢@matthew-herbst提供的信息)

module.exports = {
  //...
  resolve: {
    extensions: ['.js', '.json', '.wasm'], // Add your extensions here.
  },
};

2022-09-03 14:56:58

爱奥尼亚人: 更新到最新的@ionic/app-scripts版本会给出更好的错误消息。

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

这是一个错误的路径styleUrls在一个组件到一个不存在的文件。奇怪的是，它没有显示出任何错误。

2018-02-05 09:19:37

在我的情况下，我在试图使用process.env时不小心导入了这个包:

import * as process from 'process';

去掉它就解决了这个问题。

2023-02-01 13:12:57

我有tsconfig.json的别名:

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

所以我通过给webpack添加别名来解决这个问题。还配置:

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

2022-04-21 15:09:53

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

推荐文章

最新文章

标签