styled components babel plugin problem fixed

Author: Can-Sahin

internals/webpack/webpack.dev.babel.js

@@ -7,6 +7,14 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
+// 1. import default from the plugin module
+const createStyledComponentsTransformer = require('typescript-plugin-styled-components')
+  .default;
+
+// 2. create a transformer;
+// the factory additionally accepts an options object which described below
+const styledComponentsTransformer = createStyledComponentsTransformer();
+
 module.exports = require('./webpack.base.babel')({
   mode: 'development',
 
@@ -50,6 +58,9 @@ module.exports = require('./webpack.base.babel')({
       options: {
         transpileOnly: true, // fork-ts-checker-webpack-plugin is used for type checking
         logLevel: 'info',
+        getCustomTransformers: () => ({
+          before: [styledComponentsTransformer],
+        }),
       },
     },
   ],

package-lock.json

@@ -199,6 +199,7 @@
     "tslint-react": "4.0.0",
     "tslint-react-hooks": "^2.2.1",
     "typescript": "3.5.1",
+    "typescript-plugin-styled-components": "^1.4.3",
     "url-loader": "2.0.1",
     "webpack": "4.35.3",
     "webpack-cli": "3.3.5",