Add styled-jsx to ejected create-react-app config

Question

I know adding styled-jsx to a normal create-react-app is currently not possible. So I ejected it and now i'm trying to modify webpack.config.dev.js to include it, but been clueless as to where to put the plugin.

Thanks :)

Answer 1

It turns out all I had to modify was to add the plugins array into the part in webpack.config.dev.js (and webpack.config.prod.js) where the JS is processed with babel:

// Process JS with Babel.
                {
                    test: /\.(js|jsx|mjs)$/,
                    include: paths.appSrc,
                    loader: require.resolve('babel-loader'),
                    options: {
                        // Add styled-jsx loader
                        plugins: ['styled-jsx/babel'],
                        // This is a feature of `babel-loader` for webpack (not Babel itself).
                        // It enables caching results in ./node_modules/.cache/babel-loader/
                        // directory for faster rebuilds.
                        cacheDirectory: true
                    }
                },

!! Edited on 01/02/2019 !!

Actually on react-scripts version 2.1.2, we have just one file to "dev | prod" named: _project\node_modules\react-scripts\config\webpack.config.js.

This file has follow comment, and begin an object with options prop.

Inside this prop, we have an array called plugins, so we need to add our plugin here, see bellow:

// Process application JS with Babel.
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{


    // code code code
    // code code code

    plugins: [
        [
            require.resolve('babel-plugin-named-asset-import'),
            {
                loaderMap: {
                svg: {
                    ReactComponent:
                    '@svgr/webpack?-prettier,-svgo![path]',
                },
                },
            },
        ],
        ['styled-jsx/babel']
    ],
}