24

I am stuck with an old software that uses aspx pages. I have some controls (ascx) that can work almost as a small Single Page Applications (for example a control that lets you register to a Newsletter,or a control that lets the user customize the news feed). (i know... its not really a SPA... )

I started using VUE.js for this small micro-projects. I managed to make it all work with plain JavaScript.

Now I wanted to use typescript instead of JavaScript.

The issue I have: when I create my typescripts and reference some modules like the VUE or my own, it always writes in the generated js file some "require " commands (transpiled to ES5) or some Import commands if transpiled to ES6.

As far as I read, these commands are supposed to be used by some module loaders on the server. But I don't have a Node.Js server nor a Javascript building infrastructure. Is there a way to tell typescript just to ignore those commands? I would then reference manually the needed JS-genereated files with the modules inseide y ascx-control.

1
  • browserify?....
    – YOU
    Oct 17, 2016 at 11:00

3 Answers 3

16

In your tsconfig.json the module property should be none

{
    "compilerOptions": {
        "module": "none"
    }
}

Now there are no more amd or system code. And now you can't use any more import and export statements.

Without this, TypeScript does not know the order of your scripts, and you can have Js undefined errors.

To fix this, just add a triple slash directive instead of import statement

Now TypeScript compile all the scripts in the right order.
Also use outFile instead of out because is deprecated.

5
  • 2
    In my use case I get src/errors.ts:25:14 - error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'. 25 export class AttributeError extends Error { when using 'module': 'none'. How do I fix that?
    – Jus
    May 31, 2018 at 21:09
  • I mentioned above that you can't use import/export without module May 31, 2018 at 22:21
  • @Jus my new answer above might help you Jun 20, 2018 at 17:10
  • "module": "none" and "outFile": "something.js" doesn't produce any output. Any idea why? Apr 29, 2019 at 10:08
  • do you have any other compilation errors? it might be configured not to output in case of error.
    – toskv
    Apr 30, 2019 at 21:13
4

Ofcourse you can. You just have to configure tsc to output the code without a the module loader statements.

For example, all the code into one big file.

{
    "compilerOptions": {
        "target": "es5",
        "outFile": "www/js/bundle.js",
        "sourceMap": true,
        "declaration": true,
        "removeComments": true,
        "sourceRoot": ""
    }
}

That might limit your use of the ES6 import statements. You might have to use the typescript defined namespaces instead.

3
  • Thanks. I'll try that out
    – CodeHacker
    Oct 17, 2016 at 11:38
  • This does not work, because out (deprecated use outFile instead) does not respect any script order, and you can have a lot of errors in Js Jan 4, 2017 at 14:21
  • 1
    error TS6131: Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system' Apr 29, 2019 at 9:57
2

I had a similar situation, old aspx system where I wanted to use ts -> js transpilation followed by system.web.optimization bundling.

My specific problem was related to this SO question i.e. using moment.js in a typed way while avoiding output being generated like

Object.defineProperty(exports, "__esModule", {
    value: !0
});
var moment = require("moment");

which would cause a js error like

ReferenceError: exports is not defined

I found that adding

"module" : none 

to tsconfig.json along with a copy of the moment.d.ts file with their line

 export = moment;

removed or commented out.

 {
      "compileOnSave": true,
      "compilerOptions": {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5",
        "outDir": "scriptoutput", //,
        "allowSyntheticDefaultImports": true,
        "module": "none"
        //"typeRoots": [ "node_modules/@types/", "node_modules/moment/" ]
      },
      "exclude": [
        "node_modules",
        "wwwroot",
        "scriptoutput"
      ],
      "include": [
        "script/custom-typings/moment.d.ts",
        "**/*"
      ]
    }

worked a treat, I now have my ts working fine, without any module loading, and with the typing that helps make typescript awesome !

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.