linkedin / css-blocks

High performance, maintainable stylesheets.
http://css-blocks.com/
BSD 2-Clause "Simplified" License
6.33k stars 152 forks source link

Unable to use after ejecting with create-react-app #173

Open bitttttten opened 6 years ago

bitttttten commented 6 years ago

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.

chriseppstein commented 6 years ago

Presently, the React files need to have the extension “jsx” or “tsx”. The next release will have a better error message about this.

bitttttten commented 6 years ago

Oh really! I did not realised that. That fixes it!

What also helps was not requiring a folder, but being more explicit in requiring the file. So changing

import Footer from './components/Footer';

into

import Footer from './components/Footer/index';

or

import Footer from './components/Footer/index.jsx;

I updated my repo and it is working 👍

JiiB commented 6 years ago

@bitttttten wow nice. I still can't get it work... can you provide a skeleton React app (created with create-react-app) using css-blocks? That would be awesome.

chriseppstein commented 6 years ago

I updated my repo and it is working

@bitttttten 🎉

What also helps was not requiring a folder, but being more explicit in requiring the file.

This is a bug, you can see the link above to the issue I just filed.

I still can't get it work...

@JiiB the website of this repo is an ejected create-react-app https://github.com/linkedin/css-blocks/blob/master/packages/%40css-blocks/website/config/webpack.config.dev.js

The issues I've seen bite people most so far is file names named js instead of jsx, using .babelrc instead of the explicit babel loader, and having the css blocks loader for jsx running after babel instead of before (so it needs to come after in the config... obviously)

bitttttten commented 6 years ago

Thanks again. Do you mind clarifying on where should I add babel presets? For example the following snippet, I could not get it configured inside the loader (see snippet below).

Would I need to take this into it's own dedicated loader?

loader: require.resolve('babel-loader'),
options: {
    plugins: [
        require('@css-blocks/jsx/dist/src/transformer/babel').makePlugin({
            rewriter: CssBlockRewriter,
        }),
    ],
    cacheDirectory: true,
    compact: true,
    parserOpts: {
        plugins: [
            'jsx',    
            'objectRestSpread',
        ],
        presets: [
            'react',
            ['env', {
                targets: {
                    browsers: ">=1%",
                },
                modules: false,
            }],
        ],
    },
},
include: paths.appSrc,
bitttttten commented 6 years ago

@JiiB my repo is a css-blocks skeleton app after ejecting from create-react-app. I couldn't get the website version working last week so I just dug around and asked questions and came up with that. It should work as it is.

If you are having problems with that repo of mine, make an issue there and we can go into more detail then.