Setup for React styled components - reactjs

Question

I can't get styled components working; must be something in my setup. Here's the component:
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
justify-content: center;
margin-top: 100px;
`;
const TestComponent = () => (
<Wrapper>
TEST
</Wrapper>
);
export default TestComponent;
When rendered it's just a <div> with a funky class but no styles.
My package.json:
{
"name": "Lolland",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --mode development",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"#babel/runtime": "^7.0.0",
"axios": "^0.18.0",
"babel-plugin-styled-components": "^1.6.0",
"babel-runtime": "^6.26.0",
"history": "^4.7.2",
"mobx": "^5.1.0",
"mobx-react": "^5.2.5",
"mobx-react-router": "^4.0.4",
"mobx-rest": "^2.2.5",
"mobx-rest-axios-adapter": "^2.1.1",
"prop-types": "^15.6.2",
"query-string": "^6.1.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-router": "^4.3.1",
"react-spinners": "^0.4.5",
"recompose": "^0.30.0",
"styled-components": "^3.4.5"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0",
"babel-plugin-styled-components": "^1.6.0",
"eslint": "^5.4.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-react": "^7.11.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.7"
}
}
My .babelrc:
{
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": ["#babel/plugin-transform-runtime", "emotion", "babel-plugin-styled-components"]
}
And my webpack.config.js:
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
},
],
},
],
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
}),
],
};

Answer 1

We figured out the answer in the comments together, but for those stumbling over it in the future:
The order of plugins is important. Placing styled-components BEFORE emotion resolves the conflict, since emotion plugin parses the import declarations and does its magic based on that. See the code here. styled-components plugin on the other hand parses the package name, but still uses import declaration, hence the conflict.