Vux: Uncaught TypeError: Cannot read property 'EventSource' of undefined

Created on 1 Aug 2016 · 39Comments · Source: airyland/vux

只是初始化了模板，跑起来就页面空白了，得到一个TypeError

Uncaught TypeError: Cannot read property 'EventSource' of undefined

Version

vux: 0.1.2
vue-cli: 2.1.0
npm: 2.15.0
node: 4.4.2

Android or iOS

PC 谷歌浏览器打开 device mode (其他浏览器也一样)

Codes

``` r, engine='bash'
vue init vuxjs/webpack vux-template
cd vux-template
npm install
npm install vux
npm install less less-loader --save-dev\
npm run dev

### Expected behavior and actual behavior.

页面空白，异常信息如下
![console_info](https://cloud.githubusercontent.com/assets/19884648/17293881/a86a1388-5825-11e6-9ebc-1ec0301bc581.png)
- eventsource.js?279b?8

``` JavaScript
/*
   * EventSource polyfill version 0.9.6
   * Supported by sc AmvTek srl
   * :email: [email protected]
 */
;(function (global) {

    if (global.EventSource && !global._eventSourceImportPrefix){
        return;
    }

app.js:1405

eval("'use strict';\n\n;(function (global) {\n\n    if (global.EventSource && !global._eventSourceImportPrefix) {\n        return;\n    }\n\n    var evsImportName = (global._eventSourceImportPrefix || '') + \"EventSource\";\n\n    var EventSource = function EventSource(url, options) {\n\n        if (!url || typeof url != 'string') {\n            throw new SyntaxError('Not enough arguments');\n        }\n\n        this.URL = url;\n        this.setOptions(options);\n        var evs = this;\n        setTimeout(function () {\n            evs.poll();\n        }, 0);\n    };    /*这里还剩很多，省略*/");

Steps to reproduce the problem

=_=

Usage problem doc needed

Source

jxunx

Most helpful comment

@airyland 实际原因是要在 { test: /vux.src.*?js$/, loader: 'babel' } 里加上 include: projectRoot, exclude: /node_modules/

      {
        test: /vux.src.*?js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      }

至于在你们电脑上没问题，就不得而知了。

'EventSource' of undefined 不是缺少 include: projectRoot, exclude: /node_modules/ 导致的，是 eventsource-polyfill 导致的。
缺少 include: projectRoot, exclude: /node_modules/ 会导致在 es6.object.define-property.js 里出现 Uncaught TypeError: $export is not a function, 这个错误被 'EventSource' of undefined 掩盖了。
eventsource-polyfill eventsource.js 的框架是 ;(function (global) { /* 方法体 */ })(this);, 这在 { test: /vux.src.*?js$/, loader: 'babel' } 下会导致 'EventSource' of undefined, 去掉 { test: /vux.src.*?js$/, loader: 'babel' } 或者加上 include: projectRoot, exclude: /node_modules/ 则不会，应把 this 改为 typeof window !== 'undefined' ? window : this 避免 'EventSource' of undefined 掩盖其他错误。

;(function (global) {
    /* 方法体 */
})(typeof window !== 'undefined' ? window : this);

○|￣|_

jxunx on 4 Aug 2016

❤1 🎉1 👍1

All 39 comments

本地无法重现。删掉node_modules重新install一次试试。

airyland on 1 Aug 2016

没能解决。 @airyland 能否提供一个思路？

jxunx on 1 Aug 2016

vue init webpack 呢。不行换个环境试试。换台电脑什么的初始化。

airyland on 1 Aug 2016

在global.eventsource上打个断点，跟踪进去看global是不是为空？global照道理应该是window

graysheeep on 2 Aug 2016

@graysheeep 上一个调用确实传了一个 undefined 给 gloabal

    eval("'use strict';\n\n;(function (global) {    /*...*/    })(undefined); //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3Vy/*这里还有很多十六进制*/");

app.js完整的第1405行是

eval("'use strict';\n\n;(function (global) {\n\n    if (global.EventSource && !global._eventSourceImportPrefix) {\n        return;\n    }\n\n    var evsImportName = (global._eventSourceImportPrefix || '') + \"EventSource\";\n\n    var EventSource = function EventSource(url, options) {\n\n        if (!url || typeof url != 'string') {\n            throw new SyntaxError('Not enough arguments');\n        }\n\n        this.URL = url;\n        this.setOptions(options);\n        var evs = this;\n        setTimeout(function () {\n            evs.poll();\n        }, 0);\n    };    /*这里还剩很多，省略*/");

app.js:556

    function __webpack_require__(moduleId) {

        // Check if module is in cache
        if(installedModules[moduleId])
            return installedModules[moduleId].exports;

        // Create a new module (and put it into the cache)
        var module = installedModules[moduleId] = {
            exports: {},
            id: moduleId,
            loaded: false,
            hot: hotCreateModule(moduleId),
            parents: hotCurrentParents,
            children: []
        };

               // Execute the module function
/*556*/         modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

        // Flag the module as loaded
        module.loaded = true;

        // Return the exports of the module
        return module.exports;
    }

app.js:87

    function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars
        var me = installedModules[moduleId];
        if(!me) return __webpack_require__;
        var fn = function(request) {
            if(me.hot.active) {
                if(installedModules[request]) {
                    if(installedModules[request].parents.indexOf(moduleId) < 0)
                        installedModules[request].parents.push(moduleId);
                    if(me.children.indexOf(request) < 0)
                        me.children.push(request);
                } else hotCurrentParents = [moduleId];
            } else {
                console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId);
                hotCurrentParents = [];
            }
/*87*/          return __webpack_require__(request);
            ...
        }
    }

