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

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


当前回答

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

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

其他回答

在我的情况下,到webpack.config.js的最后,在我应该导出配置的地方,有一个打字错误: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;

Webpack出现了一个问题,就是不能解决导入的问题——谈论可怕的错误消息:(

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

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

在我的情况下,我得到这个错误: (我使用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'

我得到了同样的错误,我不想要绝对导入。我的正常相对导入没有工作与相同的错误和“模块未找到”。

我在webpack配置中没有这个。

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

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

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

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