React-app-rewired Cannot Read Property 'compilation' of Undefined

ℹ️ Before submitting an issue to this repo - Ensure it's a issue with the code in this repo, not a how practice I configure something with Webpack question (mail something on Stack Overflow or Spectrum). It'southward your config yous "own" it.

• 🚨Version 2.0 removes the rewire helper functions
• 中文版本说明

Tweak the create-react-app webpack config(southward) without using 'eject' and without creating a fork of the react-scripts.

All the benefits of create-react-app without the limitations of "no config". You tin can add plugins, loaders whatever you need.

Rewire Your App ☠

As of Create React App ii.0 this repo is "lightly" maintained mostly by the community at this bespeak.

⚠️ Please Note:

By doing this y'all're breaking the "guarantees" that CRA provides. That is to say you now "own" the configs. No support volition be provided. Go on with caution.

"Stuff can break" — Dan Abramov https://twitter.com/dan_abramov/status/1045809734069170176

---

Notation: I personally utilize next.js or Razzle which both support custom Webpack out of the box.

Alternatives

You can try customize-cra for a set up of CRA 2.0 compatible rewirers, or any of the alternative projects and forks that aim to back up ii.0:

• Rescripts, an culling framework for extending CRA configurations (supports 2.0+).
• react-scripts-rewired for a fork of this projection that aims to back up CRA 2.0
• craco

How to rewire your create-react-app projection

Create your app using create-react-app and and so rewire it.

1) Install react-app-rewired

For create-react-app 2.x with Webpack four:

npm install react-app-rewired --relieve-dev

For create-react-app 1.ten or react-scripts-ts with Webpack three:

npm install react-app-rewired@1.six.two --salve-dev

2) Create a config-overrides.js file in the root directory

                /* config-overrides.js */                module                .                exports                =                function                override                (                config                ,                env                )                {                //practise stuff with the webpack config...                return                config                ;                }              

              +-- your-project |   +-- config-overrides.js |   +-- node_modules |   +-- package.json |   +-- public |   +-- README.md |   +-- src                          

3) 'Flip' the existing calls to react-scripts in npm scripts for start, build and test

                /* packet.json */    "scripts": {                                  -                  "start": "react-scripts start",                                  +                  "start": "react-app-rewired start",                                  -                  "build": "react-scripts build",                                  +                  "build": "react-app-rewired build",                                  -                  "examination": "react-scripts test",                                  +                  "test": "react-app-rewired test",                "squirt": "react-scripts eject" }

Note: Do NOT flip the telephone call for the eject script. That gets run simply once for a projection, afterward which you are given full control over the webpack configuration making react-app-rewired no longer required. There are no configuration options to rewire for the squirt script.

4) Start the Dev Server

5) Build your app

Extended Configuration Options

You can prepare a custom path for config-overrides.js. If you (for instance) wanted to use a tertiary-party config-overrides.js that exists in node_modules, you could add together the following to your bundle.json:

                "config-overrides-path":                                  "node_modules/some-preconfigured-rewire"                              

By default, the config-overrides.js file exports a single function to utilise when customising the webpack configuration for compiling your react app in development or product mode. It is possible to instead export an object from this file that contains upward to 3 fields, each of which is a function. This alternative form allows you lot to besides customise the configuration used for Jest (in testing), and for the Webpack Dev Server itself.

This example implementation is used to demonstrate using each of the object require functions. In the example, the functions:

