使用 babel 6 时,` __webpack_require__(...) 不是一个函数`

2024-02-18

一切似乎都建立得很好:http://d.pr/i/1aZxR http://d.pr/i/1aZxR使用以下配置。

但是,当我运行代码时,出现以下错误(通过 webpack-dev-server):

Uncaught TypeError: __webpack_require__(...) is not a function(anonymous function) @ login.js:4__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50(anonymous function) @ bootstrap.js:2363__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50(anonymous function) @ app.38790ff45722f55eb700.js:29__webpack_require__ @ bootstrap 38790ff45722f55eb700?6a08:50webpackJsonpCallback @ bootstrap 38790ff45722f55eb700?6a08:21(anonymous function) @ app.38790ff45722f55eb700.js:1
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.7/$injector/nomod?p0=app
    at http://localhost:3000/vendor.js:193:13
    at http://localhost:3000/vendor.js:2111:18
    at ensure (http://localhost:3000/vendor.js:2035:39)
    at module (http://localhost:3000/vendor.js:2109:15)
    at http://localhost:3000/vendor.js:4515:23
    at forEach (http://localhost:3000/vendor.js:461:21)
    at loadModules (http://localhost:3000/vendor.js:4499:6)
    at createInjector (http://localhost:3000/vendor.js:4424:12)
    at doBootstrap (http://localhost:3000/vendor.js:1782:21)
    at bootstrap (http://localhost:3000/vendor.js:1803:13)
http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=app&p1=Error%3A%20%…%20at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fvendor.js%3A1803%3A13)(anonymous function) @ angular.js:68(anonymous function) @ angular.js:4413forEach @ angular.js:336loadModules @ angular.js:4374createInjector @ angular.js:4299doBootstrap @ angular.js:1657bootstrap @ angular.js:1678angularInit @ angular.js:1572(anonymous function) @ angular.js:28899fire @ jquery.js:3099self.fireWith @ jquery.js:3211jQuery.extend.ready @ jquery.js:3417completed @ jquery.js:3433

我认为 babel 正在干扰__webpack_require__在某种程度上,但我不确定。我确实尝试使用不同的转换/插件,但无法找到解决方案。

.babelrc:

{
  "plugins":[
    "transform-runtime",
    "transform-node-env-inline"
  ],
  "presets":[
    "stage-0",
    "es2015"
  ]
}

这是我的 webpack.config.js:

var Clean = require('clean-webpack-plugin');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var fs = require('fs');
var ngAnnotatePlugin = require('ng-annotate-webpack-plugin');
var path = require('path');
var StatsPlugin = require('stats-webpack-plugin');
var webpack = require('webpack');

//CONSTANTS

var NODE_ENV = process.env.NODE_ENV;
var IS_DEV = NODE_ENV === 'development';
var babelFile = fs.readFileSync('./.babelrc', 'utf8');
var BABELRC = JSON.parse(babelFile);
var cleanFonts = function(){
  return new Clean(['dist/tmp/*.{ttf,eot,svg,woff}']);
}
var cleanImages = function(){
  return new Clean(['dist/tmp/*.{png,jpg}']);
}
var cleanJs = function(){
  return new Clean(['dist/*.{js,map}']);
}
var plugins = [
  new webpack.NoErrorsPlugin(),
  cleanJs(),
  // new StatsPlugin('stats.json', {chunkModules: true}),
  new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","window.jQuery": "jquery" }),
  new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]),
  new HtmlWebpackPlugin({
    template: 'client/app/vendors/assets/index-tmpl.html',
    filename: 'index.html'
  }),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor.js',
    chunks:['customer','personalOrganization','app']
  })
  // new ngAnnotatePlugin({add: true})
  // new ExtractTextPlugin("style.[hash].css", {
  //    disable: false,
  //    allChunks: true
  // }),

  //new webpack.optimize.CommonsChunkPlugin({minChunks: 2, children: true, async: true}),
  // new CompressionPlugin({asset: "{file}.gz", algorithm: "gzip", regExp: /\.js$|\.html$/, threshold: 10240, minRatio: 0.8 })
];
var dev_plugins = [
]
var prod_plugins = [
  cleanFonts(),
  cleanImages(),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    sourceMap: false,
    compress: { warnings: false },
    mangle: false
  }),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.AggressiveMergingPlugin()
];
if(NODE_ENV !== 'development'){
  plugins = plugins.concat(prod_plugins);
}
else{
  plugins = plugins.concat(dev_plugins);
}
babelLoaderOpts = {
  cacheDirectory: true
};
Object.assign(babelLoaderOpts, BABELRC);
module.exports = {
  cache: IS_DEV,
  // watch: IS_DEV,
  devtool: 'source-map',
  entry: {
    "app": "./client/app/app.js",
    "devserver": 'webpack-dev-server/client?http://localhost:3000'
  },
  output: {
      path: __dirname + "/dist",
      filename: '[name].[hash].js'
  },
  module: {
        noParse: [
          /moment.js/
        ],
        loaders: [
            { test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" },
            {
              test: /\.js$/,
              exclude: /(node_modules|bower_components|vendors)/,
              loader: 'babel',
              query: babelLoaderOpts
            },
            { test: /\.html$/, loader: 'raw' },
            { test: /\.scss$/, loader: "style!css!sass?outputStyle=expanded"+"&includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib")},
            { test: /\.css$/,  loader: 'style!css' },
            { test: /\.(png|jpeg|jpg|gif)$/, loader: 'url-loader?limit=30000&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.woff(\?\S*)?$/,  loader : 'url?prefix=font/&limit=10000&mimetype=application/font-woff&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.woff2/, loader: 'url?prefix=font/&limit=100000&mimetype=application/font-woff2&name=tmp/[name].[ext]&no_emit_env=development' },
            { test: /\.ttf/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.eot/,   loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            { test: /\.svg/,loader : 'file?prefix=font/&name=tmp/[name].[ext]&no_emit_env=development'},
            //{ test: /\.scss$/, loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=2&sourceMap!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&&includePaths[]='+ path.resolve(__dirname, './node_modules/compass-mixins/lib')) },
            //{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
      ]
  },
  devServer: {
    contentBase: './client/app'
  },
  resolve: {
      modulesDirectories: ['vendors','node_modules', 'bower_components'],
      extensions: ['', '.js', '.json']
  },
  plugins: plugins
};

我想补充一下可能出现此错误的另一个原因:

我做了以下事情:

import mapActions from 'vuex'

代替:

import { mapActions } from 'vuex'

前者正在导入整个vuex导出,这是一个对象。添加对象解构解决了这个问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 babel 6 时,` __webpack_require__(...) 不是一个函数` 的相关文章

随机推荐

  • git 从合并中删除提交

    我有以下问题 我试图将远程分支合并到本地 然后将更改推送到存储库 好吧 我获取了具有三个提交的远程分支 但其中一个尚未完成 所以我不想推送一个这些提交到存储库 当我运行 git log 时 它向我显示以下内容 commit A1 merge
  • 是否可以在 MVC 5 控制器中的一项操作上禁用身份验证过滤器?

    AuthenticateUser public class HomeController Controller GET Home public ActionResult Index return View AllowAnonymous pu
  • Keras 中的反向传播?

    谁能告诉我 Keras 中的反向传播是如何完成的 我读到它在 Torch 中非常简单 在 Caffe 中很复杂 但我找不到任何关于使用 Keras 执行此操作的信息 我正在 Keras 中实现我自己的层 非常初学者 并且想知道如何进行反向传
  • C# 可序列化类到 xsd

    有没有办法从可序列化的 C 类输出 xml 模式 xsd 我浏览过网络 但不确定我是否在寻找正确的东西 Thanks 您正在寻找 XSD exehttp msdn microsoft com en us library x6c1kb0s a
  • Play Protect 无法识别该应用程序的开发者

    我尝试在 Google Play 以外的市场中发布我的应用程序 当我尝试安装我的应用程序时 它说 Play Protect 无法识别该应用程序的开发者 来自未知开发者的应用程序有时可能不安全 我认为问题可能出在应用程序的标志上 我通过另一个
  • IntelliJ 无法将爆炸战争部署到 tomcat

    我有一个 Java Web 应用程序 正在 IntelliJ 中开发并使用 Apache Tomcat 进行部署 我定义了一些在团队中的每个人之间共享的运行配置 这些运行配置被定义为将分解的战争工件部署到本地 tomcat 中 其他团队成员
  • 如何从检测意图 API 触发对话流事件?

    如何从 python 检测意图 API 触发对话流中的事件 我想在启动聊天窗口时立即触发欢迎意图 您需要将 WELCOME 事件作为查询输入的一部分发送到调用detect intent 它可能看起来像这样 import dialogflow
  • 在应用程序购买沙箱中不提示我输入登录/密码

    我们正在开发一款应用程序 当然 用于应用程序购买 IAP 我已完成指南中启用 iap 的所有操作 一切正常 直到我想购买 一些代码 MainViewController m void viewDidLoad if SKPaymentQueu
  • 将 JTable 放入 JTree 中

    与螺纹有关Jtable 作为 Jtree 节点 https stackoverflow com questions 8839025 jtable as a jtree node我把 JTable 放到 JTree 中 但是JTree视图在启
  • 无法解析缺少分钟的日期?

    我正在尝试解析不包含分钟 2019 10 12T07Z 的日期时间字符串 import java time OffsetDateTime import java time format DateTimeFormatter public cl
  • 从触发器下载delphi中的文件并捕获文件名

    我有一个网站的网址 它看起来像这样 http www example com downloads file 4789 download http www example com downloads file 4789 download 我想
  • shouldOverrideUrlLoading 仅在某些网页上被调用

    我正在为针对多个客户端进行个性化的应用程序使用 shouldOverrideUrlLoading 方法 每个客户端都有自己的网页想要加载到 webview 中 我的问题是这样的 该应用程序非常适合客户 A 及其网页 但不适用于客户 B 的网
  • django-admin startproject尝试创建manage.py两次?

    我正在努力解决Django 教程 https docs djangoproject com en 1 9 intro tutorial01 版本 1 9 在 Ubuntu 15 10 上运行 当我到达跑步的台阶时django admin s
  • Express.js 无法 GET /index.html.var

    所以我在共享主机 FastComet 中运行一个快速应用程序 但如果我想访问 我会收到此消息 无法获取 index html var 显然这与 htaccess file 我解决这个问题的方法是添加 DirectoryIndex disab
  • 删除 iOS 7 中的 Tab Bar 水平分隔符

    我想删除 UITabBar 和屏幕其余部分之间的水平分隔线 我问和这个人有同样的问题 https stackoverflow com q 11104796 1224741但针对 iOS7 进行了更新 设置我的 UITabBar 的背景图像并
  • 使用mockito库模拟java中的final类[重复]

    这个问题在这里已经有答案了 我有一个最终类 它有一个我想执行特定操作的方法 因此我想创建最终类的对象 但我无法创建它 以下是我的课程 public final class A private String name A String nam
  • 在 Emacs 中搜索标记(选定)文本

    我使用 emacs 查看和编辑代码和其他文本文件 我想知道是否有一种方法可以向前或向后搜索当前缓冲区中标记的文本 类似于我在记事本或写字板中可以执行的操作 就像我可以在缓冲区中标记一些文本并执行 C s 或 C r 并能够使用标记的文本进行
  • 无法在画布上绘制垂直虚线

    我正在使用以下 javascript 算法在画布上绘制虚线 该算法正确绘制水平线 但无法绘制垂直线 g dashedLine function x y x2 y2 dashArray this beginPath this lineWidt
  • javascript 上的 localStorage 带来刷新

    我试图在空闲时关闭用户 在选项卡之间使用 javascript 下面的代码对于单个选项卡工作正常 对于多个选项卡它无法正常工作 例如 我设置了 10 秒作为空闲时间 并离开了第一个选项卡 它会在 10 秒内将用户抛出 假设我在以下位置打开了
  • 使用 babel 6 时,` __webpack_require__(...) 不是一个函数`

    一切似乎都建立得很好 http d pr i 1aZxR http d pr i 1aZxR使用以下配置 但是 当我运行代码时 出现以下错误 通过 webpack dev server Uncaught TypeError webpack