ReferenceError: tw is not defined when using without macros

[DaneEveritt]

Howdy! Spent the last few hours trying to figure out if I was doing something stupid here, but just hitting walls and Google is letting me down.

I'm trying to use this without the macros by using the babel-plugin-tailwind-components, but I'm just getting ReferenceError: tw is not defined whenever I try to render a component. However things compile without any issues. Its just when I go to load whatever page has the component in the browser. I should mention this is not Tailwind v1.

SomeComponent.tsx

import styled from 'styled-components';

const Row = styled.span`
    ${tw`text-red-500`}
`;

webpack.config.js

{
    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                cacheDirectory: !isProduction,
                presets: ['@babel/env', '@babel/react'],
                plugins: [
                    'react-hot-loader/babel',
                    '@babel/plugin-syntax-dynamic-import',
                    ['styled-components', {
                        displayName: true,
                    }],
                    'tailwind-components',
                ],
            },
        },
        {
            loader: 'ts-loader',
            options: {
                experimentalWatchApi: true,
                transpileOnly: true,
            },
        },
    ],
},

package.json

diff --git a/package.json b/package.json
index 591ae3f8..29681e4d 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
         "react-transition-group": "^4.1.0",
         "socket.io-client": "^2.2.0",
         "sockette": "^2.0.6",
+        "styled-components": "^4.3.2",
         "use-react-router": "^1.0.7",
         "ws-wrapper": "^2.0.0",
         "xterm": "^3.14.4",
@@ -46,11 +47,14 @@
         "@types/react-redux": "^7.1.1",
         "@types/react-router-dom": "^4.3.3",
         "@types/react-transition-group": "^2.9.2",
+        "@types/styled-components": "^4.1.18",
         "@types/webpack-env": "^1.13.6",
         "@types/yup": "^0.26.17",
         "@typescript-eslint/eslint-plugin": "^1.10.1",
         "@typescript-eslint/parser": "^1.10.1",
         "babel-loader": "^8.0.5",
+        "babel-plugin-styled-components": "^1.10.6",
+        "babel-plugin-tailwind-components": "^0.5.10",
         "css-loader": "^2.1.0",
         "cssnano": "^4.0.3",
         "eslint": "^5.16.0",

I'm kind of out of ideas here for what I might be doing wrong. If you need more information let me know, not sure what would be helpful here.

[DaneEveritt]

Also if I try to use babel-plugin-tailwind-components@next I get:

ERROR in ./resources/scripts/index.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
MacroError: [BABEL] /srv/www/resources/scripts/index.tsx: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md (While processing: "/srv/www/node_modules/babel-plugin-tailwind-components/macro.js")
    at macroWrapper (/srv/www/node_modules/babel-plugin-macros/dist/index.js:58:13)
    at loadDescriptor (/srv/www/node_modules/@babel/core/lib/config/full.js:165:14)
    at cachedFunction (/srv/www/node_modules/@babel/core/lib/config/caching.js:33:19)
    at loadPluginDescriptor (/srv/www/node_modules/@babel/core/lib/config/full.js:200:28)
    at config.plugins.reduce (/srv/www/node_modules/@babel/core/lib/config/full.js:69:20)
    at Array.reduce (<anonymous>)
    at recurseDescriptors (/srv/www/node_modules/@babel/core/lib/config/full.js:67:38)
    at loadFullConfig (/srv/www/node_modules/@babel/core/lib/config/full.js:108:6)
    at process.nextTick (/srv/www/node_modules/@babel/core/lib/transform.js:28:33)
    at process._tickCallback (internal/process/next_tick.js:61:11)
 @ multi (webpack)-dev-server/client?https://0.0.0.0:8080 (webpack)/hot/dev-server.js ./resources/styles/main.css ./resources/scripts/index.tsx main[3]```

[GTDev87]

I'm getting the same problem any update anyone? I'm using babel-plugin-tailwind-components@next too.

[DaneEveritt]

@GTDev87 I solved this one, turns out I couldn't use ts-loader and Babel together, I just moved it to be entirely babel for compiling the TS and it started working.