Issues with require.js and sourcemaps when compiling typescript with grunt-ts

Question

When using grunt-ts and specifying and out file my app runs as expected, but since that option has no support for fast compilation, i tried using a regular compilation where all my .ts files live on the dist folder

There are two issues, first, it will fail to load any imported file, since it will try to look for it without extension. As a quick fix i edited the load fn on the require.js file and all my dependencies load correctly, but then the sourcemaps stopped working, all i get is a blank file on the chrome inspector (and of course i don't want to rely on a dirty hack) .

Please note that i'm not very familiar with requirejs so I'm not quite sure if this is a misconfiguration on my side, a bug, or something that is missing.

My grunt config, related to ts

ts: {
      options: {
        module: 'amd',
        target: 'es5',
        experimentalDecorators: true
      },
      dev: {
        src: ['client-app/**/*.ts'],
        outDir: "dist",
        watch: '.'
      }
    },

My bootstrap.js which is just the entry point and require.js config file

requirejs.config({
  baseUrl: '.',
  waitSeconds: 20
});

requirejs(['/init'], function(module) {
  module.main()
});

A simplified version of the compiled init file

define(["require", "exports", './section-manager.view'], function (require, exports, section_manager_view_1,) {
    "use strict";
    function main() {
        ///
    }
    exports.main = main;
});
//# sourceMappingURL=init.js.map

And the html

<script src="/js/lib/require.js" data-main="/bootstrap"></script>

Any help is appreciated, thanks

Edit:

Using System.js or @Luis answer solves the loading issue. The sourcemap issue is solved by using sourceRoot or

inlineSourceMap: true,
inlineSources: true

To the ts options

You may want to try out something that works with commonjs modules, it would make it easier. Try Browserify, JSPM, or Webpack. They all have TS plugins. — elclanrs
– elclanrs, Commented Dec 29, 2016 at 22:29
@elclanrs Tried browserify at first, but i was getting lots of errors, since I'm using the new import syntax and not the node syntax — Lu Roman
– Lu Roman, Commented Dec 29, 2016 at 22:32
@randominstanceOfLivingThing the error basically is that it doesn't load the file, it throws a require.js:168 Uncaught Error: Script error for "/init" and if i check on the network tab, its not adding the .js, by adding the extension on require.js via the hack i said before, it works, but then it messes up with the source maps — Lu Roman
– Lu Roman, Commented Dec 29, 2016 at 22:33
Wht are you using requirejs when you specified amd code generation for typescript compiler. I don't see a need to use requirejs. — randominstanceOfLivingThing
– randominstanceOfLivingThing, Commented Dec 29, 2016 at 22:33

Louis · Accepted Answer · 2016-12-29 23:33:37Z

1

Don't use an absolute module name. If you do use an absolute name, RequireJS assumes that you do not want any alteration when it generates a path from the module name and will not add the .js extension. You should use a relative path, or you could do this:

requirejs.config({
    baseUrl: '/'
});

requirejs(['init'], function(module) {
  module.main()
});

By doing this, RequireJS will automatically add the .js extension.

edited Dec 29, 2016 at 23:33

answered Dec 29, 2016 at 23:02

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lu Roman Over a year ago

I've read something about that too, but the thing is (which maybe i should have said) is that it was the first thing i tried, but if i do that, then the init.js doesn't even load. But let check again to confirm

Lu Roman Over a year ago

Ok, i just checked, and it doesn't work, but if i append requirejs.config({baseUrl: '/'}); before that line so that i avoid using / on the first initialization, it works. But the source maps aren't working, i've just tried with System.js and i get the same result, it works but sourcemaps don't seem to be loading, any ideas on that?

Louis Over a year ago

Yeah, you have to use a baseUrl and a module path that are going to work together. What do you do to trigger the loading of the sourcemaps? What network request do you see being done for loading the sourcemaps when you trigger their loading? Is the network request successful? Is it loading an actual sourcemap? You should edit your question with this information.

Lu Roman Over a year ago

Thanks, i realized how to solve the sourceMap issue, using inline sourcemaps or defining "sourceRoot", please add the line of code that sets the baseUrl on your code and i'll mark it as the accepted answer for future reference for other users

Collectives™ on Stack Overflow

Issues with require.js and sourcemaps when compiling typescript with grunt-ts

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related