CODEWITHSUNDEEP
webpackcreate-react-app
Fabio Espinosa
Fabio Espinosa

Reputation: 1002

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

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 :)

Upvotes: 2

Views: 813

Answers (1)

Fabio Espinosa
Fabio Espinosa

Reputation: 1002

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']
    ],
}

Upvotes: 4

Related Questions