Phonegap Serve: SocketIO injection Issue with RequireJS apps

theaccordance commented 8 years ago

OS: Mac OS X 10.11.4 CLI Version: 6.0.3 Node Version: 4.3.1 Browsers: Google Chrome 50.0.2661.86 (64-bit), Chrome Canary 52.0.2718.0 canary (64-bit)

I have a phonegap app that's built with Require.JS, when I load the app into the browser using phonegap serve, RequireJS throws a 7.3k line-long error message about an Uncaught Error: Mismatched anonymous define() module related to socket.io This gist contains the error in its entirety. This happens every time the app is initialized (page refreshed), and it has a significant impact on the browser, slowing down our iterative development process.

I verified that our application does not have socket.io as a dependency, but the library is being injected at the bottom of my page when using phonegap serve. Below is my source for the index file being served:

<!DOCTYPE html>
<html xmlns:ng='http://angularjs.org' id='ng-app' ng-app='hgMobile'>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>HG Mobile</title>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="vendor/require.js"></script>
        <script type="text/javascript">
            require(["source/index"]);
        </script>

        <script>window.debugApp;</script>

    </head>
    <body>
        <ion-nav-view></ion-nav-view>
    </body>
</html>

But when inspecting the page in Chrome, I find that socket.io is injected at the bottom of the page: screen shot 2016-04-27 at 2 09 16 pm

I've attempted to run phonegap serve --no-autoreload but that doesn't resolve the problem either.

theaccordance commented 8 years ago

Bueller?... Bueller?... Bueller?

surajpindoria commented 8 years ago

Hi @theaccordance,

We use socket.io for logging as well as some internal processes and therefore inject it when we start the server. It is not related to the autoreload work.

purplecabbage commented 8 years ago

There does appear to be a conflict between requirejs and socket.io, I see a patch here ( although it does not really help you @theaccordance ) https://gist.github.com/Tug/3d1c0282df796a518a5c

theaccordance commented 8 years ago

I ended up building out my own serve function within my project's grunt.js workflow. Not too difficult to mimic with the exception of the proxy, but I'm using a CORS plugin to circumvent that need until I can set time aside to configure one.

nickforddev commented 7 years ago

I am currently experiencing the exact same issue, as soon as I include the require.js script I get the very long error.

Uncaught Error: Mismatched anonymous define() module

Any suggestions? Unfortunately I didn't get a lot out of @theaccordance's solution, I'd like to keeping using phonegap serve if possible to test on the Phonegap developer app...

schirrel commented 7 years ago

i'm having the same issue, did someone maneged to solve this, or have a work around?

theaccordance commented 7 years ago

I'm still using the workaround I described above. Not ideal to "recreate the wheel", but it's worked and I haven't had to deal with the mismatch error in my console logs during iterative development.

Thoughts I've had in terms of addressing the problem so I could continue using phonegap serve:

Move away from Require.js for the project (although I have no idea that I wouldn't encounter the same issue w/ another bundler)
Attempt to track the bug down in socket.io (assuming it's an actual bug) & petitioning for the patch to be applied to phonegap

theaccordance commented 7 years ago

To clarify what my workaround is:

I ditched phonegap serve in favor of a different web server to launch my cordova project in-browser. I went with grunt-contrib-connect since I'm a grunt.js guy, there's a lot of other options available as well if you're not into grunt. My server points to the compiled browser target: my-project/platforms/browser/www
I had to add a CORS plugin to Google Chrome to address CORS issues when making calls. Might be other ways to address this, I just went with a quick & easy option.
I paired the web server with a grunt-contrib-watch to watch for file changes in my source and run the necessary build steps to compile into my-project/platforms/browser/www when files are changed

nickforddev commented 7 years ago

@theaccordance I can confirm that webpack does not suffer from this conflict, I'm now using webpack with phonegap serve without issue.

funkyvisions commented 6 years ago

I'm having this issue as well. Would love to see this fixed.

theaccordance commented 6 years ago

I'm ditching RequireJS as I plan an upgrade of our major frameworks for my client-side stack, so this will no longer be an issue for me.

Since no traction was made on this issue, I would encourage others to move away from RequireJS, should they feel this is important enough to address.

krampstudio commented 6 years ago

The quick trick is to comment a few lines in node_modules/socket.io-client/socket.io :

(function webpackUniversalModuleDefinition(root, factory) {
    //if(typeof exports === 'object' && typeof module === 'object')
        //module.exports = factory();
    //else if(typeof define === 'function' && define.amd)
        //define([], factory);
    //else if(typeof exports === 'object')
        //exports["io"] = factory();
    //else
        root["io"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap

but it's really dirty... but I don't see how we can handle this in userland especially since connect-phonegap injects code that rely on the global variable :

<script>
(function(window) {
    var socket = io(document.location.protocol + '//' + document.location.host);
    //...

phonegap / phonegap-cli

Phonegap Serve: SocketIO injection Issue with RequireJS apps #596