profile
viewpoint

Ask questionstranspile typescript to babel-plugin-emotion doesn't work

I try to get this running properly. How could I set this up correctly?

You can find the sample code here.

  • emotion version: 8.0.12
  • react version: 16.2.0
      "babel-core": "6.26.0",
      "babel-loader": "7.1.2",
      "babel-plugin-emotion": "8.0.12",
      "babel-preset-env": "1.6.1",      
      "babel-preset-react" : "6.24.1",      
       "awesome-typescript-loader": "3.4.1",           
      "typescript": "2.6.2",
      "webpack": "3.10.0",   

Relevant code.

const Child = styled('div')`
	color: red;
`

const Parent = styled('div')`
	${Child} {
	   color: green;
	}
`
class HelloWorld extends React.Component<{}, {}> {

  render(){
   return(
    <div>
      <Parent>
        <Child>green</Child>
      </Parent>
      <Child>red</Child>
    </div>
  )}
}

What you did:

Running webpack with the following settings:

var webpack = require("webpack");
const path = require("path");

module.exports = () => {
    return [{
        entry: [        
            "./src/index.tsx"
        ],
        output: {
            path: path.join(__dirname, 'build'),                        
            filename: "bundle.js"        
        },

        resolve: {           
            extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],        
        },        

        module: {
            loaders: [                               
                {
                    test: /\.tsx?$/,
                    loaders : ['babel-loader', 'awesome-typescript-loader'],
                    exclude: path.resolve(__dirname, 'node_modules')                
                }            
            ]
        }  
    }];
};

.bablerc

{
    "presets": ["env"],
    "env": {
        "development": {
            "plugins": [["emotion", { "autoLabel" : true }]]
        }
    }    
}

Open up index.html.

What happened:

bundle.js:2185 Uncaught Error: Component selectors can only be used in conjunction with babel-plugin-emotion.
    at Styled.handleInterpolation (bundle.js:2185)
    at Styled.<anonymous> (bundle.js:2274)
    at Array.forEach (<anonymous>)
    at Styled.createStyles (bundle.js:2273)
    at Styled.css (bundle.js:2302)
    at Styled.render (bundle.js:19935)
    at finishClassComponent (bundle.js:12093)
    at updateClassComponent (bundle.js:12070)
    at beginWork (bundle.js:12445)
    at performUnitOfWork (bundle.js:14444)

Reproduction:

https://github.com/Wezea/ts-with-babel-plugin-emotion

Problem description:

Typescript gets transpiled to es6 which is transpiled to es5 by using babel. But babel-plugin-emotion seems not to be triggered at all.

emotion-js/emotion

Answer questions Andarist

This is something which we plan to fix with https://github.com/emotion-js/emotion/pull/1220

useful!

Related questions

Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 2
Component selectors not working with `@emotion/babel-preset-css-prop` hot 2
How to use babel-emotion-plugin with Storybook + Typescript? hot 1
Snapshot tests showing components as '<ForwardRef />' instead of component name hot 1
Using emotion 9 and 10 in the same window hot 1
Emotion 10 - "React is not defined" hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Problems surrounding SSR injection of <style> and unreliability of :first-child selectors hot 1
Typescript definitions for @emotion/native hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
Component selectors can only be used in conjunction with babel-plugin-emotion hot 1
&:focus not working hot 1
regexp not work in IE hot 1
Cannot turn off "potentially unsafe when doing server-side rendering" noise hot 1
How to get auto-prefixing with vanilla Emotion? hot 1
Github User Rank List