Integration with Typescript (TSX) about babel-plugin-transform-react-pug HOT 20 OPEN

Never mind, it is working now.

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

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.

from babel-plugin-transform-react-pug.

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

having a hard time...

it is saying React isnt defined for me

from babel-plugin-transform-react-pug.

Does this plug support TSX?

from babel-plugin-transform-react-pug.

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.

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

@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?

from babel-plugin-transform-react-pug.

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.

from babel-plugin-transform-react-pug.

@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.

from babel-plugin-transform-react-pug.

@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',
              ]
            }
          },
        ]
      },
    ]
  }
}

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

@param-fk please explain how you did this?

from babel-plugin-transform-react-pug.

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)

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

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

from babel-plugin-transform-react-pug.

We should include wisdom from this thread in the README

from babel-plugin-transform-react-pug.