title: Styled components: babel-plugin-styled-components not working
body: <p>I've been trying to get the <code>babel-plugin-styled-components</code> plugin to work with my webpack/babelrc configuration but I have not been able to do so. I am using babel-loader and no matter what I try I can't get the plugin to be recognised.</p>
  <p>I am using Typescript 4 and Webpack 4.</p>
  <p>I've searched and tried a number of proposed solutions but none have worked. I even tried the <code>typescript-styled-components-plugin</code> solution (<a href="https://github.com/Igorbek/typescript-plugin-styled-components" rel="noreferrer">https://github.com/Igorbek/typescript-plugin-styled-components</a>), but no matter what it seems that the plugin is not recognised and the settings do not work.</p>
  <p>I can only imagine that it's an issue with my configuration. Webpack is still a bit of a mystery to me in general.</p>
  <p>My <code>webpack.common.js</code> file looks like this:</p>
  <pre><code>module.exports = [
    {
      context,
      cache: local,
      devtool: 'inline-source-map',
      mode: 'development',
      resolve: {
        symlinks: false,
        alias: {
          'app.veams$': `${context}/app.veams.tsx`,
          env: envFile
        },
        extensions: ['.ts', '.tsx', '.js']
      },
      // Entry point for webpack
      entry: {
        app: `${context}/app.tsx`
      },
      // Output directory and filename
      output: {
        filename: 'scripts/[name].bundle.js',
        chunkFilename: 'scripts/[name].chunk.js',
        path: outputPath,
        pathinfo: !local // Performance #2: Garbage Collection
      },
      // Tell webpack to run babel on every file it runs through
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  babelrc: true,
                  // This is a feature of `babel-loader` for webpack (not Babel itself).
                  // It enables caching results in ./node_modules/.cache/babel-loader/
                  // directory for faster rebuilds.
                  cacheDirectory: true,
                  // Let's add babel presets ...
                  presets: [
                    '@babel/preset-react',
                    [
                      '@babel/preset-env',
                      {
                        targets: {
                          browsers: ['last 2 versions', 'ie &gt;= 11']
                        }
                      }
                    ]
                  ],
                  // ... and plugins.
                  plugins: [
                    '@babel/plugin-proposal-function-bind',
                    // Stage 2
                    [
                      '@babel/plugin-proposal-decorators',
                      {
                        legacy: true
                      }
                    ],
                    [
                      '@babel/plugin-proposal-class-properties',
                      {
                        loose: false
                      }
                    ]
                  ]
                }
              }
            ]
          },
          scriptRule(configContext),
          styleRule(),
          assetsRule()
        ]
      },
      plugins: [].concat(scriptPlugins(configContext), stylePlugins(configContext)),
      // Some libraries import Node modules but don't use them in the browser.
      // Tell Webpack to provide empty mocks for them so importing them works.
      node: {
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
      },
      // Turn off performance hints during development because we don't do any
      // splitting or minification in interest of speed. These warnings become
      // cumbersome.
      performance: {
        hints: false
      },
      optimization: {
        minimizer: optimizerPlugins(),
        removeAvailableModules: false, // Performance #1: Do not optimize so much in incremental builds
        removeEmptyChunks: false, // Performance #1: Do not optimize so much in incremental builds
        splitChunks: {
          cacheGroups: {
            vendor: {
              test: /node_modules/,
              chunks: 'initial',
              name: 'vendor',
              priority: 10,
              enforce: true
            }
          } // Performance #1: Do not optimize so much in incremental builds
        }
      },
      devServer: {
        contentBase: outputPath,
        compress: false,
        port: 3000,
        proxy: {
          '/': 'http://localhost:2999'
        },
        overlay: {
          warnings: true,
          errors: true
        }
      }
    }
  ];
  </code></pre>
  <p>The <code>scriptRule</code> file looks like this:</p>
  <pre><code>module.exports = function() {
    return {
      test: /\.tsx?$/,
      use: [
        {
          loader: 'cache-loader'
        },
        {
          loader: 'babel-loader',
          options: {
            babelrc: true,
            // This is a feature of `babel-loader` for webpack (not Babel itself).
            // It enables caching results in ./node_modules/.cache/babel-loader/
            // directory for faster rebuilds.
            cacheDirectory: true,
            // Let's add babel presets ...
            presets: [
              '@babel/preset-react',
              [
                '@babel/preset-env',
                {
                  targets: {
                    browsers: ['last 2 versions', 'ie &gt;= 11']
                  }
                }
              ]
            ],
            // ... and plugins.
            plugins: [
              '@babel/plugin-proposal-function-bind',
              // Stage 2
             [
                'babel-plugin-styled-components',
                {
                  displayName: true
                }
              ],
              [
                '@babel/plugin-proposal-decorators',
                {
                  legacy: true
                }
              ],
              [
                '@babel/plugin-proposal-class-properties',
                {
                  loose: false
                }
              ]
            ]
          }
        },
        {
          loader: 'thread-loader',
          options: {
            // there should be 1 cpu for the fork-ts-checker-webpack-plugin
            workers: require('os').cpus().length - 1
          }
        },
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true, // Performance #3 :: Limit amount of modules to transpile at a time per iteration
            experimentalWatchApi: true,
            happyPackMode: true // IMPORTANT! use happyPackMode mode to speed-up compilation and reduce errors
            // reported to webpack
          }
        }
      ]
    };
  };
  
  </code></pre>
  <p><code>.babelrc</code> looks like this:</p>
  <pre><code>{
    &quot;env&quot;: {
      &quot;client&quot;: {
        &quot;presets&quot;: [
          [
            &quot;@babel/preset-env&quot;,
            {
              &quot;targets&quot;: {
                &quot;browsers&quot;: [&quot;last 2 versions&quot;, &quot;ie &gt;= 11&quot;]
              }
            }
          ],
          &quot;@babel-preset-react&quot;
        ],
        &quot;plugins&quot;: [
          &quot;@babel/plugin-proposal-function-bind&quot;,
  [
            &quot;babel-plugin-styled-components&quot;,
            {
              &quot;displayName&quot;: true
            }
          ],
          [
            &quot;@babel/plugin-proposal-decorators&quot;,
            {
              &quot;legacy&quot;: true
            }
          ],
          [
            &quot;@babel/plugin-proposal-class-properties&quot;,
            {
              &quot;loose&quot;: false
            }
          ]
        ]
      },
      &quot;server&quot;: {
        &quot;presets&quot;: [&quot;@babel/preset-env&quot;],
        &quot;plugins&quot;: [
          &quot;@babel/plugin-proposal-function-bind&quot;,
          &quot;@babel/plugin-proposal-export-default-from&quot;,
          &quot;@babel/plugin-proposal-logical-assignment-operators&quot;,
          [
            &quot;@babel/plugin-proposal-optional-chaining&quot;,
            {
              &quot;loose&quot;: false
            }
          ],
          [
            &quot;@babel/plugin-proposal-pipeline-operator&quot;,
            {
              &quot;proposal&quot;: &quot;minimal&quot;
            }
          ],
          [
            &quot;@babel/plugin-proposal-nullish-coalescing-operator&quot;,
            {
              &quot;loose&quot;: false
            }
          ],
          &quot;@babel/plugin-proposal-do-expressions&quot;,
          [
            &quot;@babel/plugin-proposal-decorators&quot;,
            {
              &quot;legacy&quot;: true
            }
          ],
          &quot;@babel/plugin-proposal-function-sent&quot;,
          &quot;@babel/plugin-proposal-export-namespace-from&quot;,
          &quot;@babel/plugin-proposal-numeric-separator&quot;,
          &quot;@babel/plugin-proposal-throw-expressions&quot;,
          &quot;@babel/plugin-syntax-dynamic-import&quot;,
          &quot;@babel/plugin-syntax-import-meta&quot;,
          [
            &quot;@babel/plugin-proposal-class-properties&quot;,
            {
              &quot;loose&quot;: false
            }
          ],
          &quot;@babel/plugin-proposal-json-strings&quot;,
          &quot;@babel/plugin-transform-runtime&quot;
        ]
      }
    }
  }
  
  </code></pre>
  <p>And finally the <code>package.json</code> looks like this:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@veams/core&quot;: &quot;^1.0.0&quot;,
      &quot;@veams/helpers&quot;: &quot;^1.2.8&quot;,
      &quot;@veams/http-service&quot;: &quot;^1.0.2&quot;,
      &quot;c3&quot;: &quot;0.7.20&quot;,
      &quot;carbon-components&quot;: &quot;^9.66.3&quot;,
      &quot;carbon-components-react&quot;: &quot;^6.74.1&quot;,
      &quot;carbon-icons&quot;: &quot;^7.0.7&quot;,
      &quot;connected-react-router&quot;: &quot;6.8.0&quot;,
      &quot;cors&quot;: &quot;2.8.5&quot;,
      &quot;downshift&quot;: &quot;3.1.5&quot;,
      &quot;express-http-proxy&quot;: &quot;1.6.2&quot;,
      &quot;file-saver&quot;: &quot;2.0.2&quot;,
      &quot;history&quot;: &quot;4.7.2&quot;,
      &quot;html-to-react&quot;: &quot;1.4.5&quot;,
      &quot;immutable&quot;: &quot;4.0.0-rc.12&quot;,
      &quot;json5&quot;: &quot;2.1.3&quot;,
      &quot;query-string&quot;: &quot;6.13.7&quot;,
      &quot;react&quot;: &quot;17.0.1&quot;,
      &quot;react-c3js&quot;: &quot;0.1.20&quot;,
      &quot;react-d3-cloud&quot;: &quot;0.7.0&quot;,
      &quot;react-dom&quot;: &quot;17.0.1&quot;,
      &quot;react-excel-workbook&quot;: &quot;0.0.4&quot;,
      &quot;react-redux&quot;: &quot;7.2.2&quot;,
      &quot;react-router-config&quot;: &quot;4.4.0-beta.6&quot;,
      &quot;react-router-dom&quot;: &quot;5.2.0&quot;,
      &quot;redux&quot;: &quot;4.0.5&quot;,
      &quot;redux-devtools-extension&quot;: &quot;2.13.8&quot;,
      &quot;redux-immutable&quot;: &quot;4.0.0&quot;,
      &quot;redux-immutable-state-invariant&quot;: &quot;2.1.0&quot;,
      &quot;redux-observable&quot;: &quot;1.2.0&quot;,
      &quot;reselect&quot;: &quot;4.0.0&quot;,
      &quot;rxjs&quot;: &quot;6.6.3&quot;,
      &quot;styled-components&quot;: &quot;5.2.1&quot;,
      &quot;tslib&quot;: &quot;2.0.3&quot;,
      &quot;xlsx&quot;: &quot;0.16.8&quot;
    },
    &quot;devDependencies&quot;: {
      &quot;@babel/core&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-class-properties&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-decorators&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-do-expressions&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-export-default-from&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-export-namespace-from&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-function-bind&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-function-sent&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-json-strings&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-logical-assignment-operators&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-nullish-coalescing-operator&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-numeric-separator&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-optional-chaining&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-pipeline-operator&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-proposal-throw-expressions&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-syntax-dynamic-import&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-syntax-import-meta&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/plugin-transform-runtime&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/preset-env&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/preset-react&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/register&quot;: &quot;^7.0.0&quot;,
      &quot;@babel/runtime&quot;: &quot;^7.0.0&quot;,
      &quot;@types/history&quot;: &quot;^4.6.2&quot;,
      &quot;@types/jest&quot;: &quot;^23.3.12&quot;,
      &quot;@types/node&quot;: &quot;^10.12.18&quot;,
      &quot;@types/react&quot;: &quot;16.9.56&quot;,
      &quot;@types/react-dom&quot;: &quot;16.9.9&quot;,
      &quot;@types/react-redux&quot;: &quot;7.1.11&quot;,
      &quot;@types/react-router&quot;: &quot;4.4.3&quot;,
      &quot;@types/react-router-config&quot;: &quot;1.0.7&quot;,
      &quot;@types/react-router-dom&quot;: &quot;5.1.6&quot;,
      &quot;@types/redux-immutable-state-invariant&quot;: &quot;2.1.1&quot;,
      &quot;babel-core&quot;: &quot;^7.0.0-bridge.0&quot;,
      &quot;babel-eslint&quot;: &quot;^10.0.1&quot;,
      &quot;babel-jest&quot;: &quot;^23.4.2&quot;,
      &quot;babel-loader&quot;: &quot;^8.0.5&quot;,
      &quot;babel-plugin-styled-components&quot;: &quot;1.11.1&quot;,
      &quot;babel-plugin-transform-class-properties&quot;: &quot;^6.24.1&quot;,
      &quot;babel-plugin-transform-decorators-legacy&quot;: &quot;^1.3.4&quot;,
      &quot;babel-plugin-transform-runtime&quot;: &quot;^6.23.0&quot;,
      &quot;babel-preset-env&quot;: &quot;^1.6.0&quot;,
      &quot;babel-preset-react&quot;: &quot;^6.24.1&quot;,
      &quot;babel-preset-stage-0&quot;: &quot;^6.16.0&quot;,
      &quot;babel-preset-stage-1&quot;: &quot;^6.24.1&quot;,
      &quot;babel-register&quot;: &quot;^6.26.0&quot;,
      &quot;babel-runtime&quot;: &quot;^6.26.0&quot;,
      &quot;body-parser&quot;: &quot;^1.18.1&quot;,
      &quot;browser-sync&quot;: &quot;^2.24.4&quot;,
      &quot;cache-loader&quot;: &quot;^2.0.1&quot;,
      &quot;case-sensitive-paths-webpack-plugin&quot;: &quot;^2.1.1&quot;,
      &quot;chalk&quot;: &quot;^2.0.1&quot;,
      &quot;command-line-args&quot;: &quot;^4.0.7&quot;,
      &quot;command-line-usage&quot;: &quot;^4.0.2&quot;,
      &quot;compression-webpack-plugin&quot;: &quot;^2.0.0&quot;,
      &quot;connect-browser-sync&quot;: &quot;^2.1.0&quot;,
      &quot;copy-webpack-plugin&quot;: &quot;^4.3.1&quot;,
      &quot;cross-env&quot;: &quot;^5.0.5&quot;,
      &quot;css-loader&quot;: &quot;^2.1.0&quot;,
      &quot;deep-extend&quot;: &quot;^0.6.0&quot;,
      &quot;eslint&quot;: &quot;^5.12.0&quot;,
      &quot;eslint-config-prettier&quot;: &quot;^3.4.0&quot;,
      &quot;eslint-plugin-prettier&quot;: &quot;^3.0.1&quot;,
      &quot;express&quot;: &quot;^4.16.3&quot;,
      &quot;fork-ts-checker-webpack-plugin&quot;: &quot;^0.5.2&quot;,
      &quot;globby&quot;: &quot;^9.0.0&quot;,
      &quot;husky&quot;: &quot;^1.0.0-rc.8&quot;,
      &quot;include-media&quot;: &quot;^1.4.8&quot;,
      &quot;jshint-stylish&quot;: &quot;^2.0.0&quot;,
      &quot;lint-staged&quot;: &quot;^8.1.5&quot;,
      &quot;lodash&quot;: &quot;^4.17.4&quot;,
      &quot;mini-css-extract-plugin&quot;: &quot;^0.5.0&quot;,
      &quot;node-sass&quot;: &quot;^4.7.2&quot;,
      &quot;node-sass-magic-importer&quot;: &quot;^5.0.3&quot;,
      &quot;nodemon&quot;: &quot;^1.14.0&quot;,
      &quot;npm-run-all&quot;: &quot;^4.1.1&quot;,
      &quot;optimize-css-assets-webpack-plugin&quot;: &quot;^5.0.1&quot;,
      &quot;postcss&quot;: &quot;^7.0.11&quot;,
      &quot;postcss-cssnext&quot;: &quot;^3.1.0&quot;,
      &quot;postcss-loader&quot;: &quot;^3.0.0&quot;,
      &quot;prettier&quot;: &quot;^1.13.4&quot;,
      &quot;react-dev-utils&quot;: &quot;^7.0.1&quot;,
      &quot;request&quot;: &quot;^2.81.0&quot;,
      &quot;rimraf&quot;: &quot;^2.6.2&quot;,
      &quot;sass-loader&quot;: &quot;^7.0.2&quot;,
      &quot;style-loader&quot;: &quot;^0.23.1&quot;,
      &quot;stylelint&quot;: &quot;^9.2.0&quot;,
      &quot;stylelint-config-prettier&quot;: &quot;^5.0.0&quot;,
      &quot;stylelint-prettier&quot;: &quot;^1.0.6&quot;,
      &quot;thread-loader&quot;: &quot;^2.1.1&quot;,
      &quot;ts-jest&quot;: &quot;^23.10.5&quot;,
      &quot;ts-loader&quot;: &quot;^5.3.3&quot;,
      &quot;tslint&quot;: &quot;^5.12.0&quot;,
      &quot;tslint-config-airbnb&quot;: &quot;^5.9.2&quot;,
      &quot;tslint-config-prettier&quot;: &quot;^1.13.0&quot;,
      &quot;tslint-plugin-prettier&quot;: &quot;^2.0.1&quot;,
      &quot;tslint-react&quot;: &quot;^3.6.0&quot;,
      &quot;typescript&quot;: &quot;4.0.5&quot;,
      &quot;uglifyjs-webpack-plugin&quot;: &quot;^2.1.1&quot;,
      &quot;webpack&quot;: &quot;^4.10.2&quot;,
      &quot;webpack-cli&quot;: &quot;^3.0.1&quot;,
      &quot;webpack-dev-server&quot;: &quot;^3.1.14&quot;,
      &quot;winston&quot;: &quot;^2.3.1&quot;
    },
  </code></pre>
  <p>I didn't originally write this webpack config and have tried moving the order of the plugin etc. to no avail.</p>
  <p>I hope someone can help...</p>
  <p>Cheers!</p>