jxunx on 2 Aug 2016

@airyland 在虚拟机试了下还是不行，在本机做了好几个 demo，只有一个是 OK 的，我在找有什么不同。。

jxunx on 2 Aug 2016

系统环境是？如果是npm, 换一下源试试，比如用cnpm。

airyland on 2 Aug 2016

@airyland win 10 version 1607 build 14393.5
稍后我试试 cnpm

jxunx on 2 Aug 2016

用的 vuxjs/webpack 模板，我的机器上删除

      {
        test: /vux.src.*?js$/,
        loader: 'babel'
      }

就不会 EventSource of undifined 了，但是会得到 Unexpected token export, 然后再把 node_modules/vux/src/libs/router.js 里的 export 删除就可以了。

@airyland 不知道为什么在你们的机器不会出现 EventSource of undefined, 但是确实经过那两步模板代码就跑起来了。

jxunx on 2 Aug 2016

未解之谜。。有试过在Linux系统或者Mac上运行吗

airyland on 2 Aug 2016

@airyland 没有，我试试 Linux. 总之，谢谢了！

jxunx on 2 Aug 2016

我突然意识到会不会文件夹命名的问题，vux-template，你去掉vux试试。上面的loader正则可能在这种情况下匹配到了不该匹配的。

airyland on 2 Aug 2016

另外可能的原因是 npm 的版本，你升级到3试试

airyland on 2 Aug 2016

除了 vux-template 我已经创建了别的项目验证这点了（只在我的电脑上）。/vux.src.*?js$/ 应该不会匹配 vux-template

jxunx on 2 Aug 2016

刚试了下 npm 升级到了 3.10.5, 不管用

jxunx on 2 Aug 2016

要不你打包一份代码发我邮箱。。我彻底无解。。

airyland on 2 Aug 2016

@airyland 我放在了百度云上

jxunx on 2 Aug 2016

@jxunx 告诉你一个悲伤的事实，在我本机上完全正常，没有报错。

airyland on 3 Aug 2016

orz (我的天呐太神奇了小岳岳脸)

jxunx on 3 Aug 2016

难道是Win10上才有问题。
我当前的机子 Windows7 node v6.2.2 npm v3.9.5 浏览器 Chrome 49.0.2623.112 m

airyland on 3 Aug 2016

我的机子 win 10 version 1607 build 14393.5 node v4.4.2 npm v3.10.5 Chrome 51.0.2704.103 m
但是又有那么两个项目可以，真是搞不懂

jxunx on 3 Aug 2016

尝试更新下Node版本？
会不会类似于 #444 的问题。

airyland on 3 Aug 2016

@jxunx 下载了你的代码文件在我的电脑上测试，是一切正常的，参考 #444。

