Transformers with TSX extensions are not compiled

[itsdouges]

Hi! Love the tool.

I'm trying to use it with ts-loader and ts-jest with an uncompiled transformer written in typescript - but it doesn't get compiled by ts-node (with compiler set as ttypescript).

It's fine if I run ttsc though.

Any ideas?

/Users/mdougall/projects/css-in-js/src/ts-transformer.tsx:1
(function (exports, require, module, __filename, __dirname) { export { default } from './ts-transformer/index';
                                                              ^^^^^^

SyntaxError: Unexpected token export

[cevek]

I've just checked ts-jest with uncompiled transformer - it works for me. Could you please provide your example project to investigate the issue?

[itsdouges]

Sure no worries will make a branch for you in a bit, thanks for the quick response!

On Tue, 7 Jan 2020, 8:08 pm cevek, notifications@github.com wrote:

I've just checked ts-jest with uncompiled transformer - it works for me. Could you please provide your example project to investigate the issue?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cevek/ttypescript/issues/78?email_source=notifications&email_token=ABT4PHPXAMV3TIY5VLDBV2TQ4RA7XA5CNFSM4KDR67P2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIIGH4I#issuecomment-571499505, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABT4PHPEU7TV7VN4XNYO4BDQ4RA7XANCNFSM4KDR67PQ .

[itsdouges]

hi @cevek

git clone git@github.com:compiled/css-in-js.git
git checkout use-uncompiled-transformer
yarn
yarn start # runs storybook with ts-loader
yarn test # runs jest with ts-jest

PR here https://github.com/compiled/css-in-js/pull/32

[cevek]

Thank you! I've found and fixed a bug with ts-node config which working only with ts extenstion but no tsx Check out ttypescript@1.5.9

[itsdouges]

sweet thanks @cevek! that does indeed fix my problem - interestingly it doesn't look like esModuleInterop option is flowing through though.

could it not be picking up all the tsconfig?

/Users/mdougall/projects/css-in-js/src/ts-transformer/css-prop/visitors/visit-jsx-element-with-css-prop.tsx:123
  const compiledCss = stylis(`.${className}`, cssToPassThroughCompiler);
                            ^
TypeError: stylis_1.default is not a function
    at Object.exports.visitJsxElementWithCssProp (/Users/mdougall/projects/css-in-js/src/ts-transformer/css-prop/visitors/visit-jsx-element-with-css-prop.tsx:123:29)

you can replicate this using the same steps above (just get the latest commit)

[cevek]

I've added esModuleInterop: true in ttypescript@1.5.10

could it not be picking up all the tsconfig?

For the transformer files should be another tsconfig because they run on nodejs side and can be different from main project settings. In plugin system is not always possible to read from file system, so it should be default config for transformers. Maybe in future we will support custom tsconfig

Default config:

target: 'ES2018',
jsx: 'react',
esModuleInterop: true,
module: 'commonjs',

[itsdouges]

fantastic solves all my problems, thanks @cevek!

For the transformer files should be another tsconfig because they run on nodejs side and can be different from main project settings.

yeah that makes sense when said out loud - TIL 😄

thanks again!