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

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

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

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

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

Answer 2

将其添加到您的package.json：

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

Answer 3

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

1. 确保相对于"上下文"值正确地修改了"条目"值.我在输入文件名之前缺少前面的"./".
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')
    ]
}
};

Answer 4

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

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

Answer 5

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

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

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

Answer 6

当 完全丢失时也会发生这种情况webpack.config.js(dockerignore \xe2\x80\x8d\xe2\x99\x82\xef\xb8\x8f)

\n

Answer 7

将我的条目更改为

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

它起作用了。

Answer 8

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

所以如果你这样做：

npm install --save @types/lucene

不要忘记执行以下操作：

npm install --save lucene

有点明显，但我完全忘记了，这花了我相当长的时间。

Answer 9

我在 tsconfig.json 中有别名：

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

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

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

Answer 10

就我而言，它是一个作为依赖项安装的包，package.json其相对路径如下：

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

和进口的js/app.js有import "phoenix_html"

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

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

Answer 11

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 12

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

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

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

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

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

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

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

Answer 13

我遇到了同样的问题并通过添加文件扩展名修复了。

// 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.
  },
};

Answer 14

我遇到了同样的错误，并且我不想绝对导入。我的正常相对导入无法正常工作，出现相同的错误和“找不到模块”。

我的 webpack 配置中缺少这个。

resolve: {
  extensions: ['.tsx', '.ts', '.js'],
}