li-coding on 3 Aug 2016

@airyland @lili520 我兴奋地升级了 node, 然后灰头土脸地面对现实 ○|￣|_

jxunx on 3 Aug 2016

@jxunx :sweat: 换台电脑试试手气。。升级node后有没有删除重新安装node_modules？

airyland on 3 Aug 2016

有开个虚拟机，有 npm install, 就是没有删除 node_modules, 这就很尴尬了，我试试。

jxunx on 3 Aug 2016

@airyland 实际原因是要在 { test: /vux.src.*?js$/, loader: 'babel' } 里加上 include: projectRoot, exclude: /node_modules/

      {
        test: /vux.src.*?js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      }

至于在你们电脑上没问题，就不得而知了。

'EventSource' of undefined 不是缺少 include: projectRoot, exclude: /node_modules/ 导致的，是 eventsource-polyfill 导致的。
缺少 include: projectRoot, exclude: /node_modules/ 会导致在 es6.object.define-property.js 里出现 Uncaught TypeError: $export is not a function, 这个错误被 'EventSource' of undefined 掩盖了。
eventsource-polyfill eventsource.js 的框架是 ;(function (global) { /* 方法体 */ })(this);, 这在 { test: /vux.src.*?js$/, loader: 'babel' } 下会导致 'EventSource' of undefined, 去掉 { test: /vux.src.*?js$/, loader: 'babel' } 或者加上 include: projectRoot, exclude: /node_modules/ 则不会，应把 this 改为 typeof window !== 'undefined' ? window : this 避免 'EventSource' of undefined 掩盖其他错误。

;(function (global) {
    /* 方法体 */
})(typeof window !== 'undefined' ? window : this);

○|￣|_

jxunx on 4 Aug 2016

❤1 🎉1 👍1

:sweat_smile: 辛苦你了。。

airyland on 5 Aug 2016

但是还是不明白为什么我们其他人没问题 :sweat_smile:

airyland on 5 Aug 2016

@airyland 同一个世界，同一个问题还是有的。我也遇到 #455 这个问题，还没发现什么情况下会出现这个问题，但是一删除 libs/router.js 的两个 export 就好了。

jxunx on 5 Aug 2016

@jxunx 这个报错的原因感觉是没有经过babel, 还能不能重现？如果能在babel-loader模块入口console下看有没有router.js这个文件