• accept some tests run conditionally based on .env variables
• set the https certificates to use for the Evolution Server, with the filenames specified in .env file variables.

                module                .                exports                =                {                // The Webpack config to utilise when compiling your react app for development or production.                webpack:                function                (                config                ,                env                )                {                // ...add together your webpack config                return                config                ;                }                ,                // The Jest config to use when running your jest tests - note that the normal rewires exercise not                // piece of work here.                jest:                function                (                config                )                {                // ...add your jest config customisation...                // Example: enable/disable some tests based on environment variables in the .env file.                if                (                !                config                .                testPathIgnorePatterns                )                {                config                .                testPathIgnorePatterns                =                [                ]                ;                }                if                (                !                process                .                env                .                RUN_COMPONENT_TESTS                )                {                config                .                testPathIgnorePatterns                .                push                (                '<rootDir>/src/components/**/*.exam.js'                )                ;                }                if                (                !                procedure                .                env                .                RUN_REDUCER_TESTS                )                {                config                .                testPathIgnorePatterns                .                button                (                '<rootDir>/src/reducers/**/*.test.js'                )                ;                }                return                config                ;                }                ,                // The part to use to create a webpack dev server configuration when running the development                // server with 'npm run start' or 'yarn start'.                // Instance: set the dev server to use a specific certificate in https.                devServer:                function                (                configFunction                )                {                // Return the replacement part for create-react-app to use to generate the Webpack                // Development Server config. "configFunction" is the function that would normally have                // been used to generate the Webpack Development server config - you can use it to create                // a starting configuration to and then modify instead of having to create a config from scratch.                render                function                (                proxy                ,                allowedHost                )                {                // Create the default config by calling configFunction with the proxy/allowedHost parameters                const                config                =                configFunction                (                proxy                ,                allowedHost                )                ;                // Change the https certificate options to match your certificate, using the .env file to                // set the file paths & passphrase.                const                fs                =                require                (                'fs'                )                ;                config                .                https                =                {                key:                fs                .                readFileSync                (                process                .                env                .                REACT_HTTPS_KEY                ,                'utf8'                )                ,                cert:                fs                .                readFileSync                (                process                .                env                .                REACT_HTTPS_CERT                ,                'utf8'                )                ,                ca:                fs                .                readFileSync                (                process                .                env                .                REACT_HTTPS_CA                ,                'utf8'                )                ,                passphrase:                process                .                env                .                REACT_HTTPS_PASS                }                ;                // Render your customised Webpack Development Server config.                return                config                ;                }                ;                }                ,                // The paths config to use when compiling your react app for development or production.                paths:                function                (                paths                ,                env                )                {                // ...add your paths config                return                paths                ;                }                ,                }              

ane) Webpack configuration - Development & Production

The webpack field is used to provide the equivalent to the unmarried-function exported from config-overrides.js. This is where all the usual rewires are used. Information technology is not able to configure compilation in test mode because test mode does not become run through Webpack at all (it runs in Jest). It is too not able to exist used to customise the Webpack Dev Server that is used to serve pages in evolution mode because create-react-app generates a separate Webpack configuration for use with the dev server using different functions and defaults.

ii) Jest configuration - Testing

Webpack is not used for compiling your awarding in Examination manner - Jest is used instead. This means that whatever rewires specified in your webpack config customisation function volition not exist applied to your project in test mode.

React-app-rewired automatically allows you to customise your Jest configuration in a jest department of your package.json file, including assuasive you to ready configuration fields that create-react-app would usually block you from existence able to set. It likewise automatically sets up Jest to compile the project with Babel prior to running tests. Jest'south configuration options are documented separately at the Jest website. Note: Configuration arrays and objects are merged, rather than overwritten. See #240 and #241 for details

If yous want to add plugins and/or presets to the Babel configuration that Jest volition use, you need to ascertain those plugins/presets in either a boom-boom section within the parcel.json file or within a .babelrc file. React-app-rewired alters the Jest configuration to use these definition files for specifying Babel options when Jest is compiling your react app. The format to use in the Babel section of package.json or the .babelrc file is documented separately at the Babel website.

The jest field in the module.exports object in config-overrides.js is used to specify a function that tin can exist called to customise the Jest testing configuration in ways that are non possible in the jest department of the package.json file. For example, information technology volition let you to change some configuration options based on environs variables. This function is passed the default create-react-app Jest configuration as a parameter and is required to render the modified Jest configuration that you want to use. A lot of the time you lot'll be able to make the configuration changes needed but by using a combination of the package.json file's jest department and a .babelrc file (or babel section in parcel.json) instead of needing to provide this jest function in config-overrides.js.

