Open bitttttten opened 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.
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 👍
@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.
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)
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,
@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.
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:
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.