Open bipsBro opened 5 years ago
@bipsBro you can define your local definition like below to make the compiler happy.
declare module 'tailwind.macro'
Hello, I tried this module declaration and for some reason it did not work. 🤔
I also tried:
declare module 'tailwind.macro' {
export default function tw(string: TemplateStringsArray): string;
}
The error I get when trying to load the page:
Failed to compile.
./node_modules/babel-plugin-macros/node_modules/resolve-from/index.js
Module not found: Error: Can't resolve 'module' in '/Users/john/project/node_modules/babel-plugin-macros/node_modules/resolve-from'
I am using:
The code excerpt I am using just to check if it can compile and use the macro:
import styled from 'styled-components';
import tw from 'tailwind.macro';
const Button = styled.button`
${tw`bg-gray-300 text-yellow-900 px-8 m-8 rounded h-20 text-3xl`}
`;
console.log(Button);
I also got extra potentially useful errors in the console:
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
WARNING in ./node_modules/tailwind.macro/macro.js 1178:49-68
Critical dependency: the request of a dependency is an expression
I also tried additional things like:
"@babel/preset-typescript": "^7.9.0",
to my dependencies and configure it on babel.config.js"typescript-transform-macros": "^1.1.1",
to my dependencies and configure it on tsconfig.jsonI ran out of ideas, any thoughts? I appreciate any replies 🙏
@cabello using the declaration that you supplied works fine for me
I suppose it it your typescript setup that is incorrect?
Do you have a minimal reproduction URL then we could have a closer look?
Checkout Twin - it received TypeScript support yesterday.
HI @ben-rogerson, thank you for working on Twin. I just tried Twin and got the same error :( @PaulPCIO I do not discard the possibility of being my setup, I am using webpacker, this is my package.json:
{
"name": "app",
"private": true,
"engines": {
"node": "12.16.x"
},
"dependencies": {
"@babel/preset-react": "^7.8.3",
"@emotion/core": "^10.0.28",
"@emotion/styled": "^10.0.27",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "4.2.2",
"@types/jest": "^24.0.25",
"@types/markdown-to-jsx": "^6.9.1",
"@types/mustache": "^4.0.0",
"@types/node": "^13.1.4",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"@types/react-icons": "^3.0.0",
"@types/react-router-dom": "^5.1.3",
"@types/styletron-engine-atomic": "^1.1.0",
"@types/styletron-react": "^5.0.2",
"@types/styletron-standard": "^2.0.0",
"agora-rtc-sdk": "^3.0.2",
"axios": "^0.19.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"baseui": "^9.52.0",
"csstype": "^2.6.10",
"dotenv": "^8.2.0",
"firebase": "7.13.2",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-icons": "^3.9.0",
"react-redux": "7.1.1",
"react-router-dom": "^5.1.2",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"styletron-engine-atomic": "^1.4.6",
"styletron-react": "^5.2.7",
"ts-loader": "^6.2.2",
"turbolinks": "^5.2.0",
"twin.macro": "^1.0.0-alpha.9",
"typescript": "^3.8.3",
"unstated-next": "^1.1.0"
},
"version": "0.1.0",
"devDependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"babel-plugin-emotion": "^10.0.33",
"eslint-plugin-baseui": "^9.67.2",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react-hooks": "^3.0.0",
"prettier": "^2.0.3",
"source-map-loader": "^0.2.4",
"tslint": "^6.1.1",
"tslint-config-prettier": "^1.18.0",
"webpack-dev-server": "^3.10.3"
},
"eslintConfig": {
"extends": "react-app",
"plugins": [
"prettier",
"react-hooks",
"baseui"
],
"rules": {
"prettier/prettier": "error",
"react-hooks/exhaustive-deps": "warn",
"react-hooks/rules-of-hooks": "error",
"baseui/deprecated-theme-api": "warn",
"baseui/deprecated-component-api": "warn",
"baseui/no-deep-imports": "warn"
}
},
"prettier": {
"jsxSingleQuote": true,
"singleQuote": true,
"trailingComma": "es5"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I see there is a webpacker v5.0.1 and I am on v4.2.2, I will attempt to upgrade it to see if that fixes anything. The fact that I don't know what's causing the issue makes everything more challenging, I searched repos like babel macros, webpack, webpacker and didn't find much. On the console this is the error I get:
TypeError: twin_macro__WEBPACK_IMPORTED_MODULE_9___default.a.input is not a function`.
This is the component I attempted displaying:
const Inp = tw.input`border hover:border-black`;
It's worth mentioning that emotion styled components do work with the macro, e.g. styled.input
. 🤔
I suspect it's something with my typescript configuration, I extracted a .jsx
file and put the following content:
import React from 'react';
import tw from 'twin.macro';
const Input = tw.input`border hover:border-black`;
export default () => <Input />;
Then I imported that component in my .tsx
file and used it. Et voilà:
(black border on hover)
I've been trying random changes into my tsconfig.json
cause I am clueless:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"paths": {
"*": ["node_modules/*", "app/javascript/*"]
},
"sourceMap": true,
"target": "es5",
"jsx": "react",
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": false,
"allowSyntheticDefaultImports": true,
"baseUrl": "./app/javascript"
},
"exclude": ["**/*.spec.ts", "node_modules", "vendor", "public"],
"include": ["app/javascript/**/*"],
"compileOnSave": false
}
I did not touch my webpack configuration yet:
const PnpWebpackPlugin = require('pnp-webpack-plugin')
module.exports = {
test: /\.tsx?(\.erb)?$/,
use: [
{
loader: 'ts-loader',
options: PnpWebpackPlugin.tsLoaderOptions()
}
]
}
Thoughts?
I was able to get the macro working by switching from ts-loader to babel-loader:
I added yarn add --dev @babel/preset-typescript babel-loader
.
My loader configuration:
const PnpWebpackPlugin = require('pnp-webpack-plugin');
module.exports = {
test: /\.tsx?(\.erb)?$/,
use: [
{
loader: 'babel-loader',
options: PnpWebpackPlugin.tsLoaderOptions(),
},
],
};
Add the following to babel.config.js
, plugins section:
['@babel/preset-typescript', { allExtensions: true, isTSX: true }],
I still see no colors, styling, but I think I am very close to get it working.
With twin I got better error output:
✕ bg-purple was not found
I was able to create a button without colors but white:
const Button = tw.button`
text-xs
font-semibold
rounded-full
px-4 py-1
leading-normal
bg-white
border
hover:text-white
`;
great to hear you're making progress there. Just to confirm, colours like red 500 aren't working?
const Button = tw.button`
text-red-500
`;
Perhaps post the contents of your tailwind.config.js, if you have one?
I am using this package(tailwind.macro) on my typescript project, I got error any where i try to import as
got error with message
currently there is no package named
@types/tailwind.macro
on npm.is there is any type definition file for this package?