linkedin / linkedin/css-blocks
react-app babel preset causes funky issue with objstr
- 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
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