3) Webpack Dev Server

When running in development style, create-react-app does not utilise the usual Webpack config for the Development Server (the one that serves the app pages). This ways that y'all cannot utilise the normal webpack department of the config-overrides.js server to make changes to the Development Server settings as those changes won't be applied.

Instead of this, create-react-app expects to be able to call a function to generate the webpack dev server when needed. This function is provided with parameters for the proxy and allowedHost settings to be used in the webpack dev server (create-react-app retrieves the values for those parameters from your package.json file).

React-app-rewired provides the power to override this function through use of the devServer field in the module.exports object in config-overrides.js. Information technology provides the devServer office a unmarried parameter containing the default create-react-app office that is normally used to generate the dev server config (it cannot provide a generated version of the configuration considering react-scripts is calling the generation office directly). React-app-rewired needs to receive every bit a return value a replacement function for create-react-app to so use to generate the Development Server configuration (i.e. the render value should be a new function that takes the two parameters for proxy and allowedHost and itself returns a Webpack Development Server configuration). The original react-scripts function is passed into the config-overrides.js devServer role so that you are able to easily call this yourself to generate your initial devServer configuration based on what the defaults used by create-react-app are.

iv) Paths configuration - Development & Production

The paths field is used to provide overrides for the create-react-app paths passed into webpack and jest.

5) Provide rewired webpack config for 3rd political party tools

Some third political party tools, similar react-cosmos relies on your webpack config. Y'all can create webpack.config.js file and export rewired config using following snippet:

                const                {                paths                }                =                require                (                'react-app-rewired'                )                ;                // require normalized overrides                const                overrides                =                require                (                'react-app-rewired/config-overrides'                )                ;                const                config                =                crave                (                paths                .                scriptVersion                +                '/config/webpack.config.dev'                )                ;                module                .                exports                =                overrides                .                webpack                (                config                ,                process                .                env                .                NODE_ENV                )                ;              

Then only point to this file in tool configuration.

Additional Issues and Options

1) Entry Point: 'src/index.js'

At this point in fourth dimension, it is difficult to change the entry point from the default src/alphabetize.js file due to the way that file is included by create-react-app. The normal rewiring process gets bypassed by several of the create-react-app scripts.

There are three work-arounds bachelor here:

1. But crave/import your desired file from within the src/index.js file, like:

2. Employ a customised version of the react-scripts package that changes the entry point inside the scripts themselves (e.k. react-scripts-ts for a typescript project - see beneath for how to utilise custom script versions with react-app-rewired).
3. Override the react-dev-utils/checkRequiredFiles part to always render true (causing create-react-app to no longer try to enforce that the entry file must exist).

2) Custom scripts versions

It is possible to use a custom version of the react-scripts parcel with react-app-rewired past specifying the name of the scripts package in the control line option --scripts-version or setting REACT_SCRIPTS_VERSION=<...> via the environment.

A working example for using the scripts version selection is:

{                "scripts": {                "start":                                  "react-app-rewired start --scripts-version react-scripts-ts"                ,                "build":                                  "react-app-rewired build --scripts-version react-scripts-ts"                ,                "test":                                  "react-app-rewired test --scripts-version react-scripts-ts"                ,                "eject":                                  "react-scripts squirt"                                } }

React-app-rewired 2.x requires a custom react-scripts package to provide the following files:

• config/env.js
• config/webpack.config.js
• config/webpackDevServer.config.js
• scripts/build.js
• scripts/start.js
• scripts/exam.js
• scripts/utils/createJestConfig.js

React-app-rewired one.x requires a custom react-scripts package to provide the following files:

• config/env.js
• config/webpack.config.dev.js
• config/webpack.config.prod.js
• config/webpackDevServer.config.js
• scripts/build.js
• scripts/showtime.js
• scripts/test.js
• scripts/utils/createJestConfig.js

3) Specify config-overrides every bit a directory

React-app-rewired imports your config-overrides.js file without the '.js' extension. This means that you have the selection of creating a directory called config-overrides at the root of your project and exporting your overrides from the default alphabetize.js file inside that directory.

