Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to use astroturf in project with styled-components #672

Open
rtsvetkovv opened this issue Jan 20, 2021 · 2 comments
Open

how to use astroturf in project with styled-components #672

rtsvetkovv opened this issue Jan 20, 2021 · 2 comments

Comments

@rtsvetkovv
Copy link

hi guys!
I have some misunderstanding
how to use together babel-loader & astroturf/loader
when moving from styled-components to astroturf.

In my case, when I configure webpack like this:

{
    test: /.(js|jsx)$/,
    exclude: /node_modules/,
    use: ['babel-loader', 'astroturf/loader'],
    resolve: {
    extensions: ['.js', '.jsx'],
  },
}

astroturf works correctly, but breaks styled-components

when I swap them

use: ['astroturf/loader', 'babel-loader'],

styled-components works, but astroturf breaks

do you have any ideas how to solve this problem?
thank you in advance!

@jquense
Copy link
Contributor

jquense commented Jan 21, 2021

In what way does it break? It should "just work" with SC if everything is configured correctly

@rtsvetkovv
Copy link
Author

thank you for your answer
yes, I also thought it was strange that two similar technologies didn't work together
here is my config

.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["astroturf/plugin"]
}

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

const config = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  devServer: {
    port: 3003,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: ["babel-loader", "astroturf/loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ["style-loader", "astroturf/css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    extensions: [".js", ".jsx"],
  },
};

module.exports = config;

App.js

import React from "react";
import styled from "astroturf";

const StyledH1 = styled.h1`
  color: red;
`;

const App = () => <StyledH1>Hello world!</StyledH1>;

export default App;

in that case (import styled from "astroturf";) its works
but if astroturf change to styled-components

Uncaught Error: Objects are not valid as a React child (found: object with keys {$$typeof, render, attrs, componentStyle, shouldForwardProp, foldedComponentIds, styledComponentId, target, withComponent, warnTooManyClasses, toString}). If you meant to render a collection of children, use an array instead.

do I need to configure postcss for astroturf to work correctly? or what am I doing wrong? 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants