标签: webpack

我正在尝试使用 Typescript、Webpack 和 Babel 制作一个 React 库，但是遇到了问题。如果我构建然后将库导入到 React 项目中，那么我的导入是“未定义”（请参阅​​下面的错误）。我认为这是因为在 中bundle.js没有module.exports代表我的类的变量，只有 a __webpack_exports__["default"] = (ExampleComponent);（但是我不确定这在实践中会做什么，所以我可能是错的。）

我特别收到这个错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

我尝试过的：

• 将 tsconfig 目标更改为 es6，将模块更改为 commonjs
• 将 tsconfig 目标更改为 es6，将模块更改为 esnext
• 将 tsconfig 目标更改为 es5，将模块更改为 esnext
• 将 …

我正在尝试在我的 Next.js 项目中使用 GSAP 库，我从React jsap下载了该库的 npm 版本。

但是当我像这样导入它时：

import { gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin"; 

它抛出一个错误，该错误似乎是由 CSSRulePlugIn 引起的，因为当我从导入中删除它时一切都很好。

错误：

我使用 webpack 对正在更改的文件运行监视.js，但我需要在项目中使用通配符而不是特定文件名。我目前正在使用下面的命令，它工作正常，并在我运行时编译所有预期的文件npm run watch，但在我直接在任何文件中进行更改后，它永远不会再次运行。我必须停止观看并一次又一次地重新运行相同的命令。我有什么遗漏的吗？

const mix = require('laravel-mix');

mix.scripts([
    'resources/js/vendor/**/*.js',
    'resources/js/modules/**/*.js',
    'resources/js/plugins/**/*.js'
], 'public/js/site.js');

打包文件：

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
    "autoprefixer": "^9.7.6",
    "bulma": "^0.9.0",
    "cross-env": "^5.1",
    "laravel-mix": "^4.0",
    "laravel-mix-purgecss": "^4.1.0",
    "node-sass": …

我使用以下命令新安装了 Nativescript Angular 项目：

ng new --collection=@nativescript/schematics my-mobile-app\n

我从nativescript-schematics获得的命令

全新安装后，我尝试在 Android 模拟器上运行它。

tns run android\n

然后我在编译过程中收到此错误：

Searching for devices...\nPreparing project...\nFile change detected. Starting incremental webpack compilation...\n\nwebpack is watching the files\xe2\x80\xa6\n\nHash: c018afa003f9a5a7d1cd\nVersion: webpack 4.44.2\nTime: 4451ms\nBuilt at: 11/05/2020 1:54:33 PM\n 3 assets\nEntrypoint bundle = runtime.js vendor.js bundle.js\n[./app.css] 1.05 KiB {bundle} [built]\n[./main.ts] 1.13 KiB {bundle} [built]\n[~/package.json] external "~/package.json" 42 bytes {bundle} [optional] [built]\n    + 331 hidden modules\n\nERROR in error TS5060: Option \'paths\' cannot be used without …

这是我的 webpack.config：

const HtmlPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
    watch: true,
    output:{
        path:path.resolve(__dirname, "build"),
        filename:"bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:[{loader:"babel-loader"}]
            },
            {
                test:/\.html$/,
                use:[{loader:"html-loader"}]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: [{loader: 'file-loader'}],
            }
        ]
    },
    plugins:[
        new HtmlPlugin({
            filename:"index.html",
            template:"./src/index.html"
        })
    ],
    devtool: 'inline-source-map',
    devServer:{
        historyApiFallback:true,
        port:5000
    }
}

我正在 index.js 中导入图像：

import React from "react";
import ReactDOM from "react-dom";
import Img from "./images/flower.jpg"; 

