Announcement

Collapse
No announcement yet.

Runtime error when using Retyped.three (A WebGL library)

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

    Runtime error when using Retyped.three (A WebGL library)

    I've added the Retyped.three library via the package manager, but when I run the demo app, it cannot find the require function:
    /**
     * @version 1.0.0.0
     * @copyright Copyright ©  2018
     * @compiler Bridge.NET 16.6.0
     */
    Bridge.assembly("DemoBridgeNET", function ($asm, globals) {
        "use strict";
    
    require(["three"], function (THREE) {
    ...........
    I wouldn't imagine there is something else I needed to do? What am I missing? From what I understand about the require function: it is a part of Module.require which is somehow related / included with Node.

    #2
    Update: Tried to actually include the three.js source file (which I wasn't before) -- But of course it still doesn't know what 'require' is.

    I'm not sure on the retyped workflow -- There appears to be little actually documentation (that I can find at least).

    I was under an initial impression that all you need is the retyped module (not the source).
    But now seeing the bridge/ output, it looks like this is incorrect (since these are only the type files).

    I have added in the source (three.js), but I'm unsure how to hook it up given that Bridge is generating
     require(["three"], function (THREE) {
    Last edited by selinc; 2018-01-29 @ 07:58 PM.

    Comment


      #3
      Also I couldn't find a way to create a Deck.NET snippet for this since its not possible to add new packages.
      (it looks like common things like Newtonsoft are added automatically -- but as far as I can tell I can't use three.js in Deck).

      Comment


        #4
        Hi selinc

        In your .html, add a reference to require.js. For example, here's the recent ThreeJs demo with a link to require.js:

        https://github.com/Retyped/Demos/blo...index.html#L10

        Hope this helps.

        Comment


          #5
          Where does one get require.js? I added
          <script src="three.js"></script>
          I can add require.js, but I'm not sure where this is or what it is actually a part of.

          [EDIT]
          Require is a common function from different modules managers -- requirejs is just one of those managers?
          Thanks, so presumably this would be needed for many Retyped projects (as many things being retyped use modules).

          Comment


            #6
            You can grab a copy from that Retyped Demo project, or directly from the Require.js website.

            Comment


              #7
              Thanks! One last question:
              Why does the require.js script tag have to be below the bridge.js script tag?
              <!DOCTYPE html>
              
              <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
              <head>
                  <meta charset="utf-8" />
                  <title>Retyped Three.js Demo</title>
              
                  <!-- Error occurs if the require.js is put before bridge.js (even though it doesn't depend on it)
              
                      Message:
              err = Error: Mismatched anonymous define() module: function () { return Nn } http://requirejs.org/docs/errors.html#mismatch at makeError (file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/require.js:168:17) at intakeDefines (file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/require.js:1251:36) at Object.localRequire [as require] (file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/require.js:1443:21) at requirejs (file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/require.js:1794:24) at file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/bridge/ThreeJsDemo.js:9:5 at Object.Bridge.assembly (file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/bridge/bridge.js:3102:22) at file:///C:/Users/rilehudd/Projects/rilehudd/Demos/ThreeJsDemo/ThreeJsDemo/dist/bridge/ThreeJsDemo.js:6:8
              --> <script src="require.js"></script> <script src="bridge/bridge.js"></script> <!--<script src="require.js"></script>--> <script src="bridge/ThreeJsDemo.js"></script> </head> <body> </body> </html>
              It looks like something bridge.js is doing is causing this. I read that link for require.js -- but its still a bit fuzzy as to whats going on exactly.
              In the mean time I'll just use convention of bridge.js always being first.

              Comment


                #8
                Thanks for pointing out the issue with placing require.js above bridge.js. It should work, so we'll have to investigate.

                Comment


                  #9
                  There are a lot of Retyped packages generated for libraries declared as UMD modules. So they could be either loaded as a module, or accessed directly through global variables. Retyped supports the both scenarios.

                  1. Load as a module

                  In order to include a Retyped package as a module the following steps are required.

                  1. The HTML page should include Bridge output JavaScript files and a loader (we use require.js in Retyped samples):
                  <script src="bridge/bridge.js"></script>
                  <script src="require.js"></script>
                  <script src="bridge/ThreeJsDemo.js"></script>
                  2. require.js should be included before the scripts where it's actually used.
                  3. Please note that three.js should be located beside require.js in order to get resolved. Currently Retyped doesn't embed JavaScript sources into packages.

                  As for loading process, take a look at loader setting in bridge.json. You can specify the loader type you use, to instruct Bridge what syntax should be generated. The setting loaderFunction allows to specify a custom function if there is need for that.


                  2. Load as a script (access through global variables)

                  1. In this scenario we should instruct Bridge that a Retyped package doesn't require loading. To achieve that configure the following bridge.json settings:
                  "loader": {
                    "manualLoading": "true",
                    "skipManualVariables": "true"
                  },
                  If you want to disable loading of specific modules, use manualLoadingMask instead of manualLoading setting.

                  2. The HTML file would look like:
                  <script src="bridge/bridge.js"></script>
                  <script src="bridge/ThreeJsDemo.js"></script>
                  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.js"></script>
                  We don't need to include require.js anymore, but now we should explicitly include three.js library. In the HTML above a link to CDNJS is specified to demonstrate that we don't depend on the loader now.

                  The following statement is applicable for the both scenarios. Make sure you include the right version of library JavaScript file (it's not always the latest version). The easiest way to get the correct library version is to look at major.minor version of the Retyped package for that library, the versions should match.
                  Last edited by Andrey; 2018-01-29 @ 10:16 PM.

                  Comment


                    #10
                    Thanks Andrey. This was very thorough and insightful

                    Do we have an idea why require.js can't be included first? Its seems that there is some kind of conflict with bridge.js.

                    Comment


                      #11
                      Small update on the "require" issue. The reason of the issue are decimal.js library exports overriding Bridge.
                      See Issue #3539 for more details.

                      Comment


                        #12
                        The Issue #3539 was fixed and will be available in Bridge v17.1.0.

                        Comment

                        Working...
                        X