Framer Handshake Craco Config.js

const ReactRefreshPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    webpack: {
        plugins: {
            remove: ['ReactRefreshPlugin'],
            add: [
                new ReactRefreshPlugin({
                    exclude: [/^http.*/, /node_modules/],
                    overlay: false
                })
            ]
        },
        configure: (webpackConfig, {
            env,
            paths
        }) => {
            const shouldUseReactRefresh = process.env.FAST_REFRESH !== 'false';
            // Source maps are resource heavy and can cause out of memory issue for large source files.
            const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
            const isDev = env === "development";

            const cssLoaders = []

            if(isDev) {
                cssLoaders.push(
                    {
                        test: /\.(css|scss)$/,
                        use: ["style-loader", "css-loader", "sass-loader"],
                    }
                )
            } else {
                cssLoaders.push(
                    {
                        test: /\.css$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    url: false,
                                    sourceMap: shouldUseSourceMap
                                }
                            }
                        ]
                    },
                    {
                        test: /\.scss$/,
                        use: [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            {
                                loader: 'css-loader',
                                options: {
                                    url: false,
                                    sourceMap: shouldUseSourceMap
                                }
                            },
                            {
                                loader: 'sass-loader',
                                options: {
                                    sourceMap: shouldUseSourceMap
                                }
                            }
                        ]
                    }
                )
            }

            webpackConfig = {
                ...webpackConfig,
                module: {
                    rules: [
                        {
                            test: /\.(woff2?|jpe?g|png|gif|ico)$/,
                            use: 'file-loader?name=' + webpackConfig.output.assetModuleFilename
                        },
                        {
                            test: /\.svg$/,
                            use: [{
                                    loader: require.resolve('@svgr/webpack'),
                                    options: {
                                        prettier: false,
                                        svgo: false,
                                        svgoConfig: {
                                            plugins: [{
                                                removeViewBox: false
                                            }],
                                        },
                                        titleProp: true,
                                        ref: true,
                                    },
                                },
                                {
                                    loader: require.resolve('file-loader'),
                                    options: {
                                        name: 'static/media/[name].[hash].[ext]',
                                    },
                                },
                            ],
                            issuer: {
                                and: [/\.(js|jsx|ts|tsx|md|mdx)$/],
                            },
                        },
                        {
                            test: /\.(js|jsx)$/,
                            exclude: [/^http.*/, /node_modules/],
                            loader: require.resolve("babel-loader"),
                            options: {
                                customize: require.resolve(
                                    'babel-preset-react-app/webpack-overrides'
                                ),
                                plugins: [
                                    isDev && shouldUseReactRefresh && require.resolve('react-refresh/babel'),
                                ].filter(Boolean),
                                presets: [
                                    [
                                        require.resolve('babel-preset-react-app'),
                                        {
                                            runtime: process.env.DISABLE_NEW_JSX_TRANSFORM !== "true" ? 'automatic' : 'classic',
                                        },
                                    ]
                                ],
                            }
                        },
                        ...cssLoaders
                    ]
                },
                experiments: {
                    buildHttp: {
                        allowedUris: [
                            "https://framer.com/m/",
                            "https://framerusercontent.com/",
                            "https://fonts.gstatic.com/",
                            "https://ga.jspm.io/",
                            "https://jspm.dev/",
                            "https://cdn.skypack.dev/",
                        ]
                    }
                },
            }


            return webpackConfig;
        }
    }
}

Craco Config setup

1. Create craco.config.js in your root folder
2. Copy paste the code above into craco.config.js file
3. Follow the instructions below for further installation and setup...

Requirements

Install these npm packages in your react app using npm:

Using npm install

npm install framer framer-motion @craco/craco node-sass

Or yarn install:

yarn add framer framer-motion @craco/craco node-sass

Once installed, change scripts value in package.json into craco as example below:

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
}

Then run the scripts:
npm start or yarn start

Errors

If you encounter this type of error:

Module not found: Error: Can't resolve 'process' in '/Users/aminshazrin/Documents/codes/test-craco/node_modules/framer/build/components/Page'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "process": require.resolve("process/browser") }'
	- install 'process'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "process": false }
ERROR in ./node_modules/framer/build/components/Page/EmulatedPage.js 1:0-30
Module not found: Error: Can't resolve 'process' in '/Users/aminshazrin/Documents/codes/test-craco/node_modules/framer/build/components/Page'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

This is because that the current version of react is using Webpack version 5. Follow the fix below by installing 1 npm package module that brings back webpack 5 compatibility

Install this npm package to fix the above error in your app:

Using npm Install:

npm install node-polyfill-webpack-plugin

Or yarn install:

yarn add node-polyfill-webpack-plugin