const App = () => {
    return (
        <div>
            <h1>Hello World!!</h1> …

您好，我知道有一些问题已经相关，如果不是，则完全相同，但由于某种原因，这些答案都不适合我，所以我根据我的具体情况提出这个问题。

我已经使用laravel-mixandvuejs几个月了，只是为了给你一个背景知识，我对使用 webpack 或捆绑器非常陌生。我开始使用它laravel-mix是因为项目需要它，从那时起我什至在单独的项目中也使用它。现在我正在使用新版本的laravel-mix和vuejs，我似乎无法vuejs工作！

让我首先向您展示我的webpack.mix.js：

const mix = require("laravel-mix")

mix.js('src/javascript/app.js', 'assets').extract(['vue', 'vue-lazysizes', 'flickity', 'axios'])
   .vue()
   .sass('src/style/app.scss', 'assets')
   .options({
     postCss: [require('tailwindcss')]
   })

这是我的package.json：

{
  "name": "name",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.mix.js",
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "keywords": [],
  "author": "",
  "license": …

我正在开发一个带有 webpack 的小型 Dapp 和基于 Web 组件（lit-library）的 UI。为了捆绑文件，我使用 webpack 和 webpack-dev-server 来刷新页面。一切对我来说都很好。

现在，我尝试使用 web3 与我的智能合约交互，但是当我导入 web3 并从中创建一个新实例时，出现以下错误：

    Uncaught Error: Cannot find module 'http'
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
xml-http-request.js:21:19
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        <anonymous>
        <anonymous>
        <anonymous>

此错误出现在我的 Firefox 的控制台中。

包.json

    Uncaught Error: Cannot find module 'http'
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
xml-http-request.js:21:19
    webpackMissingModule xml-http-request.js:21
    js xml-http-request.js:21
    Webpack 14
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__ …

我正在尝试将我的角度版本从 11.1.1 更新到 12.1.1。我收到此构建错误。

“CustomWebpackDevServerSchema”架构使用关键字“id”，其支持已被弃用。使用“$id”作为架构 ID。

“BuildCustomWebpackBrowserSchema”架构使用关键字“id”，其支持已被弃用。使用“$id”作为架构 ID。

• 角度版本：12.1.1
• @Angular-builders/custom-webpack：11.1.1

我尝试删除package-lock.json并node_modules再次安装，但不起作用。

我没有发现任何类似的问题。

大家好，我正在做一个个人项目，但在使用时：\nimport {NgForm} from '@ angular / forms';\n出现错误，我尝试了“npm ci”命令，然后重新-安装node_modules，更新节点，但问题仍然存在。\n我在导入库时在app.module.ts中进行了相应的验证，但问题仍然存在。\n我非常感谢任何帮助、指导或建议

Error: ./node_modules/@angular/forms/__ivy_ngcc__/fesm2015/forms.js 27:12\nModule parse failed: Identifier '\xc9\xb5ngcc0' has already been declared (27:12)\nFile was processed with these loaders:\n * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js\n * ./node_modules/@ngtools/webpack/src/ivy/index.js\n\nYou may need an additional loader to handle the result of these loaders.\n|  */\n| import * as \xc9\xb5ngcc0 from '@angular/core';\n> import * as \xc9\xb5ngcc0 from '@angular/core';\n| const NG_VALUE_ACCESSOR = new InjectionToken('NgValueAccessor');\n|\n

这些是我正在使用的依赖项：

"dependencies": {\n    "@angular/animations": "~11.2.4",\n    "@angular/common": "~11.2.4",\n    "@angular/compiler": "~11.2.4",\n    "@angular/core": "~11.2.4",\n    "@angular/forms": "~11.2.4",\n    "@angular/platform-browser": "~11.2.4",\n    "@angular/platform-browser-dynamic": "~11.2.4",\n    "@angular/router": …

这个错误发生在我的反应应用程序中。

完整消息显示\n./bluecardback.jpg 1:0\n模块解析失败: 意外字符 \'\xef\xbf\xbd\' (1:0)\n当前您可能需要适当的加载器来处理此文件类型没有配置加载程序来处理此文件。请参阅https://webpack.js.org/concepts#loaders \n（此二进制文件省略源代码）

webpack.config：

var webpack = require(\'webpack\');\nvar path = require(\'path\');\nconst HtmlWebpackPlugin = require("html-webpack-plugin");\n\n\nmodule.exports = {\n  entry: [\n    path.join(__dirname, \'./src/index.js\')\n  ],\n  module: {\n    rules: [{\n      test: /\\.(js|jsx)$/,\n      exclude: /node_modules/,\n      use: [{ loader: \'babel-loader\', options: { presets: [\'@babel/preset-env\', \'@babel/react\'] } }],\n    },\n    { \n      test: /\\.(less|css|scss)$/, \n      use: [\'style-loader\', \'css-loader\', \'less-loader\',] \n    }\n    ]\n  },\n  output: {\n    path: path.join(__dirname, \'/public\'),\n    filename: \'bundle.js\'\n  },\n  devServer: {\n    contentBase: path.join(__dirname, \'/public\'),\n    // historyApiFallback: true\n  },\n  plugins: …