Creating Typescript library with React, Styled components and Twin macro.

[NikaKharshiladze]

Hi I wonder if I can include twin macro in my custom library which I am building with Webpack, React, Typescript and Styled components.
I use ts-loader as a typescript compiler and it seems twin macro does not understand it, but I cant also use babel-loader because I need type declarations for my components which babel loader can not emit during build. Any help would be appreciated.

---

Webpack.config.js

const path = require("path");

module.exports = {
mode: "production",
entry: "./src/index.ts",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
libraryTarget: "umd",
clean: true,
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
alias: {
"@utils": [path.resolve(__dirname, "./src/utils")],
"@components": [path.resolve(__dirname, "./src/components")],
"@providers": [path.resolve(__dirname, "./src/providers")],
"@config": [path.resolve(__dirname, "./src/config")],
"@assets": [path.resolve(__dirname, "./src/assets")],
},
},
externals: {
react: "react",
},
module: {
rules: [
{
test: /.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /.(ts|tsx)?$/,
use: ["ts-loader"],
exclude: /node_modules/,
},
],
},
};

---

TS Config:

{
"compilerOptions": {
"target": "es6" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. /,
"module": "commonjs" / Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. /,
"jsx": "react" / Specify JSX code generation: 'preserve', 'react-native', or 'react'. /,
"strict": true / Enable all strict type-checking options. /,
"esModuleInterop": true / Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. /,
"lib": ["es2015", "dom"],
"outDir": "./dist/",
"sourceMap": true,
"declarationMap": true,
"declaration": true,
"baseUrl": "src",
"paths": {
"@components/": ["components/"],
"@utils/": ["utils/"],
"@providers/": ["providers/"],
"@config/": ["config/"],
"@assets/": ["assets/*"]
}
},
"include": ["src"],
"exclude": ["node_modules", "dist", "./src/stories"]
}

[ben-rogerson]

Run a babel-loader pass first including @babel/preset-typescript, then either use ts-loader afterwards to generate the types or even better, just run a custom tsc command to generate your types.

[NikaKharshiladze]

Thanks Ben. That solved my problem