Try to use react-app-rewired

[tadatuta]

https://github.com/timarney/react-app-rewired

[awinogradov]

Looks nice! But we to do nothing here ;) We can explain this idea in readme only

[awinogradov]

@tadatuta So, I checked it ;) It works great!

Example of connection bem-reality to the last create-react-app:

❯ create-react-app react-loves-bem && cd react-loves-bem
❯ npm i -D react-app-rewired webpack-bem-loader babel-preset-es2015 babel-preset-react babel-plugin-transform-object-rest-spread
❯ touch .bemrc.js
❯ touch config-overrides.js

NB: follow instructions https://github.com/timarney/react-app-rewired#3-flip-the-existing-calls-to-react-scripts-in-npm-scripts

./.bemrc.js

module.exports = {
    levels: {
        'src/components': {
            scheme: 'nested'
        }
    }
}

./config-overrides.js

module.exports = function override(config, env) {
    // Add bem-loader in Babel scope
    const babelLoader = config.module.rules[1].oneOf[1];
    const combinedWithBem = {
        test: babelLoader.test,
        include: babelLoader.include,
        use: [
            {
                loader: require.resolve('webpack-bem-loader'),
                options: {
                    techs: ['js', 'css']
                }
            },
            {
                loader: babelLoader.loader,
                options: Object.assign({}, babelLoader.options, {
                    presets: [['es2015', { loose: true }], 'react'],
                    plugins: ['transform-object-rest-spread']
                })
            }
        ]
    };

    config.module.rules[1].oneOf[1] = combinedWithBem;

    return config;
}

So, now we can create ./src/components/App/App.js with the content below:

import React from 'react';
import Bem, { decl } from 'bem-react-core';

export default decl({
    block: 'App',
    content() {
        return 'Welcome to BEM Reality ;)';
    }
});

And replace import App from './App.js' with import App from 'b:App' in the src/index.js.

Magnific!

[awinogradov]

We tried https://github.com/bem/bem-react-boilerplate ;)