2

Im having problems bundling up my react app in a grunt-task, the app is written in in Typescript with *.tsx-files. For in-browser Typescript on the fly-compile works well. The components get loaded via system as *.tsx-files and compiled to javascript and run. In-Browser trigger: 

<script> System.import("app/Main"); </script>

works finde ... But when i try to create a bundleSFX i get a lot errors related to TSX.

Grunt-Bundle command:

jspm.bundleSFX('app/Main', 'dist/build.js', {
        minify: true,
        mangle: true,
        lowResSourceMaps: true,
        sourceMaps: false
    }).then(function () { 
    ...

throws: 

MultipleErrors: app/FilterButton.tsx:3:50: Unexpected token <

System.Config.js: 

  // ... defaults here 
  transpiler: "typescript",

  typescriptOptions: {
    "noImplicitAny": false,
    "typeCheck": true,
    "jsx": 2, // << was important to get TSX working (in browser) 
    "module": "system",
    "isolatedModules": false,
    "emitDecoratorMetadata": true,
    "declaration": false,
    "suppressImplicitAnyIndexErrors": true
  }
  // ... defaults here 
  packages: {
    "app": {
      "defaultExtension": "tsx",
      "map": {
        "typescript": "typescript"
      },
      "modules": {
        "*.tsx": {
          "loader": "typescript"
        }
      }
    }
  }
  map: { 
     // ... JSPM installs here 
  }

the "jsx": 2 flag works fine see here: https://github.com/Microsoft/TypeScript/issues/5918

What am i missing here ... , and why does it work in browser without errors ?

GauSim
  • 69
  • 1
  • 4
  • I think the value of `jsx` option should be `"react"`, not `2`. [See this.](https://github.com/Microsoft/TypeScript/wiki/JSX) – Louay Alakkad Dec 16 '15 at 20:38
  • yes, i had it set to `"react"` but then i didnt get any TSX support at all. a member of the typescript team gave me the hint to use `2` instead. see here https://github.com/Microsoft/TypeScript/issues/5918 – GauSim Dec 17 '15 at 19:44
  • Ok, so the issue is only in `jspm.bundleSFX` I guess. I haven't used jspm before but I think you should pass it the typescript resolver/config somehow. You're not doing that. See this: http://stackoverflow.com/questions/31688000/jspm-bundle-with-typescript-transpiler – Louay Alakkad Dec 17 '15 at 21:59
  • Aka. you need to have a `jspm.conf.js` file. Probably the same content as `System.Config.js`. – Louay Alakkad Dec 17 '15 at 22:00
  • Possible duplicate of [React.js code not recognized in TSX file (VS 2015 Update 1 RC)](http://stackoverflow.com/questions/33806240/react-js-code-not-recognized-in-tsx-file-vs-2015-update-1-rc) – Paul Sweatte Sep 06 '16 at 14:12
  • Possible duplicate of [use a typescript module/class in the browser and in the server (Node.Js)](https://stackoverflow.com/questions/16930398/use-a-typescript-module-class-in-the-browser-and-in-the-server-node-js) – Paul Sweatte Jul 19 '17 at 22:57

0 Answers0