Open ExtraBB opened 6 years ago
Does this plug support TSX?
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.
Need help here. @ForbesLindesay Can you please give a snippet or example?
Just add declare const pug: any;
to the top of any file that uses 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?
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.
@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.
Never mind, it is working now.
@param-fk and to anyone who got TS with this working. I couldn't get them to work and I tried all options:
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',
]
}
},
]
},
]
}
}
@param-fk how you made it work! I am still stuck on the same error for the same reason
even i am stuck with same error please explain how you did this?
@param-fk please explain how you did this?
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.
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
)
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
, theHeader
import is marked as an unused import.Does anyone know how to solve this? Thx.
Blocked by https://github.com/Microsoft/TypeScript/issues/9191
So would this mean that pug needs to be transformed before the typescript ?
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
I publish a library to solve this problem. webpack-preprocessor-pug-tsx
trying to get expo / react-native / typescript / pug to work
having a hard time...
it is saying React isnt defined
for me
We should include wisdom from this thread in the README
I am trying to use pug in my Typescript React components like your basic example:
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?