Open rtsvetkovv opened 3 years ago
In what way does it break? It should "just work" with SC if everything is configured correctly
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? 😄
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:
astroturf works correctly, but breaks styled-components
when I swap them
styled-components works, but astroturf breaks
do you have any ideas how to solve this problem? thank you in advance!