Styled-Components does not compile with CRA

lucasmonstrox commented 4 years ago

Styled-Component

Im working in a various frontends(I adopt a microfrontend architecture like auth, users, store, etc) and I use bit to reuse components and also, Im using CRA.

Im using styled components and each component like button/card have in package.json the styled-components package as dependency, example:

{
  "name": "@bit/brainnit.components.card",
  "version": "0.0.1-0",
  "main": "index.ts",
  "dependencies": {
    "styled-components": "^4.4.1"
  },
  "devDependencies": {
    "@types/styled-components": "^4.4.0",
    "react": ">= 16.3.0",
    "react-dom": ">= 16.3.0"
  },
  "peerDependencies": {},
  "license": "SEE LICENSE IN LICENSE",
  "bit": {
    "env": {
      "compiler": "bit.envs/compilers/react-typescript@3.0.27"
    }
  }
}

When I import the component to edit something before push a new tag, I cannot compile. The console produces the error below:

./src/components/card/dist/node_modules/styled-components/dist/styled-components.browser.esm.js
  Line 143:64:   'SC_DISABLE_SPEEDY' is not defined                                     no-undef
  Line 1374:5:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1382:7:   Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1536:3:   Definition for rule 'flowtype-errors/show-errors' was not found        flowtype-errors/show-errors
  Line 1820:27:  'stream' is not defined                                                no-undef

Search for the keywords to learn more about each error.

Steps to Reproduce

bit import component-name
yarn start

Expected Behavior

I just want to know why my code doest not run.

If I run without imports(only yarn isntall) everything works like a charm

Specifications

Bit version: 14.7.1
Node version:
npm / yarn version: 1.19.2
Platform: Windows 10 PRO
Bit compiler (include version): bit.envs/compilers/react-typescript@3.1.26
Bit tester (include version): none

Additional context

I already tried to set the SC_DISABLE_SPEEDY or REACT_APP_SC_DISABLE_SPEEDY to true but no success.

GiladShoham commented 4 years ago

moving to the dedicated envs repo

GiladShoham commented 4 years ago

@luqezman do you use typescript / flow with your react component? from the error, it looks like you use flow, but you use ts compiler. is that correct?

lucasmonstrox commented 4 years ago

@GiladShoham Im using typescript 3.7.2 with CRA.

GiladShoham commented 4 years ago

@luqezman Thanks for the update. let's wait for @qballer inputs. he developed the react-ts compiler.

lucasmonstrox commented 4 years ago

Hi @GiladShoham thanks for quickly response.

Well to be honest I think this is a bug related with SC instead of BIT, I dont know. Probably 2 packages with conflicts, what you think?

GiladShoham commented 4 years ago

@luqezman It won't surprise me. It doesn't look like a bit error. But it might be solved by passing configuration to the react-ts compiler.

lucasmonstrox commented 4 years ago

@GiladShoham Do I need to have a react-ts compiler per bit component right? For that component Im using bit.envs/compilers/react-typescript@3.1.26.

Since my component is using StyledComponents as dependency and my app is also using StyledComponents, looks like I have double installation of StyledComponents.

lucasmonstrox commented 4 years ago

@GiladShoham should I need to have dist|node_modules folder of component installed inside src/components/{name}?

GiladShoham commented 4 years ago

That might be a result of bug solved in v3.1.28, see more here - https://github.com/teambit/envs/issues/56 on a windows machine, it put the node_modules inside the dist folder of the component. please try again with v3.1.28 and let me know if it still happens. Thanks.

lucasmonstrox commented 4 years ago

@GiladShoham I will try it today.

I change back to 3.0.35 version because is the last compatible with bit tag + bit import.

In 3.1.28 I cannot use bit tag anymore :(. Probably a windows issue.

GiladShoham commented 4 years ago

@qballer can you take a look please?

lucasmonstrox commented 4 years ago

News?

GiladShoham commented 4 years ago

Maybe @Tallyb can help?

Tallyb commented 4 years ago

To start, styled components needs to be a singleton. Can you make sure styledComponents are defined as peerDependencies in your components? Explanation is here: https://docs.bit.dev/docs/react-guidelines#add-react-libraries-as-peer-dependencies-with-relaxed-versions

lucasmonstrox commented 4 years ago

Thank guys <3

teambit / envs