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

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

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

我也有同样的问题，但我的问题是因为路径上的套管错误:

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

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

对于任何构建ionic应用程序并试图上传它的人。确保你至少添加了一个平台到应用程序。否则你会得到这个错误。

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

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

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

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

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

我正在构建一个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')
    ]
}
};

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

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

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

将我的条目更改为

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

这招奏效了。

在我的情况下，到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.config.js文件的底部没有导出。简单的添加

export default Config;

解决它。

根据我的经验，这个错误是由于Webpack中别名命名不当造成的。 其中，我有一个名为redux的别名，webpack尝试在我的别名路径中寻找redux包附带的redux。

为了解决这个问题，我不得不将别名重命名为Redux等不同的名称。

在我的情况下，这是由于导入路径中的大小写敏感错别字。例如,

应该是:

import Dashboard from './Dashboard/dashboard';

而不是:

import Dashboard from './Dashboard/Dashboard';

我正在使用“@google-cloud/translate”:“^5.1.4”，并在这个问题上苦苦挣扎，直到我尝试了这个:

我打开google-gax\build\src\operationsClient.js文件并更改

const configData = require('./operations_client_config');

to

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' ......

我希望它能帮助到一些人

在我的例子中，这是由于在尝试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

在我的情况下，我使用无效的templateUrl。通过纠正，问题解决了。

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

将这个添加到你的package.json:

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

我的情况相当尴尬:我为一个JS库添加了typescript绑定，却没有添加库本身。

所以如果你这样做:

npm install --save @types/lucene

别忘了:

npm install --save lucene

很明显，但我完全忘记了，这花了我不少时间。

我的情况与@witheng的回答类似。

在某个时候，我注意到在我的开发环境中的一些文件名中有一些大小写错误。例如，文件名为

type.ts

我把它改名为

Type.ts

在我的Mac开发环境中，这没有注册为git中的更改，所以这个更改没有进入源代码控制。

在基于linux的构建机器中，文件名是区分大小写的，它无法找到具有不同大小写的文件。

为了避免将来出现类似的问题，我在repo中运行了以下命令:

git config core.ignorecase false

我正在使用single-spa，遇到了这个错误问题

Module not found: Error: Can't resolve '/builds/**/**/src\main.single-spa.ts' in /builds/**/**'

我最终在角上找到了答案。Json构建选项“main”被设置为src\\main.single- spats。改为src/main.single-spa。它修好了。

只是为了记录，因为我有类似的问题，也许这个答案会帮助别人:在我的情况下，我使用的是使用.js文件的库，我没有这样的扩展在webpack解析扩展。添加适当的扩展固定问题:

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

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

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

然而，我注意到导致错误的node_module:

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

没有”。ts”文件(这是可以理解的，因为模块已经转换为香草JS。哎!)。

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

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

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

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

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

import { MyFile } from "my-library";

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

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

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

改成了

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

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

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

对我来说，问题是我在进口

.ts files into .js files

将它们改为ts也解决了这个问题。

在我的例子中，我在index.d.ts文件中混合了enum和interface。 我将枚举提取到另一个文件中，问题解决了。

我有tsconfig.json的别名:

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

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

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

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

在Windows PowerShell上，以下命令引发此错误:

npx webpack .\src\js\main.js --output-filename output.js

正确的命令是:

npx webpack ./src/js/main.js --output-filename output.js

注意，在使用npx时，即使在Windows上，我们也必须使用Linux路径分隔符(/)。

在我的例子中，模块下的输入字段丢失了。在webpack.config.js中导出，导致此问题。

在我的情况下:)

$ rm -rf tsconfig.tsbuildinfo
$ npm run build

就我而言，

我错误地从package.json中删除了一个库(“mini-create-react-context”)。我把它加了回来，并安装和构建了应用程序，它开始正常工作。所以请看看你的包裹。Json文件一次。

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

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

对我来说(哈哈)，

我正在通过NPM/Yarn链接导入一个本地包(我正在开发，并使用rollup构建)到我正在开发的另一个包中。导入的包是一个React组件的负载，并配置为具有React和React -dom的peerDependency。

消费包是用Webpack构建的，显然在编译时没有正确地将已安装的react和react-dom库提供给我的本地依赖。

我调整了我的webpack配置，以表明它应该将这些对等依赖项别名为消费包中的正确依赖项:

/* ... */

resolve: {
  extensions: [/* make sure you have them all correct here, as per other answers */],
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom')
  }
},

/* ... */

显然，为了使用上述方法，你需要在webpack.config.js文件中导入path。

在本文中可以找到更详细的解释

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

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

也许你运行webpack serve时没有指定配置文件的位置。 例如: 你的包。json文件

"script": {
  "dev": "webpack serve"
}

但是你的webpack配置在配置目录中。所以你应该更改脚本:

"script": {
  "dev": "webpack serve --config ./config/webpack.config.js"
}

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

我在webpack配置中没有这个。

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

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

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

在我的情况下，这个错误是由于没有入口点被webpack发现。如果在webpack配置中没有明确定义入口点，则默认入口点为。/src/index.js 如果这样的路径不存在，您将得到这个错误。

要更改入口点的路径，请使用配置文件(https://webpack.js.org/configuration/entry-context/#root)中的入口设置。

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

import * as process from 'process';

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