Integration with Typescript (TSX)

[ExtraBB]

I am trying to use pug in my Typescript React components like your basic example:

render() {
    return pug`
      div
        h1 My Component
        p This is my component using pug.
    `;
  }

The problem is that I can't get it to work because the typescript loader fails on the pug command.
However, to use babel, the Typescript files first have to be compiled to javascript. Can anyone help me get out of this Catch-22?

[super918180]

Does this plug support TSX?

[ForbesLindesay]

You could add a definition file that declares declare const pug: any;, which would fix the typescript compiler, you need to make sure the "target" config of typescript includes template literals too.

[param-fk]

Need help here. @ForbesLindesay Can you please give a snippet or example?

[ForbesLindesay]

Just add declare const pug: any; to the top of any file that uses pug.

[bk1012]

@ForbesLindesay
sorry, I get another problem like this:

./src/pages/A.tsx
Module parse failed: Unexpected token (34:19)
You may need an appropriate loader to handle this file type.
|         key: 'render',
|         value: function render() {
|             return <div>12234</div>;
|         }
|     }]);

file A.tsx

import * as React from 'react';

class A extends React.PureComponent {
  render() {
    return pug`
      div 12234
    `;
  }
}

export default A;

In my project
tsconfig.json target is es2015
.babelrc plugins is [ "transform-react-pug", "transform-react-jsx", "transform-runtime", "syntax-dynamic-import" ]

"transform-react-jsx" seems could not transform tsx.....
I tried to use google to solve the problem, but could not find the answer. Could you tell me how to deal with this?

[ForbesLindesay]

I don't know what could be causing that. I've never seen it be an issue before. It looks more like a problem with babel, than typescript.

[param-fk]

@ForbesLindesay Just adding declare const pug: any; on top of the file would surpass the tslint error. But at the time of compilation as in webpack below

{
            test: /\.tsx?$/,
            use: [
                {
                    loader: 'babel-loader',
                    options: babelOptions
                },
                {
                    loader: 'awesome-typescript-loader'
                }
            ],
            exclude: /node_modules/,
        },

It'll run the typescript loader first and when it doesn't find pug variable defined it throws an error at compile time only. That's the whole problem.

[param-fk]

Never mind, it is working now.

[mostrecent]

@param-fk and to anyone who got TS with this working. I couldn't get them to work and I tried all options:

1. ts-loader first, then babel-loader with the pug and jsx stuff
2. only the babel-loader with typescript plugin/preset (which also MS recommends)

With any option I end up with an error stating that the React components in the pug template strings are not recognized, e.g. Uncaught ReferenceError: BrowserRouter is not defined. My Webpack config with option 2 is:

module.exports = {
  entry: './src/index.ts',
  resolve: {
    extensions: ['.ts', '.js', '.jsx', '.tsx']
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              plugins: [
                '@babel/plugin-transform-typescript',
                'transform-react-pug',
                'transform-react-jsx',
              ]
            }
          },
        ]
      },
    ]
  }
}

[imadbz]

@param-fk how you made it work! I am still stuck on the same error for the same reason

[suniv2010]

even i am stuck with same error please explain how you did this?

[suniv2010]

@param-fk please explain how you did this?

[ikeq]

This is the problem I have encountered:

import { Header } from './components'

console.log(Header) // produce a side effect

export function Main(props) {
  return pug `
    Header
  `
}

It works just fine, but when I remove console.log(Header),
import { Header } from './components' is also be removed by Typescript.

Because the source code is through Typescript first and Typescript does not handle pug, the Header import is marked as an unused import.

Does anyone know how to solve this? Thx.

[ForbesLindesay]

My suggestion would be to use babel to compile your TypeScript via https://babeljs.io/docs/en/babel-preset-typescript and use the typescript CLI just for type checking (by passing --noEmit)

[stevefan1999-personal]

This is the problem I have encountered:

import { Header } from './components'

console.log(Header) // produce a side effect

export function Main(props) {
  return pug `
    Header
  `
}

It works just fine, but when I remove console.log(Header),
import { Header } from './components' is also be removed by Typescript.

Because the source code is through Typescript first and Typescript does not handle pug, the Header import is marked as an unused import.

Does anyone know how to solve this? Thx.

Blocked by microsoft/TypeScript#9191

[Gooseware]

So would this mean that pug needs to be transformed before the typescript ?

[stevefan1999-personal]

So would this mean that pug needs to be transformed before the typescript ?

Yes, using a custom transformer so that it ends up being a valid JSX node and TS will be able to recognize this block of Pug code and the components as valid references, so that no elision is gonna happen

[pruge]

I publish a library to solve this problem.
webpack-preprocessor-pug-tsx

[gotexis]

trying to get expo / react-native / typescript / pug to work

having a hard time...

it is saying React isnt defined for me

[skotchpine]

We should include wisdom from this thread in the README