linkedin / linkedin/css-blocks
Unable to use after ejecting with create-react-app
- Dominant language
- TypeScript
- Stars
- 6.3k
- Forks
- 154
- PR merge metrics
- No merged PRs in 30d
Description
I hope I have followed everything correctly. I ejected from create-react-app and tried to configure css-blocks and I am struggling to get it working.
Here's the repo to reproduce the problem: https://github.com/bitttttten/css-blocks-and-create-react-app
Using node v8.10.0 and yarn 1.6.0.
The errors in console / on the page are:
```
ReferenceError: styles is not defined
__webpack_exports__.a.cls
src/components/Footer/index.js:1
> 1 | import React from 'react'
2 | import styles from './Footer.block.css'
3 | import objstr from "obj-str"
4 |
View compiled
__webpack_require__
/css-blocks-and-create-react-app/webpack/bootstrap 1e2d177e1b3a970db6c8:19
(anonymous function)
src/App.js:1
> 1 | import React, { Component } from 'react';
2 |
3 | import Footer from './components/Footer'
4 |
View compiled
__webpack_require__
/css-blocks-and-create-react-app/webpack/bootstrap 1e2d177e1b3a970db6c8:19
(anonymous function)
src/index.js:1
> 1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import registerServiceWorker from './registerServiceWorker';
View compiled
▶ 5 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.
```
Many thanks!
I have it working with other examples using Typescript, and I am loving what you guys are doing. I am really keen to start working with it without TS.
Contributor guide
Research direction
Start with the linked css-blocks-and-create-react-app reproduction, the ejected webpack setup, and the import in src/components/Footer/index.js for Footer.block.css. Reproduce the styles-is-not-defined error using the listed Node and Yarn versions, then verify that the CSS Blocks import works and the example app loads without the reported crash.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100