If you have several custom overrides using a directory allows y'all to be able to put each override in a separate file. An case template that demonstrates this can exist found in Guria/rewired-ts-average at Github.

4) Specify config-overrides location from command line

If y'all need to change the location of your config-overrides.js you can pass a command line option --config-overrides to the react-app-rewired script.

Version one.Ten Community Maintained Rewires (Check the plugin repo for two.0 support)

Babel plugins

• react-app-rewire-emotion by @osdevisnot
• react-app-rewire-lodash by @osdevisnot
• react-app-rewire-styled-components by @mxstbr
• react-app-rewire-polished by @rawrmonstar
• react-app-rewire-idx by @viktorivarsson
• react-app-rewire-glamorous-displayname by @CarlRosell
• react-app-rewire-import by @brianveltman
• react-app-rewire-inline-import-graphql-ast past @detrohutt
• react-app-rewire-react-intl by @clemencov
• react-app-rewire-lingui by @andreyco
• react-app-rewire-date-fns past @stk-dmitry
• react-app-rewired-esbuild by @fupengl

Webpack plugins

• react-app-rewire-appcache-plugin past @jtheis85
• react-app-rewire-build-dev by @raodurgesh
• react-app-rewire-define-plugin past @jtheis85
• react-app-rewire-favicons-plugin by @rickycook
• react-app-rewire-imagemin-plugin by @jtheis85
• react-app-rewire-modernizr by @ctrlplusb
• react-app-rewire-preload-plugin past @jtheis85
• react-app-rewire-provide-plugin by @jtheis85
• react-app-rewire-inline-source by @marcopeg
• react-app-rewire-webpack-bundle-analyzer by @byzyk
• react-app-rewire-unplug past @sigged
• react-app-rewire-compression-plugin by @ArVan
• react-app-rewire-multiple-entry by @Derek

Loaders

• react-app-rewire-postcss
• react-app-rewire-nearley past @jtheis85
• react-app-rewire-coffeescript by @stevefan1999
• react-app-rewire-typescript past @jtheis85
• react-app-rewire-typescript-babel-preset by @strothj
• react-app-rewire-css-modules by @lnhrdt
• react-app-rewire-css-modules-extensionless past @moxystudio
• react-app-rewire-less-modules past @andriijas
• react-app-rewire-stylus-modules by @marcopeg
• react-app-rewire-svg-react-loader by @lnhrdt
• react-app-rewire-bem-i18n-loader by @maxvipon
• react-app-rewire-babel-loader by @dashed
• react-app-rewire-svgr by @gitim
• react-app-rewire-yaml by @hsz
• react-app-rewire-scss by @aze3ma
• react-app-rewire-scss-loaders by @isanchez
• react-app-rewire-external-svg-loader by @moxystudio
• react-app-rewire-typings-for-css-module by @rainx

Other

• react-app-rewire-create-react-library past @osdevisnot
• react-app-rewire-react-library by @osdevisnot
• react-app-rewire-vendor-splitting by @andriijas
• react-app-rewired with Inferno
• react-app-rewired with react-styleguideist
• react-app-rewired with react-hot-loader by @cdharris
• react-app-rewire-alias by @oklas
• react-app-rewire-aliases past @aze3ma
• react-app-rewire-blockstack past @harrysolovay
• ideal-rewires by @harrysolovay
• react-app-rewire-yarn-workspaces by @viewstools

Development

When developing this project, ensure you have yarn installed.

Quick Start

To run the examination app, navigate to the directory and run:

(when you are finished, run yarn teardown to clean up)

Commands

Here is a list of all the available commands to help you in development

• yarn setup - installs dependences and links examination/react-app
• yarn kickoff - starts the react app
• yarn build - builds the react app
• yarn exam - tests the react app
• yarn teardown - unlinks test/react-app and removes dependencies

Why This Project Exists

Encounter: Create React App — But I don't wanna Eject.

carneymasul1982.blogspot.com

Source: https://www.npmjs.com/package/react-app-rewired

Share this post