No announcement yet.

[CLOSED] Beginner question, "require is not defined" when using svg.js?

  • Filter
  • Time
  • Show
Clear All
new posts

    [CLOSED] Beginner question, "require is not defined" when using svg.js?

    After tested a few "hello world" type of samples to run within the browser successfully, I wanted to add a bit of feature so I have installed (via Retyped) the extension for SVG.JS. All seems fine until I tried to run the results, the first a few line of the generated js file looks like:
        require(["svg.js"], function (svgjs) {
            Bridge.define("Bridge2.App", {
    It always throws an error:
    Bridge2.js:9 Uncaught ReferenceError: require is not defined
    I assume the svg.js file needs to be downloaded and copied to the same folder as the project js file, to my surprise, there is already a sub-folder named svg.js (contains an index.d.ts file). My current computer (windows 10) does not allow I copy the svg.js file over there due to the name conflict. Questions:
    • Do I need to remove the svg.js subfolder, then copy svg.js file in there? I tested it and it did not fix the issue.
    • Do I need to download and attach RequireJS? I tested that and it did not fix the issue.
    • Do I need to include more js files in index.html? I tested a few combinations and none seems work
    • Is it usually something wrong in the third party js file svg.js?
    The strange thing is I can see references to require in bridge.js just I can not figure out where it was defined
    Last edited by loscrimmage; 2018-03-18 @ 09:39 PM.

    Hi loscrimmage,

    Welcome to Bridge and Retyped!

    I think the following Retyped demo of svg.js is going to help, see:

    Retyped does not currently embed the library .js files within the assembly, so they need to be downloaded from their official locations and manually added to your .html file. In your sample, both require.js and svg.js would need to be added to the .html.

    Hope this helps.


      Hi loscrimmage,

      In addition to geoffrey.mcgill 's answer.

      The svg.js subfolder you mentioned is created when you configure typescript declaration files to be emitted by Bridge (see generateTypeScript setting in bridge.json file). You can disable that option and the folder wouldn't be longer generated. Another way to prevent name collisions is to put 3rd party JavaScript files in a separate folder/subfolder.

      Also make sure RequireJS is included in the HTML file after bridge.js reference but before scripts using the require function.


        Thank you guys. I was able to make it all working based on the answers. Yes I have to explicitly load require.js in the html file, but svg.js is loaded via Request. Thanks again!

        I ended up using a post-build script to copy certain files to another folder and launch the browser window. I have to say everything works well under Visual Studio and you guys really made a great product!