Twin.macro: Possible to use with Laravel and typescript?

Created on 7 Jun 2020 · 8Comments · Source: ben-rogerson/twin.macro

I have tried many setups but these warnings when using with Laravel project running yarn dev and this error:

app.js:151605 Uncaught TypeError: twin_macro__WEBPACK_IMPORTED_MODULE_1___default.a.div is not a function

```WARNING in ./node_modules/babel-plugin-macros/dist/index.js 78:24-31
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
@ ./node_modules/twin.macro/macro.js
@ ./resources/ts/components/Calender.tsx
@ ./resources/ts/app.ts
@ multi ./resources/ts/app.ts ./resources/css/app.css

WARNING in ./node_modules/twin.macro/macro.js 41:61-80
Critical dependency: the request of a dependency is an expression
@ ./resources/ts/components/Calender.tsx
@ ./resources/ts/app.ts
@ multi ./resources/ts/app.ts ./resources/css/app.css

WARNING in ./node_modules/import-fresh/index.js 31:31-48
Critical dependency: the request of a dependency is an expression
@ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/loaders.js
@ ./node_modules/babel-plugin-macros/node_modules/cosmiconfig/dist/index.js
@ ./node_modules/babel-plugin-macros/dist/index.js
@ ./node_modules/twin.macro/macro.js
@ ./resources/ts/components/Calender.tsx
@ ./resources/ts/app.ts
@ multi ./resources/ts/app.ts ./resources/css/app.css```

help wanted

Source

laclance

All 8 comments

Hey Laclance
Twin works with Laravel, but I'm seeing warnings too.
Here are the steps to the setup I tested:

npm i babel-plugin-macros react react-dom styled-components twin.macro ts-loader typescript

// webpack.mix.js
mix.ts("resources/js/app.tsx", "public/js");
mix.webpackConfig({ node: { fs: "empty", module: "empty" } });

// .babelrc
{
    "plugins": ["babel-plugin-macros"]
}

// package.json
{
    "babelMacros": {
        "twin": {
            "preset": "styled-components",
            "autoCssProp": true
        }
    }
}

// app.tsx
import * as React from "react";
import { render } from "react-dom";
import tw from "twin.macro";

const TwProp = () => <Wrap tw="font-bold">Prop example</Wrap>;

const Wrap = tw.div`font-bold`;
const StyledComponent = () => <Wrap>Styled component example</Wrap>;

const App = () => (
    <>
        <TwProp />
        <StyledComponent />
    </>
);

export default App;

render(<App />, document.getElementById("app"));

<!-- app.php -->
<!DOCTYPE html>
<html>
    <body>
        <div id="app"></div>
        <script src="{{ asset('js/app.js') }}"></script>
    </body>
</html>

// twin.d.ts
import "twin.macro";
import styledComponent, { css as cssProperty } from "styled-components";

declare module "twin.macro" {
    const css: typeof cssProperty;
    const styled: typeof styledComponent;
}

// tsconfig.json
{
    "include": ["./resources/js/*", "twin.d.ts"],
    "compilerOptions": {
        "target": "es5",
        "allowJs": true,
        "jsx": "react"
    }
}

ben-rogerson on 8 Jun 2020

Thank you, sorry should have mentioned that I am using typescript, however there is one thing from your example I have not tried, the "autoCssProp": true

laclance on 8 Jun 2020

yup, same error, btw without .webpackConfig({ node: { fs: 'empty', module: 'empty' }})
I get errors: Can't resolve 'fs' and Can't resolve 'module'

laclance on 8 Jun 2020

I've updated my setup with typescript above.

I'm getting these warnings too but not having luck getting rid of them.
Reading around in various issues, I'm seeing suggestions to filter them out with a webpack plugin.

Looking for help on this issue.

ben-rogerson on 9 Jun 2020

I think the problem is babel macros do not work with ts-loader so I got it working with laravel-mix using babel-loader instead by using laravel-mix-react-typescript-extension.

laclance on 20 Jun 2020

👍1

Nice one, after reading this article it seems like the right way to go.

ben-rogerson on 21 Jun 2020

As a side note - I just added a repo that shows how to setup Twin + TypeScript + Laravel

ben-rogerson on 21 Jun 2020

Cool thanks for your help and the awesome library :) Yeah I'm surprised Laravel hasn't switch to use babel or added a way to do it, I guess they don't have enough typescript users yet.

laclance on 22 Jun 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings