linkedin / linkedin/css-blocks

react-app babel preset causes funky issue with objstr

Open
#176 2 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.3k
Forks
154
PR merge metrics
No merged PRs in 30d

Description

I'm mainly creating this issue so others can find it in the future, but maybe it could go in the docs somewhere because it took me far too long to identify..

I ejected from a new create-react-app and copied all the config to get css-blocks and typescript working and everything was fine until I got..

```
Module build failed: Error: ~/my-app/src/App.tsx: [css-blocks] AnalysisError: First argument passed to "objstr" call must be an object literal. (~/my-app/src/App.tsx:13:26)
```
Removing the react-app babel preset entry from package.json resolved the issue after learning way more than I needed to know about the css-blocks internals..
```
"babel": { "presets": ["react-app"] }
```
I confirmed the cause by adding the preset to the css-blocks website package.json and modifying App.tsx to..
```
class App extends Component {
render() {
const style = objstr({ [styles]: true });
return (


```

Contributor guide

Open the contributing guide

Research direction

Reproduce the reported failure using the Babel preset entry in package.json and the objstr call shown in src/App.tsx. Compare behavior with the react-app preset removed, then document the cause, affected setup, and workaround where the css-blocks website configuration is described.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, react, typescript
Domain
build-system, documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.