module.exports = function(source, inputSourceMap) {
  console.log(this.resourcePath)
  var result = {};

airyland on 5 Aug 2016

@airyland 所言甚是，配置 { test: /vux.src.*?js$/, loader: 'babel' } 的话 babel 会转化 router.js, 但是有个问题 es6.object.define-property.js Uncaught TypeError: $export is not a function, 不配置它或者加上 include: projectRoot, exclude: /node_modules/ 都不会转化 router.js

配置1: 不配置 { test: /vux.src.*?js$/, loader: 'babel' }

=> router.js Uncaught SyntaxError: Unexpected token export
=> 需要去掉 router.js 的两个 export

``` r, engine='bash'
babel transform: E:\code\weixin\lib\vuxsrcrouter-cause-thisbuild\dev-client.js
babel transform: E:\code\weixin\lib\vuxsrcrouter-cause-thissrc\main.js
babel transform: E:\code\weixin\lib\vuxsrcrouter-cause-thissrc\components\HelloFromVux.vue
babel transform: E:\code\weixin\lib\vuxsrcrouter-cause-thisnode_modules\vuxsrc\components\cell\index.vue
babel transform: E:\code\weixin\lib\vuxsrcrouter-cause-thisnode_modules\vuxsrc\components\group\index.vue

- **配置2: 配置 `{ test: /vux.src.*?js$/, loader: 'babel' }`**

=> eventsource.js `Uncaught TypeError: Cannot read property 'EventSource' of undefined`
=> 修改 eventsource-polyfill: 
`this` -> `typeof window !== 'undefined' ? window : this`
=> es6.object.define-property.js `Uncaught TypeError: $export is not a function`

``` r, engine='bash'
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\src\main.js
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\src\main.js
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\build\dev-client.js
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\build\dev-client.js
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\node_modules\vue\dist\vue.common.js
[BABEL] Note: The code generator has deoptimised the styling of "E:/code/weixin/lib/vux/src/router-cause-this/node_modules/vue/dist/vue.common.js" as it
 exceeds the max of "100KB".
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\node_modules\vue-router\dist\vue-router.js
// 好多 node_modules
babel transform: E:\code\weixin\lib\vux\src\router-cause-this\node_modules\vux\src\libs\router.js
// 好多 node_modules

配置3: 加上 include: projectRoot, exclude: /node_modules/

=> router.js Uncaught SyntaxError: Unexpected token export
=> 需要去掉 router.js 的两个 export

r, engine='bash' babel transform: E:\code\weixin\lib\vux\src\router-cause-this\build\dev-client.js babel transform: E:\code\weixin\lib\vux\src\router-cause-this\build\dev-client.js babel transform: E:\code\weixin\lib\vux\src\router-cause-this\src\main.js babel transform: E:\code\weixin\lib\vux\src\router-cause-this\src\main.js babel transform: E:\code\weixin\lib\vux\src\router-cause-this\src\components\HelloFromVux.vue babel transform: E:\code\weixin\lib\vux\src\router-cause-this\node_modules\vux\src\components\group\index.vue babel transform: E:\code\weixin\lib\vux\src\router-cause-this\node_modules\vux\src\components\cell\index.vue

问题：
在这个项目里不管是不是应该那么解决，配置1跟配置3都能跑起来，只有配置2。。
配置2跟配置3会转化 build/dev-dlient.js src/main.js 两次

jxunx on 5 Aug 2016

看得有点混乱啊，你是说一定要把export改成旧版的export.go exports.getUrl么？
然后也需要加include和exclude？

airyland on 5 Aug 2016

@airyland 万恶之源是我的项目放在了 lib/vux/src/ 下，匹配到了 /vux.src.*?js$/, 这就跟没写一样，一切都是因为要么该转化的没被 babel 转化，要么不该转化的被转化了。。。上面说的情况都是项目在 vux/src/ 下才会出现的，所以你们的机器上没问题。

没有把 node_modules/ exclude 掉会有问题，把 router.js exclude 掉也会有问题，这样配置就没问题了

      {
        test: /node_modules.vux.src.*?js$/,
        loader: 'babel'
      }

但是如果有人把项目放在 node_modules.vux.src 又会有问题，所以 include

``` r, engine='bash'
var vuxSrcDir = path.resolve(__dirname, '../node_modules/vux/')

  {
    test: /node_modules.vux.src.*?js$/,
    loader: 'babel',
    include: vuxSrcDir
  }

```

jxunx on 5 Aug 2016

😅 原来原来是项目目录的问题。。你为啥不放在node_modules下？

airyland on 5 Aug 2016

@airyland 不是，我的依赖是在 node_modules/ 下的，是我的 demo 路径包含了 vux/src/
E:\code\weixin\lib\vuxsrcrouter-cause-this

jxunx on 5 Aug 2016

明白了。。

airyland on 5 Aug 2016

这个可以考虑放进 vue init 时的模板里 :sweat_smile:

jxunx on 5 Aug 2016

你上面的有两个问题，一是node_modules后面是.*不是., 然后node_modules里的模块路径是快捷形式，你这种匹配有问题。把项目放在node_modules下的这种情况太变态，不考虑了。直接写成模块调用了：

var vuxLoader = require('vux-loader')
var projectRoot = path.resolve(__dirname, '../')

loaders: [
      vuxLoader.getBabelLoader(projectRoot)
]

https://github.com/airyland/vux-loader/blob/master/src/index.js

airyland on 9 Aug 2016

Was this page helpful?

0 / 5 - 0 ratings

Related issues

XDialog窗体最大宽度不能满足要求

mymmoonoa · 4Comments

Scroller不能正确刷新

varHarrie · 4Comments

vux打包后的文件体积过大

RenShine · 4Comments

建议停止推荐 fastclick

hao-li · 3Comments

popup的zIndex可以变,但是如何改变mask的zIndex

525729985 · 4Comments

Vux: Uncaught TypeError: Cannot read property 'EventSource' of undefined

Version

Android or iOS

Codes

Steps to reproduce the problem

Most helpful comment

All 39 comments

Related issues