diff --git a/.travis.yml b/.travis.yml
index fd0ba53313be12084901fda570ae775e852e3eac..75b45bbd8cb6f92722719e6d602b3356f062cb77 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -25,7 +25,7 @@ env:
- TEST_SUITE=simple
- TEST_SUITE=installs
- TEST_SUITE=kitchensink
- - TEST_SUITE=kitchensink-eject
+ # - TEST_SUITE=kitchensink-eject
- TEST_SUITE=behavior
matrix:
include:
diff --git a/README.md b/README.md
index 881ba7f4ad5b47ed6acfd92ff12aa9b0045c2121..e42e913f8158468dddee2672d2c6259c0b7d973f 100644
--- a/README.md
+++ b/README.md
@@ -1,203 +1,11 @@
-# Create React App [](https://travis-ci.org/facebook/create-react-app) [](https://github.com/facebook/create-react-app/pulls)
+# `backpack-react-scripts` [](https://travis-ci.org/Skyscanner/backpack-react-scripts)
-Create React apps with no build configuration.
+**âš ï¸ This is a fork of Facebook's [Create React App](https://github.com/facebook/create-react-app).**
-- [Creating an App](#creating-an-app) – How to create a new app.
-- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
+Specifically, it is a fork of the [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts) package. It adds Backpack component support and server-side rendering functionality (amongst other things).
-Create React App works on macOS, Windows, and Linux.<br>
-If something doesn’t work, please [file an issue](https://github.com/facebook/create-react-app/issues/new).
+In order to benefit from the ongoing open source development of create-react-app, this fork is kept up-to-date with the upstream repo. To aid this, we have preserved the existing repo structure, including all of the source code for the other packages that live alongside [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts). **We do not modify any source code outside of [`react-scripts`](https://github.com/facebook/create-react-app/tree/master/packages/react-scripts).**
-## Quick Overview
-
-```sh
-npx create-react-app my-app
-cd my-app
-npm start
-```
-
-_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
-
-Then open [http://localhost:3000/](http://localhost:3000/) to see your app.<br>
-When you’re ready to deploy to production, create a minified bundle with `npm run build`.
-
-<p align='center'>
-<img src='https://cdn.rawgit.com/facebook/create-react-app/27b42ac/screencast.svg' width='600' alt='npm start'>
-</p>
-
-### Get Started Immediately
-
-You **don’t** need to install or configure tools like Webpack or Babel.<br>
-They are preconfigured and hidden so that you can focus on the code.
-
-Just create a project, and you’re good to go.
-
-## Creating an App
-
-**You’ll need to have Node 8.10.0 or later on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to easily switch Node versions between different projects.
-
-To create a new app, you may choose one of the following methods:
-
-### npx
-
-```sh
-npx create-react-app my-app
-```
-
-_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_
-
-### npm
-
-```sh
-npm init react-app my-app
-```
-
-_`npm init <initializer>` is available in npm 6+_
-
-### Yarn
-
-```sh
-yarn create react-app my-app
-```
-
-_`yarn create` is available in Yarn 0.25+_
-
-It will create a directory called `my-app` inside the current folder.<br>
-Inside that directory, it will generate the initial project structure and install the transitive dependencies:
-
-```
-my-app
-├── README.md
-├── node_modules
-├── package.json
-├── .gitignore
-├── public
-│ ├── favicon.ico
-│ ├── index.html
-│ └── manifest.json
-└── src
- ├── App.css
- ├── App.js
- ├── App.test.js
- ├── index.css
- ├── index.js
- ├── logo.svg
- └── serviceWorker.js
-```
-
-No configuration or complicated folder structures, just the files you need to build your app.<br>
-Once the installation is done, you can open your project folder:
-
-```sh
-cd my-app
-```
-
-Inside the newly created project, you can run some built-in commands:
-
-### `npm start` or `yarn start`
-
-Runs the app in development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will automatically reload if you make changes to the code.<br>
-You will see the build errors and lint warnings in the console.
-
-<p align='center'>
-<img src='https://cdn.rawgit.com/marionebl/create-react-app/9f62826/screencast-error.svg' width='600' alt='Build errors'>
-</p>
-
-### `npm test` or `yarn test`
-
-Runs the test watcher in an interactive mode.<br>
-By default, runs tests related to files changed since the last commit.
-
-[Read more about testing.](https://facebook.github.io/create-react-app/docs/running-tests)
-
-### `npm run build` or `yarn build`
-
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.<br>
-
-Your app is ready to be deployed.
-
-## User Guide
-
-You can find detailed instructions on using Create React App and many tips in [its documentation](https://facebook.github.io/create-react-app/).
-
-## How to Update to New Versions?
-
-Please refer to the [User Guide](https://facebook.github.io/create-react-app/docs/updating-to-new-releases) for this and other information.
-
-## Philosophy
-
-- **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
-
-- **No Configuration Required:** You don't need to configure anything. A reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
-
-- **No Lock-In:** You can “eject†to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
-
-## What’s Included?
-
-Your environment will have everything you need to build a modern single-page React app:
-
-- React, JSX, ES6, TypeScript and Flow syntax support.
-- Language extras beyond ES6 like the object spread operator.
-- Autoprefixed CSS, so you don’t need `-webkit-` or other prefixes.
-- A fast interactive unit test runner with built-in support for coverage reporting.
-- A live development server that warns about common mistakes.
-- A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
-- An offline-first [service worker](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) and a [web app manifest](https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/), meeting all the [Progressive Web App](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) criteria. (_Note: Using the service worker is opt-in as of `react-scripts@2.0.0` and higher_)
-- Hassle-free updates for the above tools with a single dependency.
-
-Check out [this guide](https://github.com/nitishdayal/cra_closer_look) for an overview of how these tools fit together.
-
-The tradeoff is that **these tools are preconfigured to work in a specific way**. If your project needs more customization, you can ["eject"](https://facebook.github.io/create-react-app/docs/available-scripts#npm-run-eject) and customize it, but then you will need to maintain this configuration.
-
-## Popular Alternatives
-
-Create React App is a great fit for:
-
-- **Learning React** in a comfortable and feature-rich development environment.
-- **Starting new single-page React applications.**
-- **Creating examples** with React for your libraries and components.
-
-Here are few common cases where you might want to try something else:
-
-- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html).
-
-- If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's Webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html).
-
-- If you need to **publish a React component**, [nwb](https://github.com/insin/nwb) can [also do this](https://github.com/insin/nwb#react-components-and-libraries), as well as [Neutrino's react-components preset](https://neutrino.js.org/packages/react-components/).
-
-- If you want to do **server rendering** with React and Node.js, check out [Next.js](https://github.com/zeit/next.js/) or [Razzle](https://github.com/jaredpalmer/razzle). Create React App is agnostic of the backend, and just produces static HTML/JS/CSS bundles.
-
-- If your website is **mostly static** (for example, a portfolio or a blog), consider using [Gatsby](https://www.gatsbyjs.org/) instead. Unlike Create React App, it pre-renders the website into HTML at the build time.
-
-- Finally, if you need **more customization**, check out [Neutrino](https://neutrino.js.org/) and its [React preset](https://neutrino.js.org/packages/react/).
-
-All of the above tools can work with little to no configuration.
-
-If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html).
-
-## Contributing
-
-We'd love to have your helping hand on `create-react-app`! See [CONTRIBUTING.md](CONTRIBUTING.md) for more information on what we're looking for and how to get started.
-
-## React Native
-
-Looking for something similar, but for React Native?<br>
-Check out [Expo CLI](https://github.com/expo/expo-cli).
-
-## Acknowledgements
-
-We are grateful to the authors of existing related projects for their ideas and collaboration:
-
-- [@eanplatter](https://github.com/eanplatter)
-- [@insin](https://github.com/insin)
-- [@mxstbr](https://github.com/mxstbr)
-
-## License
-
-Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE).
+Files of interest:
+ - [`react-scripts` README](packages/react-scripts/README.md)
+ - [`react-scripts` CHANGELOG](packages/react-scripts/CHANGELOG.md)
diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
index ff4beff99a24448bd27d2b4a1e9bb7f7eb462bf2..e1e04caf996737bb4204d19fd4db0cc2621d7855 100755
--- a/packages/create-react-app/createReactApp.js
+++ b/packages/create-react-app/createReactApp.js
@@ -267,12 +267,13 @@ function createApp(
}
}
- if (useYarn) {
- fs.copySync(
- require.resolve('./yarn.lock.cached'),
- path.join(root, 'yarn.lock')
- );
- }
+ // Prevent the cached yarn.lock from being copied over as it fails out build
+ // if (useYarn) {
+ // fs.copySync(
+ // require.resolve('./yarn.lock.cached'),
+ // path.join(root, 'yarn.lock')
+ // );
+ // }
run(
root,
diff --git a/packages/react-scripts/CHANGELOG.md b/packages/react-scripts/CHANGELOG.md
new file mode 100644
index 0000000000000000000000000000000000000000..a1643114ad0824ecd24fd11fcf1498b2cbb49e70
--- /dev/null
+++ b/packages/react-scripts/CHANGELOG.md
@@ -0,0 +1,479 @@
+# `backpack-react-scripts` Change Log
+
+## 7.0.3 (November 18, 2019)
+
+- Add the ability to split vendor chunks using `vendorChunkRegex`. Anything that matches the regex will be put in the vendors chunk. [See PR from banana project](https://github.skyscannertools.net/dingo/banana/blob/2c5bf3f89bc0d1fec29e7fae27dd5988e99dedec/packages/webapp/package.json#L151)
+
+## 7.0.1 - 2019-09-18
+
+### Fixed
+
+- Update `node-sass` to `4.12.0` to support Node 12 rollout.
+- Update `fsevents` to `1.2.9` to support Node 12 rollout.
+
+## 7.0.0 - 2019-01-11
+
+### Breaking
+
+- Rebased onto `upstream/master` v2.1.2 (3e1dc990130c45f57c647e847682ded0ba352c7b)
+- This release rebases `backpack-react-scripts` on top of `create-react-app` v2! The major changes have been summarised in the following blog post:
+ [Create React App 2.0: Babel 7, Sass, and More.](https://reactjs.org/blog/2018/10/01/create-react-app-v2.html)
+- **Some of these changes are breaking. Please follow [this guide](./migrating-from-v6-to-v7.md) when upgrading.**
+
+## 6.0.0 - 2018-11-02
+
+### Breaking
+
+- Add css modules to `.css` imports. This is only valid for projects using css modules
+
+## 5.2.1 - 2018-09-10
+
+### Fixed
+
+- Remove peer dependency warnings
+- Remove usage of `bpk-component-grid`
+
+## 5.2.0 - 2018-09-06
+
+### Added
+
+- Rebased onto `upstream/master` v1.1.5 (dc74990b89b5c6e143b522c759be3dac2c286514)
+- Upgraded dependencies, mostly `eslint` based.
+
+## 5.1.1 - 2018-04-11
+
+### Fixed
+
+- `backpack-react-scripts` listed inside of `devDependencies` instead of `dependencies`
+- `registerServiceWorker.js` no longer appears in project output
+
+## 5.1.0 - 2018-04-10
+
+### Added
+
+- Rebased onto `upstream/master` v1.1.4 (dfbc71ce2ae07547a8544cce14a1a23fac99e071)
+
+## 5.0.10 - 2018-03-21
+
+### Fixed
+
+- New `disablePolyfills` config in `package.json`. You can opt out of including polyfills from the output bundle like so:
+
+```json
+ "backpack-react-scripts": {
+ "disablePolyfills": true
+ }
+```
+
+## 5.0.9 - 2018-03-14
+
+### Fixed
+
+- New `crossOriginLoading` config in `package.json`. You can configure cross-origin loading of dynamic chunks:
+
+```json
+ "backpack-react-scripts": {
+ "crossOriginLoading": "anonymous"
+ }
+```
+
+## 5.0.8 - 2018-03-07
+
+### Fixed
+
+- New `amdExcludes` config in `package.json`. You can now disable AMD parsing for specific modules like so:
+
+```json
+ "backpack-react-scripts": {
+ "amdExcludes": [
+ "globalize"
+ ]
+ }
+```
+
+## 5.0.7 - 2018-03-06
+
+### Fixed
+
+- Use `package.json` name field as value for `output.jsonpFunction`, this is important for when multiple webpack runtimes from different compilation are used on the same page
+
+## 5.0.6 - 2018-01-31
+
+### Fixed
+
+- CSS Modules hashing now uses `package.json` name field as a salt
+
+## 5.0.5 - 2018-01-15
+
+### Fixed
+
+- Added `saddlebag-` prefix to the jest config
+
+## 5.0.4 - 2018-01-11
+
+### Added
+
+- Added `saddlebag-` prefix for saddlebag modules
+
+## 5.0.3 - 2017-12-21
+
+### Fixed
+
+- Rebased onto `upstream/master` v1.0.17 (4b55193f0ad479f26b0f5e153bb4b152a1ee03e7)
+- Peer dependency issues with `postcss-less` & `sugarss`
+
+## 5.0.2 - 2017-11-03
+
+### Fixed
+
+- Scope the disabling of AMD for `lodash` only
+
+## 5.0.1 - 2017-11-02
+
+### Fixed
+
+- Prevent lodash imports from leaking on to the global scope, see https://github.com/webpack/webpack/issues/3017#issuecomment-285954512
+- Upgraded `stylelint` to `^8.2.0` and `stylelint-config-skyscanner` to `^1.0.1`
+
+## 5.0.0 - 2017-10-30
+
+### Breaking
+
+- Upgraded [`eslint-config-skyscanner`](https://github.com/Skyscanner/eslint-config-skyscanner/blob/master/changelog.md#300---upgraded-esling-config-airbnb-peer-dependencies) to `3.0.0`.
+
+## 4.0.8 - 2017-10-12
+
+### Fixed
+
+- Rebased onto `upstream/master` (b2c0b3f74b47f0f85e3f17f7d3249b7e536cda05)
+- Locked `react` & `react-dom` versions to `^15.0.0` for now
+
+## 4.0.7 - 2017-08-24
+
+### Fixed
+
+- Fixed issue with classnames not being hashed correctly for projects using CSS Modules
+
+## 4.0.6 - 2017-08-22
+
+### Fixed
+
+- Upgraded sass-loader to 6.0.6 which fixes peer dependency warning with webpack (caused shrinkwraps to fail)
+- Upgraded bpk-mixins to 16.3.1
+
+## 4.0.5 - 2017-08-17
+
+### Fixed
+
+- Rebased onto `upstream/master` (e8a3e4b2995f4c6e49c0a7ed653a1646a7b5e515)
+
+## 4.0.3 - 2017-08-10
+
+### Fixed
+
+- Production and SSR builds will now use `optimize-css-assets-webpack-plugin` with `cssnano` to optimize output CSS. This gets rid of duplication of global CSS constructs such as keyframes.
+
+## 4.0.2 - 2017-07-28
+
+### Fixed
+
+- Deprecated BpkHeading and BpkParagraph
+- Added BpkText component
+- Updated all other Backpack dependencies to latest versions
+
+## 4.0.1 - 2017-07-27
+
+### Fixed
+
+- Updated eslint-plugin-import to 2.7.0 to fix `npm shrinkwrap --save-dev`
+
+## 4.0.0 - 2017-07-27
+
+### Changed
+
+- Updated stylelint to 8.0.0 and stylelint-config-skyscanner to 1.0.0
+
+## 3.0.1 - 2017-07-12
+
+### Fixed
+
+- Mocked CSS Modules for Jest, so snapshot tests include the original class names
+
+## 3.0.0 - 2017-07-11
+
+### Changed
+
+- Enabled [CSS Modules](https://github.com/css-modules/css-modules) by default
+ - You can use the config option `cssModules` to opt out:
+ ```
+ "backpack-react-scripts": {
+ "cssModules": false
+ }
+ ```
+ In this case, Sass files will not be treated as CSS Modules by default. However, you can opt-in on a
+ per-file basis using the naming convention: `*.module.scss`.
+ - Backpack components will _always_ be treated as CSS Modules, even if you opt out
+ - All Backpack components need to be on these versions (or higher) to work:
+ - bpk-component-accordion@1.1.0
+ - bpk-component-autosuggest@3.0.13
+ - bpk-component-badge@0.1.0
+ - bpk-component-banner-alert@1.1.0
+ - bpk-component-barchart@0.1.0
+ - bpk-component-blockquote@0.1.0
+ - bpk-component-breakpoint@0.1.22
+ - bpk-component-button@1.6.33
+ - bpk-component-calendar@3.3.0
+ - bpk-component-card@0.1.0
+ - bpk-component-checkbox@1.2.0
+ - bpk-component-close-button@0.1.0
+ - bpk-component-code@0.1.0
+ - bpk-component-content-container@1.1.0
+ - bpk-component-datepicker@6.1.1
+ - bpk-component-fieldset@0.3.1
+ - bpk-component-form-validation@0.1.0
+ - bpk-component-grid-toggle@0.1.0
+ - bpk-component-grid@1.1.0
+ - bpk-component-heading@2.1.0
+ - bpk-component-horizontal-nav@0.1.0
+ - bpk-component-icon@3.7.0
+ - bpk-component-input@3.2.1
+ - bpk-component-label@3.2.0
+ - bpk-component-link@0.6.0
+ - bpk-component-list@0.1.0
+ - bpk-component-loading-button@0.1.0
+ - bpk-component-modal@1.1.0
+ - bpk-component-nudger@0.1.0
+ - bpk-component-panel@0.1.0
+ - bpk-component-paragraph@0.3.0
+ - bpk-component-popover@1.1.0
+ - bpk-component-progress@0.1.0
+ - bpk-component-radio@1.1.0
+ - bpk-component-router-link@0.2.0
+ - bpk-component-rtl-toggle@0.0.73
+ - bpk-component-select@2.1.0
+ - bpk-component-spinner@2.1.0
+ - bpk-component-star-rating@0.0.3
+ - bpk-component-table@0.1.0
+ - bpk-component-textarea@0.1.0
+ - bpk-component-ticket@0.1.0
+ - bpk-component-tooltip@1.1.0
+ - bpk-react-utils@2.0.0
+
+## 2.0.3 - 2017-07-010
+
+### Fixed
+
+- Rebased onto `upstream/master` (f495c15578403cf2dbac211493ae8fb6ac742415)
+
+## 2.0.1 - 2017-07-04
+
+### Changed
+
+- Replaced the "babelIncludeRegex" config option in `package.json` with "babelIncludePrefixes". You can now
+ enable transpilation for your dependencies by adding package prefixes like so:
+ ```
+ {
+ ...
+ "backpack-react-scripts": {
+ "babelIncludePrefixes": [
+ "my-module-prefix-",
+ "some-dependency"
+ ]
+ }
+ }
+ ```
+
+### Changed
+
+- Upgraded `eslint-config-skyscanner` to `2.0.0` which uses the `babel-eslint` parse
+
+## 1.0.1 - 2017-06-12
+
+### Added
+
+- Added `babel-eslint` as dependency so it can be used with ESLint when dynamic `import()` statements are used
+
+### Changed
+
+- Upgraded `eslint-config-skyscanner` to `2.0.0` which uses the `babel-eslint` parse
+
+## 1.0.0 - 2017-05-29
+
+### Changed
+
+- Rebased from `upstream/master` (fbaeff2d6ef83ae5dc8213150e0fa6589ed29150)
+- TLDR; this upgrades the upstream dependency `react-scripts` to `^1.0.0` - please read the [blog post](https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html) for a summary of the new features this brings
+- This is a major release, meaning there are a few breaking changes (summarised below). Please refer to the [`react-scripts` changelog](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#100-may-18-2017) for detailed migration documentations.
+ - [Ensure application and test files reside in src/](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#ensure-application-and-test-files-reside-in-src)
+ - [You can no longer import file content](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#you-can-no-longer-import-file-content)
+ - [Confusing window globals can no longer be used without window qualifier](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#confusing-window-globals-can-no-longer-be-used-without-window-qualifier)
+ - [Jest snapshot format has changed](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md#how-do-i-make-my-tests-work-with-jest-20)
+
+## 0.0.19 - 2017-05-02
+
+### Added
+
+- The ability to configure "babelIncludeRegex" in package json
+
+## 0.0.18 - 2017-04-10
+
+### Added
+
+- Support for new `bpk-icon` mixin from `bpk-mixins`
+
+## 0.0.17 - 2017-04-06
+
+### Fixed
+
+- Rebased from `upstream/0.9.x` (ebebe80383eb15b4759a0cd5ea12015eaac94c0e)
+- Now moves `react` and `react-dom` from dependencies to devDependencies
+
+## 0.0.16 - 2017-03-30
+
+### Added
+
+- Upgrading `eslint-config-skyscanner` to v1.1.0
+- Upgrading `stylelint-config-skyscanner` to v0.1.3
+- Upgrading `eslint-plugin-react` to v6.10.3 as [undelying issue](https://github.com/yannickcr/eslint-plugin-react/issues/1117) which caused it to be pinned was resolved
+- Upgrading `node-sass` to v4.5.0 to make it compatible with latest version of `bpk-mixins`
+- Upgrading all Backpack dev dependencies:
+ - `bpk-component-button` to v1.6.6
+ - `bpk-component-code` to v0.0.58
+ - `bpk-component-grid` to v1.0.8
+ - `bpk-component-heading` to v1.2.7
+ - `bpk-component-paragraph` to v0.2.1
+ - `bpk-mixins` to v11.0.2
+ - `bpk-stylesheets` to v3.2.16
+- Upgrading `detect-port` to v1.1.1
+
+## 0.0.15 - 2017-03-27
+
+### Added
+
+- The ability to lint SCSS with `stylelint-config-skyscanner`
+ - run `npm run lint:scss` or just `npm run lint` for both JS and SCSS linting
+- The ability to automatically fix many SCSS linting issues using `stylefmt`
+ - run `npm run lint:scss:fix`
+- The ability to automatically fix many JS linting issues using `eslint --fix`
+ - run `npm run lint:js:fix`
+
+## 0.0.14 - 2017-03-20
+
+### Added
+
+- Upgrading `eslint-config-skyscanner` to v1.0.0
+
+### Fixed
+
+- Pinning `eslint-plugin-react` to 6.10.0 to fix indent bug
+
+## 0.0.13 - 2017-03-09
+
+### Added
+
+- The ability to configure "ssrExternals" in package json
+
+## 0.0.12 - 2017-03-01
+
+### Fixed
+
+- The backpack module regex now works on windows
+
+## 0.0.11 - 2017-02-27
+
+### Changed
+
+- Removed backpack logo usage from output template
+
+### Added
+
+- There is now an `.editorconfig` in the output template
+
+## 0.0.10 - 2017-01-05
+
+### Changed
+
+- Rebased from `upstream/master` (4d7b7544e74db1aaca22e847b233ed1f3b95b72b)
+ - Updates `babel-jest` && `jest` packages to 18.0.0
+- Upgraded `eslint` & `eslint-plugin-react` to 3.12.2 & 6.8.0 respectively
+
+### Added
+
+- Added ability to configure "externals" in package json
+
+## 0.0.9 - 2016-12-20
+
+### Added
+
+- Server Side Rendering support (proof of concept):
+ - `webpack.config.ssr.js`: This is a duplicate of `webpack.config.prod.js` modified to target a server side node environment
+ - `build.js` now checks if an `ssr.js` file exists at the app root, if so it will compile it in parallel with the optimized browser bundle leaving an
+ `ssr.js` file in the build directory ready to be required on the server
+ - See the [readme](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts/template#server-side-rendering-ssr) for detailed instructions.
+
+## 0.0.8
+
+### Changed
+
+- Rebased from `upstream/master` (94c912dc60561c931232caf9cf5442082711227c)
+ - Mostly bug fixes and dependency upgrades, see [create-react-app's changelog](https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md)
+ (between versions `v0.8.0` -> `v0.8.4`)
+
+## 0.0.7
+
+### Fixed
+
+- Added base stylesheet scripts to the template so that hover effects work
+
+## 0.0.6
+
+### Changed
+
+- Removed eslint from webpack to a separate `npm run lint` task
+- Swapped out `eslint-config-react-app` in favour of `eslint-config-skyscanner`
+
+### Added
+
+- A `backpack-react-scripts` specific readme
+
+## 0.0.5
+
+### Fixed
+
+- Rebased from `upstream/master` (bcc469c9a5c7916ec10786f133769cdda2c80188)
+ - Most notable change is Yarn support
+
+## 0.0.4
+
+### Fixed
+
+- Reverted nested components dir
+
+## 0.0.3
+
+### Added
+
+- New Backpack template
+ - Backpack stylesheet and Sass mixin integration
+ - Backpack button, code, grid, heading & paragraph components integration
+ - `.eslintrc` for editor integration
+ - Nested components into `src/components/` dir
+
+## 0.0.2
+
+### Fixed
+
+- Removed `bundledDependencies`
+
+## 0.0.1
+
+### Changed
+
+- Customised `react-scripts` package to be `backpack-react-scripts`
+- Marked all other packages as private
+
+### Added
+
+- Sass stylesheet support
+- Babel will now compile imports from the `node_modules` folder that match `/bpk-*`
+- Drone build configuration
diff --git a/packages/react-scripts/README.md b/packages/react-scripts/README.md
index d6de290ff05fa2b700f5b2f551b0c09aaf11ee08..b29f21e13c63e0610ad1fff9ed924fba3418acc9 100644
--- a/packages/react-scripts/README.md
+++ b/packages/react-scripts/README.md
@@ -1,7 +1,92 @@
-# react-scripts
+# backpack-react-scripts
-This package includes scripts and configuration used by [Create React App](https://github.com/facebook/create-react-app).<br>
-Please refer to its documentation:
+### **Important:** The currently supported version of **CRA** by `backpack-react-scripts` is up to `v2.1.2`. Versions above this will not work.
-- [Getting Started](https://facebook.github.io/create-react-app/docs/getting-started) – How to create a new app.
-- [User Guide](https://facebook.github.io/create-react-app/) – How to develop apps bootstrapped with Create React App.
+This package is a fork of [Create React App](https://github.com/facebookincubator/create-react-app) (specifically the
+`react-scripts` package). It's intended to be used in conjuction with `create-react-app` like so:
+
+```sh
+npx create-react-app@2.1.2 my-app --scripts-version=backpack-react-scripts
+
+# start your app development like you normally would with `create-react-app`
+cd my-app
+npm start
+```
+
+## What is different in our fork?
+
+- Compilation of uncompiled Backpack components (specifically JSX).
+- Skyscanner specific template with Backpack components integrated out of the box.
+- CSS Modules enabled by default for all `.css` & `.scss` files.
+- Ability to create a bundle for server side rending.
+- Automatic chunking is disabled by default.
+- **`css.html` & `js.html`**: New files in the `build/` output folder. These are html partials that include `<script />` and `<link />` references to the various static assets output by webpack. Useful if automatic chunking is turned on and you don't want to worry about order.
+- A bunch of configuration options via `"backpack-react-scripts"` field in `package.json`:
+ - `crossOriginLoading`: Modify the default behaviour, see [docs](https://webpack.js.org/configuration/output/#output-crossoriginloading).
+ - `babelIncludePrefixes`: An array of module name prefixes to opt into babel compilation. Includes `["bpk-", "saddlebag-"]` by default.
+ - `enableAutomaticChunking`: Boolean, opt in to automatic chunking of vendor, common and app code.
+ - `vendorsChunkRegex`: String, Regex for picking what goes into the `vendors` chunk. See `cacheGroups` in webpack docs. Dependent on `enableAutomaticChunking` being enabled
+ - `amdExcludes`: Array of module names to exclude from AMD parsing. Incldues `["lodash"]` by default.
+ - `externals`: exposing the Webpack config to modify externals, see [docs](https://webpack.js.org/configuration/externals/).
+ - `ssrExternals`: Similar to above, but for `ssr.js` only.
+ - `cssModules`: Boolean, true by default.
+
+## Releasing a new version of `backpack-react-scripts`
+
+1. To publish a new version of `backpack-react-scripts`, run the following command:
+
+ ```
+ npm run publish -- --scope backpack-react-scripts
+ ```
+
+2. You will be prompted to select a new semver version (MAJOR, MINOR, PATCH). Use the [CHANGELOG.md](./CHANGELOG.md) to decide on the nature of the changes since the last release.
+
+ - If you want to be extra careful, you can publish a prerelease by running this instead:
+
+ ```
+ npm run publish -- --scope backpack-react-scripts --canary
+ ```
+
+3. Update the [CHANGELOG.md](./CHANGELOG.md) with the new version, taking care to follow the format of previous releases.
+
+## Keeping this fork updated
+
+We wish to keep this fork updated with the upstream repo to benefit from the ongoing open source development
+of `create-react-app`. To keep this fork up to date, please follow the steps below:
+
+1. Ensure `master` is in sync with `upstream/master`:
+
+ ```sh
+ git checkout master
+ git remote add upstream git@github.com:facebook/create-react-app.git
+ git fetch upstream
+ git reset --hard upstream/master
+ git push --force-with-lease
+ ```
+
+1. Rebase `fork` on top of a **tagged release** on `master`:
+
+ ```sh
+ git checkout fork
+ git rebase <commit>
+ ```
+
+ > **Note:** `<commit>` should be the SHA-1 of the latest upstream release - _not_ just the latest i.e. `upstream/master`
+
+1. Pair with someone else to fix any conflicts and cross examine changes in upstream with changes in our fork.
+
+ > This is the most time consuming part. Take care to make sure you are not regressing any functionality that we have added in our fork.
+
+1. Re-name your local, rebased `fork` branch to something else and push it to origin. This will ensure it runs through CI and you can verify your changes.
+
+ ```sh
+ git branch -m <branch>
+ git push origin <branch>
+ ```
+
+1. Finally, when we are confident that the rebase has been successful, re-name your branch back to `fork` and push it to origin:
+
+ ```sh
+ git branch -m fork
+ git push --force-with-lease
+ ```
diff --git a/packages/react-scripts/config/css.html b/packages/react-scripts/config/css.html
new file mode 100644
index 0000000000000000000000000000000000000000..6c3a62d81d1d02d0a1e3cdb022eb4a0b31a27283
--- /dev/null
+++ b/packages/react-scripts/config/css.html
@@ -0,0 +1,5 @@
+<% _.each(htmlWebpackPlugin.files.css, file => { %><link
+ rel="stylesheet"
+ href="<%= file %>"
+/>
+<% }); %>
diff --git a/packages/react-scripts/config/js.html b/packages/react-scripts/config/js.html
new file mode 100644
index 0000000000000000000000000000000000000000..b84f2f8ddce379a781ff7586ba94e3e1be1657a2
--- /dev/null
+++ b/packages/react-scripts/config/js.html
@@ -0,0 +1,2 @@
+<% _.each(htmlWebpackPlugin.files.js, file => { %><script src="<%= file %>"></script>
+<% }); %>
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index b719054583b723080144a9c4977f5b3c609994f0..4a072de4e72be526b01831bdc722585c6c26ecee 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -90,6 +90,7 @@ module.exports = {
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
+ appSsrJs: resolveApp('src/ssr.js'),
};
// @remove-on-eject-begin
@@ -112,6 +113,7 @@ module.exports = {
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
+ appSsrJs: resolveApp('src/ssr.js'),
// These properties only exist before ejecting:
ownPath: resolveOwn('.'),
ownNodeModules: resolveOwn('node_modules'), // This is empty on npm 3
@@ -146,6 +148,7 @@ if (
appNodeModules: resolveOwn('node_modules'),
publicUrl: getPublicUrl(resolveOwn('package.json')),
servedPath: getServedPath(resolveOwn('package.json')),
+ appSsrJs: resolveOwn('template/src/ssr.js'),
// These properties only exist before ejecting:
ownPath: resolveOwn('.'),
ownNodeModules: resolveOwn('node_modules'),
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 3696597fb44d74b9bcf226ed7f543c4e791508f0..c2d5e98b9d4b444a086fb05d726058982b0f848d 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -35,6 +35,21 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
// @remove-on-eject-end
+const sassFunctions = require('bpk-mixins/sass-functions');
+const camelCase = require('lodash/camelCase');
+const pkgJson = require(paths.appPackageJson);
+
+const bpkReactScriptsConfig = pkgJson['backpack-react-scripts'] || {};
+
+const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
+ ? bpkReactScriptsConfig.babelIncludePrefixes.map(
+ prefix => new RegExp(`node_modules[\\/]${prefix}`)
+ )
+ : [];
+
+const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
+const crossOriginLoading = bpkReactScriptsConfig.crossOriginLoading || false;
+
// Source maps are resource heavy and can cause out of memory issue for large source files.
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
// Some apps do not need the benefits of saving a web request, so not inlining the chunk
@@ -50,6 +65,10 @@ const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
+// Backpack / saddlebag node module regexes
+const backpackModulesRegex = /node_modules[\\/]bpk-/;
+const saddlebagModulesRegex = /node_modules[\\/]saddlebag-/;
+
// This is the production and development configuration.
// It is focused on developer experience, fast rebuilds, and a minimal bundle.
module.exports = function(webpackEnv) {
@@ -76,7 +95,11 @@ module.exports = function(webpackEnv) {
const env = getClientEnvironment(publicUrl);
// common function to get style loaders
- const getStyleLoaders = (cssOptions, preProcessor) => {
+ const getStyleLoaders = (
+ cssOptions,
+ preProcessor,
+ preProcessorOptions = {}
+ ) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
@@ -116,7 +139,10 @@ module.exports = function(webpackEnv) {
loaders.push({
loader: require.resolve(preProcessor),
options: {
- sourceMap: isEnvProduction && shouldUseSourceMap,
+ ...preProcessorOptions,
+ ...{
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
},
});
}
@@ -154,6 +180,8 @@ module.exports = function(webpackEnv) {
// changing JS code would still trigger a refresh.
].filter(Boolean),
output: {
+ jsonpFunction: camelCase(pkgJson.name + 'JsonpCallback'),
+ crossOriginLoading,
// The build folder.
path: isEnvProduction ? paths.appBuild : undefined,
// Add /* filename */ comments to generated require()s in the output.
@@ -245,14 +273,27 @@ module.exports = function(webpackEnv) {
// Automatically split vendor and commons
// https://twitter.com/wSokra/status/969633336732905474
// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
- splitChunks: {
- chunks: 'all',
- name: false,
- },
- // Keep the runtime chunk separated to enable long term caching
+ // splitChunks: {
+ // chunks: 'all',
+ // name: false,
+ // },
+ splitChunks: bpkReactScriptsConfig.enableAutomaticChunking
+ ? {
+ chunks: 'all',
+ name: false,
+ cacheGroups: bpkReactScriptsConfig.vendorsChunkRegex ? {
+ vendors: {
+ test: new RegExp(bpkReactScriptsConfig.vendorsChunkRegex),
+ },
+ } : {},
+ }
+ : {},
+ // Keep the runtime chunk seperated to enable long term caching
// https://twitter.com/wSokra/status/969679223278505985
- runtimeChunk: true,
+ // runtimeChunk: true,
+ runtimeChunk: bpkReactScriptsConfig.enableAutomaticChunking,
},
+ externals: isEnvProduction ? bpkReactScriptsConfig.externals || {} : {},
resolve: {
// This allows you to set a fallback for where Webpack should look for modules.
// We placed these paths second because we want `node_modules` to "win"
@@ -303,33 +344,43 @@ module.exports = function(webpackEnv) {
// First, run the linter.
// It's important to do this before Babel processes the JS.
- {
- test: /\.(js|mjs|jsx)$/,
- enforce: 'pre',
- use: [
- {
- options: {
- formatter: require.resolve('react-dev-utils/eslintFormatter'),
- eslintPath: require.resolve('eslint'),
- // @remove-on-eject-begin
- baseConfig: {
- extends: [require.resolve('eslint-config-react-app')],
- settings: { react: { version: '999.999.999' } },
- },
- ignore: false,
- useEslintrc: false,
- // @remove-on-eject-end
- },
- loader: require.resolve('eslint-loader'),
- },
- ],
- include: paths.appSrc,
- },
+ // {
+ // test: /\.(js|mjs|jsx)$/,
+ // enforce: 'pre',
+ // use: [
+ // {
+ // options: {
+ // formatter: require.resolve('react-dev-utils/eslintFormatter'),
+ // eslintPath: require.resolve('eslint'),
+ // // @remove-on-eject-begin
+ // baseConfig: {
+ // extends: [require.resolve('eslint-config-react-app')],
+ // settings: { react: { version: '999.999.999' } },
+ // },
+ // ignore: false,
+ // useEslintrc: false,
+ // // @remove-on-eject-end
+ // },
+ // loader: require.resolve('eslint-loader'),
+ // },
+ // ],
+ // include: paths.appSrc,
+ // },
{
// "oneOf" will traverse all following loaders until one will
// match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list.
oneOf: [
+ {
+ test: new RegExp(
+ `(^|/)(${(bpkReactScriptsConfig.amdExcludes || [])
+ .concat('lodash')
+ .join('|')})(/|.|$)`
+ ),
+ parser: {
+ amd: false,
+ },
+ },
// "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match.
@@ -345,7 +396,12 @@ module.exports = function(webpackEnv) {
// The preset includes JSX, Flow, TypeScript, and some ESnext features.
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
- include: paths.appSrc,
+ include: [
+ paths.appSrc,
+ backpackModulesRegex,
+ saddlebagModulesRegex,
+ ...customModuleRegexes,
+ ],
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
@@ -439,7 +495,10 @@ module.exports = function(webpackEnv) {
// of CSS.
// By default we support CSS Modules with the extension .module.css
{
- test: cssRegex,
+ test: {
+ and: [cssRegex, () => !cssModulesEnabled],
+ exclude: [backpackModulesRegex],
+ },
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
@@ -454,7 +513,15 @@ module.exports = function(webpackEnv) {
// Adds support for CSS Modules (https://github.com/css-modules/css-modules)
// using the extension .module.css
{
- test: cssModuleRegex,
+ test: [
+ cssModuleRegex,
+ {
+ and: [cssRegex, () => cssModulesEnabled],
+ },
+ {
+ and: [cssRegex, backpackModulesRegex],
+ },
+ ],
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
@@ -466,14 +533,20 @@ module.exports = function(webpackEnv) {
// By default we support SASS Modules with the
// extensions .module.scss or .module.sass
{
- test: sassRegex,
+ test: {
+ and: [sassRegex, () => !cssModulesEnabled],
+ exclude: [backpackModulesRegex],
+ },
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
- 'sass-loader'
+ 'sass-loader',
+ {
+ functions: sassFunctions,
+ }
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
@@ -484,7 +557,15 @@ module.exports = function(webpackEnv) {
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
- test: sassModuleRegex,
+ test: [
+ sassModuleRegex,
+ {
+ and: [sassRegex, () => cssModulesEnabled],
+ },
+ {
+ and: [sassRegex, backpackModulesRegex],
+ },
+ ],
use: getStyleLoaders(
{
importLoaders: 2,
@@ -492,7 +573,10 @@ module.exports = function(webpackEnv) {
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
- 'sass-loader'
+ 'sass-loader',
+ {
+ functions: sassFunctions,
+ }
),
},
// "file" loader makes sure those assets get served by WebpackDevServer.
@@ -544,6 +628,26 @@ module.exports = function(webpackEnv) {
: undefined
)
),
+ new HtmlWebpackPlugin(
+ Object.assign(
+ {},
+ {
+ inject: false,
+ filename: 'css.html',
+ template: path.resolve(__dirname, './css.html'),
+ }
+ )
+ ),
+ new HtmlWebpackPlugin(
+ Object.assign(
+ {},
+ {
+ inject: false,
+ filename: 'js.html',
+ template: path.resolve(__dirname, './js.html'),
+ }
+ )
+ ),
// Inlines the webpack runtime script. This script is too small to warrant
// a network request.
isEnvProduction &&
diff --git a/packages/react-scripts/config/webpack.config.ssr.js b/packages/react-scripts/config/webpack.config.ssr.js
new file mode 100644
index 0000000000000000000000000000000000000000..8fa836a0417c7a3f4ce3b3637421a64e60ccb054
--- /dev/null
+++ b/packages/react-scripts/config/webpack.config.ssr.js
@@ -0,0 +1,751 @@
+// @remove-on-eject-begin
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// @remove-on-eject-end
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const webpack = require('webpack');
+const resolve = require('resolve');
+const PnpWebpackPlugin = require('pnp-webpack-plugin');
+// const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+// const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
+// const TerserPlugin = require('terser-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+// const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+// const safePostCssParser = require('postcss-safe-parser');
+// const ManifestPlugin = require('webpack-manifest-plugin');
+// const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+// const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
+const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const paths = require('./paths');
+const getClientEnvironment = require('./env');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
+const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+// @remove-on-eject-begin
+const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
+// @remove-on-eject-end
+
+const sassFunctions = require('bpk-mixins/sass-functions');
+// const camelCase = require('lodash/camelCase');
+const pkgJson = require(paths.appPackageJson);
+
+const bpkReactScriptsConfig = pkgJson['backpack-react-scripts'] || {};
+
+const customModuleRegexes = bpkReactScriptsConfig.babelIncludePrefixes
+ ? bpkReactScriptsConfig.babelIncludePrefixes.map(
+ prefix => new RegExp(`node_modules[\\/]${prefix}`)
+ )
+ : [];
+
+const cssModulesEnabled = bpkReactScriptsConfig.cssModules !== false;
+
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+// Some apps do not need the benefits of saving a web request, so not inlining the chunk
+// makes for a smoother build process.
+// const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
+
+// Check if TypeScript is setup
+const useTypeScript = fs.existsSync(paths.appTsConfig);
+
+// style files regexes
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// Backpack / saddlebag node module regexes
+const backpackModulesRegex = /node_modules[\\/]bpk-/;
+const saddlebagModulesRegex = /node_modules[\\/]saddlebag-/;
+
+// This is the production and development configuration.
+// It is focused on developer experience, fast rebuilds, and a minimal bundle.
+module.exports = function(webpackEnv) {
+ const isEnvDevelopment = webpackEnv === 'development';
+ const isEnvProduction = webpackEnv === 'production';
+
+ // Webpack uses `publicPath` to determine where the app is being served from.
+ // It requires a trailing slash, or the file assets will get an incorrect path.
+ // In development, we always serve from the root. This makes config easier.
+ const publicPath = isEnvProduction
+ ? paths.servedPath
+ : isEnvDevelopment && '/';
+ // Some apps do not use client-side routing with pushState.
+ // For these, "homepage" can be set to "." to enable relative asset paths.
+ const shouldUseRelativeAssetPaths = publicPath === './';
+
+ // `publicUrl` is just like `publicPath`, but we will provide it to our app
+ // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
+ // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
+ const publicUrl = isEnvProduction
+ ? publicPath.slice(0, -1)
+ : isEnvDevelopment && '';
+ // Get environment variables to inject into our app.
+ const env = getClientEnvironment(publicUrl);
+
+ // common function to get style loaders
+ const getStyleLoaders = (
+ cssOptions,
+ preProcessor,
+ preProcessorOptions = {}
+ ) => {
+ const loaders = [
+ isEnvDevelopment && require.resolve('style-loader'),
+ isEnvProduction && {
+ loader: MiniCssExtractPlugin.loader,
+ options: Object.assign(
+ {},
+ shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined
+ ),
+ },
+ {
+ loader: require.resolve('css-loader'),
+ options: cssOptions,
+ },
+ {
+ // Options for PostCSS as we reference these options twice
+ // Adds vendor prefixing based on your specified browser support in
+ // package.json
+ loader: require.resolve('postcss-loader'),
+ options: {
+ // Necessary for external CSS imports to work
+ // https://github.com/facebook/create-react-app/issues/2677
+ ident: 'postcss',
+ plugins: () => [
+ require('postcss-flexbugs-fixes'),
+ require('postcss-preset-env')({
+ autoprefixer: {
+ flexbox: 'no-2009',
+ },
+ stage: 3,
+ }),
+ ],
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
+ },
+ ].filter(Boolean);
+ if (preProcessor) {
+ loaders.push({
+ loader: require.resolve(preProcessor),
+ options: {
+ ...preProcessorOptions,
+ ...{
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
+ },
+ });
+ }
+ return loaders;
+ };
+
+ return {
+ target: 'node',
+ mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
+ // Stop compilation early in production
+ bail: isEnvProduction,
+ devtool: isEnvProduction
+ ? shouldUseSourceMap
+ ? 'source-map'
+ : false
+ : isEnvDevelopment && 'cheap-module-source-map',
+ // These are the "entry points" to our application.
+ // This means they will be the "root" imports that are included in JS bundle.
+ entry: [
+ // Include an alternative client for WebpackDevServer. A client's job is to
+ // connect to WebpackDevServer by a socket and get notified about changes.
+ // When you save a file, the client will either apply hot updates (in case
+ // of CSS changes), or refresh the page (in case of JS changes). When you
+ // make a syntax error, this client will display a syntax error overlay.
+ // Note: instead of the default WebpackDevServer client, we use a custom one
+ // to bring better experience for Create React App users. You can replace
+ // the line below with these two lines if you prefer the stock client:
+ // require.resolve('webpack-dev-server/client') + '?/',
+ // require.resolve('webpack/hot/dev-server'),
+ isEnvDevelopment &&
+ require.resolve('react-dev-utils/webpackHotDevClient'),
+ // Finally, this is your app's code:
+ // paths.appIndexJs,
+ paths.appSsrJs,
+ // We include the app code last so that if there is a runtime error during
+ // initialization, it doesn't blow up the WebpackDevServer client, and
+ // changing JS code would still trigger a refresh.
+ ].filter(Boolean),
+ output: {
+ // The build folder.
+ path: isEnvProduction ? paths.appBuild : undefined,
+ // Add /* filename */ comments to generated require()s in the output.
+ pathinfo: isEnvDevelopment,
+ // There will be one main bundle, and one file per asynchronous chunk.
+ // In development, it does not produce real files.
+ // filename: isEnvProduction
+ // ? 'static/js/[name].[chunkhash:8].js'
+ // : isEnvDevelopment && 'static/js/bundle.js',
+ filename: 'ssr.js',
+ libraryTarget: 'commonjs2',
+ // There are also additional JS chunk files if you use code splitting.
+ chunkFilename: isEnvProduction
+ ? 'static/js/[name].[chunkhash:8].chunk.js'
+ : isEnvDevelopment && 'static/js/[name].chunk.js',
+ // We inferred the "public path" (such as / or /my-project) from homepage.
+ // We use "/" in development.
+ publicPath: publicPath,
+ // Point sourcemap entries to original disk location (format as URL on Windows)
+ devtoolModuleFilenameTemplate: isEnvProduction
+ ? info =>
+ path
+ .relative(paths.appSrc, info.absoluteResourcePath)
+ .replace(/\\/g, '/')
+ : isEnvDevelopment &&
+ (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
+ },
+ optimization: {
+ // minimize: isEnvProduction,
+ minimize: false,
+ // minimizer: [
+ // // This is only used in production mode
+ // new TerserPlugin({
+ // terserOptions: {
+ // parse: {
+ // // we want terser to parse ecma 8 code. However, we don't want it
+ // // to apply any minfication steps that turns valid ecma 5 code
+ // // into invalid ecma 5 code. This is why the 'compress' and 'output'
+ // // sections only apply transformations that are ecma 5 safe
+ // // https://github.com/facebook/create-react-app/pull/4234
+ // ecma: 8,
+ // },
+ // compress: {
+ // ecma: 5,
+ // warnings: false,
+ // // Disabled because of an issue with Uglify breaking seemingly valid code:
+ // // https://github.com/facebook/create-react-app/issues/2376
+ // // Pending further investigation:
+ // // https://github.com/mishoo/UglifyJS2/issues/2011
+ // comparisons: false,
+ // // Disabled because of an issue with Terser breaking valid code:
+ // // https://github.com/facebook/create-react-app/issues/5250
+ // // Pending futher investigation:
+ // // https://github.com/terser-js/terser/issues/120
+ // inline: 2,
+ // },
+ // mangle: {
+ // safari10: true,
+ // },
+ // output: {
+ // ecma: 5,
+ // comments: false,
+ // // Turned on because emoji and regex is not minified properly using default
+ // // https://github.com/facebook/create-react-app/issues/2488
+ // ascii_only: true,
+ // },
+ // },
+ // // Use multi-process parallel running to improve the build speed
+ // // Default number of concurrent runs: os.cpus().length - 1
+ // parallel: true,
+ // // Enable file caching
+ // cache: true,
+ // sourceMap: shouldUseSourceMap,
+ // }),
+ // // This is only used in production mode
+ // new OptimizeCSSAssetsPlugin({
+ // cssProcessorOptions: {
+ // parser: safePostCssParser,
+ // map: shouldUseSourceMap
+ // ? {
+ // // `inline: false` forces the sourcemap to be output into a
+ // // separate file
+ // inline: false,
+ // // `annotation: true` appends the sourceMappingURL to the end of
+ // // the css file, helping the browser find the sourcemap
+ // annotation: true,
+ // }
+ // : false,
+ // },
+ // }),
+ // ],
+ // Automatically split vendor and commons
+ // https://twitter.com/wSokra/status/969633336732905474
+ // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
+ // splitChunks: {
+ // chunks: 'all',
+ // name: false,
+ // },
+ // splitChunks:{
+ // cacheGroups: {
+ // js: {
+ // name: 'js',
+ // test: /\.(js|mjs|jsx|ts|tsx)$/,
+ // chunks: 'all',
+ // enforce: true
+ // },
+ // css: {
+ // name: 'css',
+ // test: /\.s?css$/,
+ // chunks: 'all',
+ // enforce: true
+ // }
+ // },
+ // },
+ // Keep the runtime chunk seperated to enable long term caching
+ // https://twitter.com/wSokra/status/969679223278505985
+ // runtimeChunk: true,
+ runtimeChunk: false,
+ },
+ externals: bpkReactScriptsConfig.ssrExternals || [],
+ resolve: {
+ // This allows you to set a fallback for where Webpack should look for modules.
+ // We placed these paths second because we want `node_modules` to "win"
+ // if there are any conflicts. This matches Node resolution mechanism.
+ // https://github.com/facebook/create-react-app/issues/253
+ modules: ['node_modules'].concat(
+ // It is guaranteed to exist because we tweak it in `env.js`
+ process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
+ ),
+ // These are the reasonable defaults supported by the Node ecosystem.
+ // We also include JSX as a common component filename extension to support
+ // some tools, although we do not recommend using it, see:
+ // https://github.com/facebook/create-react-app/issues/290
+ // `web` extension prefixes have been added for better support
+ // for React Native Web.
+ extensions: paths.moduleFileExtensions
+ .map(ext => `.${ext}`)
+ .filter(ext => useTypeScript || !ext.includes('ts')),
+ alias: {
+ // Support React Native Web
+ // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
+ 'react-native': 'react-native-web',
+ },
+ plugins: [
+ // Adds support for installing with Plug'n'Play, leading to faster installs and adding
+ // guards against forgotten dependencies and such.
+ PnpWebpackPlugin,
+ // Prevents users from importing files from outside of src/ (or node_modules/).
+ // This often causes confusion because we only process files within src/ with babel.
+ // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
+ // please link the files into your node_modules/ and let module-resolution kick in.
+ // Make sure your source files are compiled, as they will not be processed in any way.
+ new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+ ],
+ },
+ resolveLoader: {
+ plugins: [
+ // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+ // from the current package.
+ PnpWebpackPlugin.moduleLoader(module),
+ ],
+ },
+ module: {
+ strictExportPresence: true,
+ rules: [
+ // Disable require.ensure as it's not a standard language feature.
+ { parser: { requireEnsure: false } },
+
+ // First, run the linter.
+ // It's important to do this before Babel processes the JS.
+ // {
+ // test: /\.(js|mjs|jsx)$/,
+ // enforce: 'pre',
+ // use: [
+ // {
+ // options: {
+ // formatter: require.resolve('react-dev-utils/eslintFormatter'),
+ // eslintPath: require.resolve('eslint'),
+ // // @remove-on-eject-begin
+ // baseConfig: {
+ // extends: [require.resolve('eslint-config-react-app')],
+ // settings: { react: { version: '999.999.999' } },
+ // },
+ // ignore: false,
+ // useEslintrc: false,
+ // // @remove-on-eject-end
+ // },
+ // loader: require.resolve('eslint-loader'),
+ // },
+ // ],
+ // include: paths.appSrc,
+ // },
+ {
+ // "oneOf" will traverse all following loaders until one will
+ // match the requirements. When no loader matches it will fall
+ // back to the "file" loader at the end of the loader list.
+ oneOf: [
+ {
+ test: new RegExp(
+ `(^|/)(${(bpkReactScriptsConfig.amdExcludes || [])
+ .concat('lodash')
+ .join('|')})(/|.|$)`
+ ),
+ parser: {
+ amd: false,
+ },
+ },
+ // "url" loader works like "file" loader except that it embeds assets
+ // smaller than specified limit in bytes as data URLs to avoid requests.
+ // A missing `test` is equivalent to a match.
+ {
+ test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+ loader: require.resolve('url-loader'),
+ options: {
+ limit: 10000,
+ name: 'static/media/[name].[hash:8].[ext]',
+ },
+ },
+ // Process application JS with Babel.
+ // The preset includes JSX, Flow, TypeScript, and some ESnext features.
+ {
+ test: /\.(js|mjs|jsx|ts|tsx)$/,
+ include: [
+ paths.appSrc,
+ backpackModulesRegex,
+ saddlebagModulesRegex,
+ ...customModuleRegexes,
+ ],
+ loader: require.resolve('babel-loader'),
+ options: {
+ customize: require.resolve(
+ 'babel-preset-react-app/webpack-overrides'
+ ),
+ // @remove-on-eject-begin
+ babelrc: false,
+ configFile: false,
+ presets: [require.resolve('babel-preset-react-app')],
+ // Make sure we have a unique cache identifier, erring on the
+ // side of caution.
+ // We remove this when the user ejects because the default
+ // is sane and uses Babel options. Instead of options, we use
+ // the react-scripts and babel-preset-react-app versions.
+ cacheIdentifier: getCacheIdentifier(
+ isEnvProduction
+ ? 'production'
+ : isEnvDevelopment && 'development',
+ [
+ 'babel-plugin-named-asset-import',
+ 'babel-preset-react-app',
+ 'react-dev-utils',
+ 'react-scripts',
+ ]
+ ),
+ // @remove-on-eject-end
+ plugins: [
+ [
+ require.resolve('babel-plugin-named-asset-import'),
+ {
+ loaderMap: {
+ svg: {
+ ReactComponent:
+ '@svgr/webpack?-prettier,-svgo![path]',
+ },
+ },
+ },
+ ],
+ ],
+ // 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,
+ cacheCompression: isEnvProduction,
+ compact: isEnvProduction,
+ },
+ },
+ // Process any JS outside of the app with Babel.
+ // Unlike the application JS, we only compile the standard ES features.
+ {
+ test: /\.(js|mjs)$/,
+ exclude: /@babel(?:\/|\\{1,2})runtime/,
+ loader: require.resolve('babel-loader'),
+ options: {
+ babelrc: false,
+ configFile: false,
+ compact: false,
+ presets: [
+ [
+ require.resolve('babel-preset-react-app/dependencies'),
+ { helpers: true },
+ ],
+ ],
+ cacheDirectory: true,
+ cacheCompression: isEnvProduction,
+ // @remove-on-eject-begin
+ cacheIdentifier: getCacheIdentifier(
+ isEnvProduction
+ ? 'production'
+ : isEnvDevelopment && 'development',
+ [
+ 'babel-plugin-named-asset-import',
+ 'babel-preset-react-app',
+ 'react-dev-utils',
+ 'react-scripts',
+ ]
+ ),
+ // @remove-on-eject-end
+ // If an error happens in a package, it's possible to be
+ // because it was compiled. Thus, we don't want the browser
+ // debugger to show the original code. Instead, the code
+ // being evaluated would be much more helpful.
+ sourceMaps: false,
+ },
+ },
+ // "postcss" loader applies autoprefixer to our CSS.
+ // "css" loader resolves paths in CSS and adds assets as dependencies.
+ // "style" loader turns CSS into JS modules that inject <style> tags.
+ // In production, we use MiniCSSExtractPlugin to extract that CSS
+ // to a file, but in development "style" loader enables hot editing
+ // of CSS.
+ // By default we support CSS Modules with the extension .module.css
+ {
+ test: {
+ and: [cssRegex, () => !cssModulesEnabled],
+ exclude: [backpackModulesRegex],
+ },
+ exclude: cssModuleRegex,
+ use: getStyleLoaders({
+ importLoaders: 1,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ }),
+ // Don't consider CSS imports dead code even if the
+ // containing package claims to have no side effects.
+ // Remove this when webpack adds a warning or an error for this.
+ // See https://github.com/webpack/webpack/issues/6571
+ sideEffects: true,
+ },
+ // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
+ // using the extension .module.css
+ {
+ test: [
+ cssModuleRegex,
+ {
+ and: [cssRegex, () => cssModulesEnabled],
+ },
+ {
+ and: [cssRegex, backpackModulesRegex],
+ },
+ ],
+ use: getStyleLoaders({
+ importLoaders: 1,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ modules: true,
+ getLocalIdent: getCSSModuleLocalIdent,
+ }),
+ },
+ // Opt-in support for SASS (using .scss or .sass extensions).
+ // By default we support SASS Modules with the
+ // extensions .module.scss or .module.sass
+ {
+ test: {
+ and: [sassRegex, () => !cssModulesEnabled],
+ exclude: [backpackModulesRegex],
+ },
+ exclude: sassModuleRegex,
+ use: getStyleLoaders(
+ {
+ importLoaders: 2,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ },
+ 'sass-loader',
+ {
+ functions: sassFunctions,
+ }
+ ),
+ // Don't consider CSS imports dead code even if the
+ // containing package claims to have no side effects.
+ // Remove this when webpack adds a warning or an error for this.
+ // See https://github.com/webpack/webpack/issues/6571
+ sideEffects: true,
+ },
+ // Adds support for CSS Modules, but using SASS
+ // using the extension .module.scss or .module.sass
+ {
+ test: [
+ sassModuleRegex,
+ {
+ and: [sassRegex, () => cssModulesEnabled],
+ },
+ {
+ and: [sassRegex, backpackModulesRegex],
+ },
+ ],
+ use: getStyleLoaders(
+ {
+ importLoaders: 2,
+ sourceMap: isEnvProduction && shouldUseSourceMap,
+ modules: true,
+ getLocalIdent: getCSSModuleLocalIdent,
+ },
+ 'sass-loader',
+ {
+ functions: sassFunctions,
+ }
+ ),
+ },
+ // "file" loader makes sure those assets get served by WebpackDevServer.
+ // When you `import` an asset, you get its (virtual) filename.
+ // In production, they would get copied to the `build` folder.
+ // This loader doesn't use a "test" so it will catch all modules
+ // that fall through the other loaders.
+ {
+ loader: require.resolve('file-loader'),
+ // Exclude `js` files to keep "css" loader working as it injects
+ // its runtime that would otherwise be processed through "file" loader.
+ // Also exclude `html` and `json` extensions so they get processed
+ // by webpacks internal loaders.
+ exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+ options: {
+ name: 'static/media/[name].[hash:8].[ext]',
+ },
+ },
+ // ** STOP ** Are you adding a new loader?
+ // Make sure to add the new loader(s) before the "file" loader.
+ ],
+ },
+ ],
+ },
+ plugins: [
+ // Generates an `index.html` file with the <script> injected.
+ // new HtmlWebpackPlugin(
+ // Object.assign(
+ // {},
+ // {
+ // inject: true,
+ // template: paths.appHtml,
+ // },
+ // isEnvProduction
+ // ? {
+ // minify: {
+ // removeComments: true,
+ // collapseWhitespace: true,
+ // removeRedundantAttributes: true,
+ // useShortDoctype: true,
+ // removeEmptyAttributes: true,
+ // removeStyleLinkTypeAttributes: true,
+ // keepClosingSlash: true,
+ // minifyJS: true,
+ // minifyCSS: true,
+ // minifyURLs: true,
+ // },
+ // }
+ // : undefined
+ // )
+ // ),
+ // Inlines the webpack runtime script. This script is too small to warrant
+ // a network request.
+ // isEnvProduction &&
+ // shouldInlineRuntimeChunk &&
+ // new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+ // Makes some environment variables available in index.html.
+ // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+ // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+ // In production, it will be an empty string unless you specify "homepage"
+ // in `package.json`, in which case it will be the pathname of that URL.
+ // In development, this will be an empty string.
+ // new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
+ // This gives some necessary context to module not found errors, such as
+ // the requesting resource.
+ new ModuleNotFoundPlugin(paths.appPath),
+ // Makes some environment variables available to the JS code, for example:
+ // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
+ // It is absolutely essential that NODE_ENV is set to production
+ // during a production build.
+ // Otherwise React will be compiled in the very slow development mode.
+ new webpack.DefinePlugin(env.stringified),
+ // This is necessary to emit hot updates (currently CSS only):
+ isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+ // Watcher doesn't work well if you mistype casing in a path so we use
+ // a plugin that prints an error when you attempt to do this.
+ // See https://github.com/facebook/create-react-app/issues/240
+ isEnvDevelopment && new CaseSensitivePathsPlugin(),
+ // If you require a missing module and then `npm install` it, you still have
+ // to restart the development server for Webpack to discover it. This plugin
+ // makes the discovery automatic so you don't have to restart.
+ // See https://github.com/facebook/create-react-app/issues/186
+ isEnvDevelopment &&
+ new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+ isEnvProduction &&
+ new MiniCssExtractPlugin({
+ // Options similar to the same options in webpackOptions.output
+ // both options are optional
+ // filename: 'static/css/[name].[contenthash:8].css',
+ filename: 'ssr.css',
+ // chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
+ }),
+ // Generate a manifest file which contains a mapping of all asset filenames
+ // to their corresponding output file so that tools can pick it up without
+ // having to parse `index.html`.
+ // new ManifestPlugin({
+ // fileName: 'asset-manifest.json',
+ // publicPath: publicPath,
+ // }),
+ // Moment.js is an extremely popular library that bundles large locale files
+ // by default due to how Webpack interprets its code. This is a practical
+ // solution that requires the user to opt into importing specific locales.
+ // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
+ // You can remove this if you don't use Moment.js:
+ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+ // Generate a service worker script that will precache, and keep up to date,
+ // the HTML & assets that are part of the Webpack build.
+ // isEnvProduction &&
+ // new WorkboxWebpackPlugin.GenerateSW({
+ // clientsClaim: true,
+ // exclude: [/\.map$/, /asset-manifest\.json$/],
+ // importWorkboxFrom: 'cdn',
+ // navigateFallback: publicUrl + '/index.html',
+ // navigateFallbackBlacklist: [
+ // // Exclude URLs starting with /_, as they're likely an API call
+ // new RegExp('^/_'),
+ // // Exclude URLs containing a dot, as they're likely a resource in
+ // // public/ and not a SPA route
+ // new RegExp('/[^/]+\\.[^/]+$'),
+ // ],
+ // }),
+ // TypeScript type checking
+ useTypeScript &&
+ new ForkTsCheckerWebpackPlugin({
+ typescript: resolve.sync('typescript', {
+ basedir: paths.appNodeModules,
+ }),
+ async: false,
+ checkSyntacticErrors: true,
+ tsconfig: paths.appTsConfig,
+ compilerOptions: {
+ module: 'esnext',
+ moduleResolution: 'node',
+ resolveJsonModule: true,
+ isolatedModules: true,
+ noEmit: true,
+ jsx: 'preserve',
+ },
+ reportFiles: [
+ '**',
+ '!**/*.json',
+ '!**/__tests__/**',
+ '!**/?(*.)(spec|test).*',
+ '!**/src/setupProxy.*',
+ '!**/src/setupTests.*',
+ ],
+ watch: paths.appSrc,
+ silent: true,
+ formatter: typescriptFormatter,
+ }),
+ ].filter(Boolean),
+ // Some libraries import Node modules but don't use them in the browser.
+ // Tell Webpack to provide empty mocks for them so importing them works.
+ // node: {
+ // dgram: 'empty',
+ // fs: 'empty',
+ // net: 'empty',
+ // tls: 'empty',
+ // child_process: 'empty',
+ // },
+ // Turn off performance processing because we utilize
+ // our own hints via the FileSizeReporter
+ performance: false,
+ };
+};
diff --git a/packages/react-scripts/migrating-from-v6-to-v7.md b/packages/react-scripts/migrating-from-v6-to-v7.md
new file mode 100644
index 0000000000000000000000000000000000000000..a7780ecc8c90afb57120564a92e6d35618db67ce
--- /dev/null
+++ b/packages/react-scripts/migrating-from-v6-to-v7.md
@@ -0,0 +1,177 @@
+# Migrating from v6 to v7
+
+Inside any created `backpack-react-scripts` project that has not been ejected, run:
+
+```
+npm install --save backpack-react-scripts@^7
+```
+
+## Breaking Changes
+
+Like any major release, `backpack-react-scripts@7` contains a few breaking changes. At least one of them will affect every user, so please scan over these sections to see what is relevant to you.
+
+### ESLint and Stylelint are no longer included by default, you have to manage them yourself
+
+We have decoupled ESLint and Stylelint from this release. This is because the rate at which our configs (`eslint-config-skyscanner` and `stylelint-config-skyscanner`) change is much faster than the underlying functionality of `create-react-app`, causing unecessary churn.
+
+That means that your `npm run lint:js` and `npm run lint:scss` scripts will no longer work. To fix this, install them yourself using:
+
+ESLint
+
+**Note:** If your codebase uses `eslint-config-skyscanner-with-prettier` then you don't need to do anything.
+
+```
+npx install-peerdeps --dev eslint-config-skyscanner@^3
+```
+
+Stylelint
+
+```
+npx install-peerdeps --dev stylelint-config-skyscanner@^1
+```
+
+### Polyfills for IE 9, IE 10, and IE 11 are no longer included by default (but you can opt in!)
+
+We have dropped default support for Internet Explorer 9, 10, and 11. If you still need to support these browsers, follow the instructions below.
+
+First, install `react-app-polyfill`:
+
+```
+npm install react-app-polyfill
+```
+
+Next, place one of the following lines at the very top of `src/index.js`:
+
+```
+import 'react-app-polyfill/ie9'; // For IE 9-11 support
+import 'react-app-polyfill/ie11'; // For IE 11 support
+```
+
+You can read more about [these polyfills here](https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill).
+
+### Dynamic `import()` of a CommonJS module now has a `.default` property
+
+[Webpack 4 changed the behavior of import()](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) to be closer in line with the specification.
+
+Previously, importing a CommonJS module did not require you specify the default export. In most cases, this is now required.
+If you see errors in your application about `... is not a function`, you likely need to update your dynamic import, e.g.:
+
+```
+const throttle = await import('lodash/throttle');
+// replace with
+const throttle = await import('lodash/throttle').then(m => m.default);
+```
+
+### `require.ensure()` is superseded by dynamic `import()`
+
+We previously allowed code splitting with a webpack-specific directive, `require.ensure()`. It is now disabled in favor of `import()`. To switch to `import()`, follow the examples below:
+
+Single Module
+
+```
+require.ensure(['module-a'], function() {
+ var a = require('module-a');
+ // ...
+});
+
+// Replace with:
+import('module-a').then(a => {
+ // ...
+});
+```
+
+Multiple Module
+
+```
+require.ensure(['module-a', 'module-b'], function() {
+ var a = require('module-a');
+ var b = require('module-b');
+ // ...
+});
+
+// Replace with:
+Promise.all([import('module-a'), import('module-b')]).then(([a, b]) => {
+ // ...
+});
+```
+
+### The default Jest environment was changed to `jsdom`
+
+Look at the `test` entry in the `scripts` section of your package.json.
+Here's a table how to change it from "before" and "after", depending on what you have there:
+
+| 6.x (if you have this...) | 7.x (...change it to this!) |
+| -------------------------------- | ------------------------------- |
+| `react-scripts test --env=jsdom` | `react-scripts test` |
+| `react-scripts test` | `react-scripts test --env=node` |
+
+### Object proxy configuration is superseded by `src/setupProxy.js`
+
+To check if action is required, look for the `proxy` key in `package.json` and follow this:
+
+1. I couldn't find a `proxy` key in `package.json`
+ - No action is required!
+2. The value of `proxy` is a string (e.g. `http://localhost:5000`)
+ - No action is required!
+3. The value of `proxy` is an object
+ - Follow the migration instructions below.
+
+**It's worth highlighting: if your `proxy` field is a `string`, e.g. `http://localhost:5000`, or you don't have it, skip this section. This feature is still supported and has the same behavior.**
+
+If your `proxy` is an object, that means you are using the advanced proxy configuration. It has become fully customizable so we removed the limited support for the object-style configuration. Here's how to recreate it.
+
+First, install `http-proxy-middleware` using npm or Yarn:
+
+```
+npm install http-proxy-middleware
+```
+
+Next, create `src/setupProxy.js` and place the following contents in it:
+
+```
+const proxy = require('http-proxy-middleware');
+
+module.exports = function(app) {
+ // ...
+};
+```
+
+Now, migrate each entry in your `proxy` object one by one, e.g.:
+
+```
+"proxy": {
+ "/api": {
+ "target": "http://localhost:5000/"
+ },
+ "/*.svg": {
+ "target": "http://localhost:5000/"
+ }
+}
+```
+
+Place entries into `src/setupProxy.js` like so:
+
+```
+const proxy = require('http-proxy-middleware');
+
+module.exports = function(app) {
+ app.use(proxy('/api', { target: 'http://localhost:5000/' }));
+ app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }));
+};
+```
+
+You can also use completely custom logic there now! This wasn't possible before.
+
+### `.mjs` file extension support is removed
+
+Change the extension of any files in your project using `.mjs` to just `.js`.
+
+It was removed because of inconsistent support from underlying tools. We will add it back after it stops being experimental, and Jest gets built-in support for it.
+
+### `PropTypes` definitions are now removed in production
+
+Normally, this shouldn't affect your logic and should make the resulting bundle smaller. However, you may be relying on PropTypes definition for production logic. This is not recommended, and will break now. If a library does it, one possible solution is to file an issue in it with a proposal to use a different field (not propTypes) to signal that the declaration needs to be retained.
+
+### Node 6 is no longer supported
+
+Please upgrade to Node 8 (LTS) or later.
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 21471be46d4aa14307892da26792be4960ff568f..3f1306c4fa9fefaa253cde1e6a4a406208ac4221 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -1,15 +1,12 @@
{
- "name": "react-scripts",
- "version": "2.1.3",
- "description": "Configuration and scripts for Create React App.",
- "repository": "facebook/create-react-app",
+ "name": "backpack-react-scripts",
+ "version": "7.0.4",
+ "description": "Backpack configuration and scripts for Create React App.",
+ "repository": "Skyscanner/backpack-react-scripts",
"license": "MIT",
"engines": {
"node": ">=6"
},
- "bugs": {
- "url": "https://github.com/facebook/create-react-app/issues"
- },
"files": [
"bin",
"config",
@@ -27,24 +24,17 @@
"@babel/core": "7.2.2",
"@svgr/webpack": "2.4.1",
"babel-core": "7.0.0-bridge.0",
- "babel-eslint": "9.0.0",
"babel-jest": "23.6.0",
"babel-loader": "8.0.5",
"babel-plugin-named-asset-import": "^0.3.0",
"babel-preset-react-app": "^7.0.0",
"bfj": "6.1.1",
+ "bpk-mixins": "^17.11.31",
"case-sensitive-paths-webpack-plugin": "2.1.2",
"chalk": "2.4.2",
"css-loader": "1.0.0",
"dotenv": "6.0.0",
"dotenv-expand": "4.2.0",
- "eslint": "5.12.0",
- "eslint-config-react-app": "^3.0.6",
- "eslint-loader": "2.1.1",
- "eslint-plugin-flowtype": "2.50.1",
- "eslint-plugin-import": "2.14.0",
- "eslint-plugin-jsx-a11y": "6.1.2",
- "eslint-plugin-react": "7.11.1",
"file-loader": "2.0.0",
"fork-ts-checker-webpack-plugin-alt": "0.4.14",
"fs-extra": "7.0.1",
@@ -53,9 +43,11 @@
"jest": "23.6.0",
"jest-pnp-resolver": "1.0.2",
"jest-resolve": "23.6.0",
+ "lodash": "^4.17.11",
"mini-css-extract-plugin": "0.4.3",
+ "node-sass": "4.12.0",
"optimize-css-assets-webpack-plugin": "5.0.1",
- "pnp-webpack-plugin": "1.2.1",
+ "pnp-webpack-plugin": "1.1.0",
"postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0",
"postcss-preset-env": "6.5.0",
@@ -73,11 +65,16 @@
"workbox-webpack-plugin": "3.6.3"
},
"devDependencies": {
- "react": "^16.3.2",
- "react-dom": "^16.3.2"
+ "bpk-component-button": "^2.1.36",
+ "bpk-component-code": "^1.1.40",
+ "bpk-component-text": "^1.0.96",
+ "bpk-mixins": "^17.11.31",
+ "bpk-stylesheets": "^3.2.143",
+ "react": "16.4.2",
+ "react-dom": "16.4.2"
},
"optionalDependencies": {
- "fsevents": "1.2.4"
+ "fsevents": "1.2.9"
},
"browserslist": [
">0.2%",
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index 35cbfc1507371517749948defb7f7eab2cb39b28..d6effe0b0c75b42c2414a96b6b0e7032e392c476 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/packages/react-scripts/scripts/build.js
@@ -37,6 +37,7 @@ const fs = require('fs-extra');
const webpack = require('webpack');
const bfj = require('bfj');
const configFactory = require('../config/webpack.config');
+const ssrConfigFactory = require('../config/webpack.config.ssr');
const paths = require('../config/paths');
const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
@@ -66,6 +67,11 @@ const writeStatsJson = argv.indexOf('--stats') !== -1;
// Generate configuration
const config = configFactory('production');
+const ssrConfig = ssrConfigFactory('production');
+
+// If an SSR entry file is found, lets make use of webpacks multi-compiler
+// functionality to bundle it in parallel
+const compileSsr = fs.existsSync(paths.appSsrJs);
// We require that you explicitly set browsers and do not fall back to
// browserslist defaults.
@@ -87,6 +93,26 @@ checkBrowsers(paths.appPath, isInteractive)
})
.then(
({ stats, previousFileSizes, warnings }) => {
+ // We don't want to make too many changes as it makes syncing back
+ // with upstream a pain. The rest of the code in this function relies on
+ // `config` and `stats` being an object as opposed to an array (from
+ // webpack's multi-compiler feature.)
+ if (compileSsr) {
+ stats = stats.stats[0];
+ }
+
+ // The SSR config still omits a css file - it's not yet possible to omit
+ // file output in ExtractTextPlugin. This is not needed so lets clean
+ // it up to avoid confusion.
+ const ssrCssPath = path.join(paths.appBuild, 'ssr.css');
+ const ssrCssMapPath = path.join(paths.appBuild, 'ssr.css.map');
+ if (fs.existsSync(ssrCssPath)) {
+ fs.unlinkSync(ssrCssPath);
+ }
+ if (fs.existsSync(ssrCssMapPath)) {
+ fs.unlinkSync(ssrCssMapPath);
+ }
+
if (warnings.length) {
console.log(chalk.yellow('Compiled with warnings.\n'));
console.log(warnings.join('\n\n'));
@@ -143,7 +169,13 @@ checkBrowsers(paths.appPath, isInteractive)
function build(previousFileSizes) {
console.log('Creating an optimized production build...');
- let compiler = webpack(config);
+ let finalConfig = config;
+
+ if (compileSsr) {
+ finalConfig = [config, ssrConfig];
+ }
+
+ let compiler = webpack(finalConfig);
return new Promise((resolve, reject) => {
compiler.run((err, stats) => {
let messages;
diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js
index 3f85006866834e6c2ce43392df5ca19bb6f1352a..ada2c4075ca9ed8c7c9abed9ebc49d5a6005b482 100644
--- a/packages/react-scripts/scripts/eject.js
+++ b/packages/react-scripts/scripts/eject.js
@@ -220,10 +220,10 @@ inquirer
};
// Add ESlint config
- console.log(` Adding ${cyan('ESLint')} configuration`);
- appPackage.eslintConfig = {
- extends: 'react-app',
- };
+ // console.log(` Adding ${cyan('ESLint')} configuration`);
+ // appPackage.eslintConfig = {
+ // extends: 'react-app',
+ // };
fs.writeFileSync(
path.join(appPath, 'package.json'),
diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js
index 771f6dbf490656801cf10e0c00df299cad2e344f..8a8e8c137c9ecf60895f7d59853cbee62b192602 100644
--- a/packages/react-scripts/scripts/init.js
+++ b/packages/react-scripts/scripts/init.js
@@ -102,9 +102,9 @@ module.exports = function(
};
// Setup the eslint config
- appPackage.eslintConfig = {
- extends: 'react-app',
- };
+ // appPackage.eslintConfig = {
+ // extends: 'react-app',
+ // };
// Setup the browsers list
appPackage.browserslist = defaultBrowsers;
@@ -159,12 +159,12 @@ module.exports = function(
if (useYarn) {
command = 'yarnpkg';
- args = ['add'];
+ args = ['add', `--dev`];
} else {
command = 'npm';
- args = ['install', '--save', verbose && '--verbose'].filter(e => e);
+ args = ['install', '--save-dev', verbose && '--verbose'].filter(e => e);
}
- args.push('react', 'react-dom');
+ args.push('react@16.4.2', 'react-dom@16.4.2');
// Install additional template dependencies, if present
const templateDependenciesPath = path.join(
@@ -184,16 +184,21 @@ module.exports = function(
// Install react and react-dom for backward compatibility with old CRA cli
// which doesn't install react and react-dom along with react-scripts
// or template is presetend (via --internal-testing-template)
- if (!isReactInstalled(appPackage) || template) {
- console.log(`Installing react and react-dom using ${command}...`);
- console.log();
+ // if (!isReactInstalled(appPackage) || template) {
+ // console.log(`Installing react and react-dom using ${command}...`);
+ // console.log();
- const proc = spawn.sync(command, args, { stdio: 'inherit' });
- if (proc.status !== 0) {
- console.error(`\`${command} ${args.join(' ')}\` failed`);
- return;
- }
+ console.log(
+ `Installing ${chalk.cyan('Backpack')} dependencies using ${command}...`
+ );
+ console.log();
+
+ const proc = spawn.sync(command, args, { stdio: 'inherit' });
+ if (proc.status !== 0) {
+ console.error(`\`${command} ${args.join(' ')}\` failed`);
+ return;
}
+ // }
if (useTypeScript) {
verifyTypeScriptSetup();
@@ -258,11 +263,11 @@ module.exports = function(
console.log('Happy hacking!');
};
-function isReactInstalled(appPackage) {
- const dependencies = appPackage.dependencies || {};
+// function isReactInstalled(appPackage) {
+// const dependencies = appPackage.dependencies || {};
- return (
- typeof dependencies.react !== 'undefined' &&
- typeof dependencies['react-dom'] !== 'undefined'
- );
-}
+// return (
+// typeof dependencies.react !== 'undefined' &&
+// typeof dependencies['react-dom'] !== 'undefined'
+// );
+// }
diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js
index 58c2ad488128a83b758fc4bb87318cc04ca608f3..c8e9cafacdd78fa2baa0eb765da500ff3c5acfca 100644
--- a/packages/react-scripts/scripts/utils/createJestConfig.js
+++ b/packages/react-scripts/scripts/utils/createJestConfig.js
@@ -11,6 +11,17 @@ const fs = require('fs');
const chalk = require('chalk');
const paths = require('../../config/paths');
+const pkgJson = require(paths.appPackageJson);
+const bpkReactScriptsConfig = pkgJson['backpack-react-scripts'] || {};
+
+const includePrefixes = bpkReactScriptsConfig.babelIncludePrefixes || [];
+includePrefixes.unshift('bpk-');
+includePrefixes.unshift('saddlebag-');
+
+const transformIgnorePattern = `[/\\\\]node_modules[/\\\\](?!${includePrefixes.join(
+ '|'
+)}).+\\.(js|jsx|mjs)$`;
+
module.exports = (resolve, rootDir, isEjecting) => {
// Use this instead of `paths.testsSetup` to avoid putting
// an absolute filename into configuration after ejecting.
@@ -48,18 +59,22 @@ module.exports = (resolve, rootDir, isEjecting) => {
'^.+\\.(js|jsx|ts|tsx)$': isEjecting
? '<rootDir>/node_modules/babel-jest'
: resolve('config/jest/babelTransform.js'),
- '^.+\\.css$': resolve('config/jest/cssTransform.js'),
- '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': resolve(
+ // '^.+\\.css$': resolve('config/jest/cssTransform.js'),
+ // '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': resolve(
+ '^(?!.*\\.(js|jsx|ts|tsx|json)$)': resolve(
'config/jest/fileTransform.js'
),
},
transformIgnorePatterns: [
- '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
- '^.+\\.module\\.(css|sass|scss)$',
+ // '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+ transformIgnorePattern,
+ // '^.+\\.module\\.(css|sass|scss)$',
+ '^.+\\.(css|sass|scss)$',
],
moduleNameMapper: {
'^react-native$': 'react-native-web',
- '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+ // '^.+\\.module\\.(css|sass|scss)$': 'identity-obj-proxy',
+ '^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
},
moduleFileExtensions: [...paths.moduleFileExtensions, 'node'].filter(
ext => !ext.includes('mjs')
diff --git a/packages/react-scripts/scripts/utils/verifyPackageTree.js b/packages/react-scripts/scripts/utils/verifyPackageTree.js
index 9b8a6a03486cff394455b8bd019c323a8685f786..86252b2581c795629634719f3ff528f6e6729efa 100644
--- a/packages/react-scripts/scripts/utils/verifyPackageTree.js
+++ b/packages/react-scripts/scripts/utils/verifyPackageTree.js
@@ -20,10 +20,10 @@ function verifyPackageTree() {
// These are packages most likely to break in practice.
// See https://github.com/facebook/create-react-app/issues/1795 for reasons why.
// I have not included Babel here because plugins typically don't import Babel (so it's not affected).
- 'babel-eslint',
+ // 'babel-eslint',
'babel-jest',
'babel-loader',
- 'eslint',
+ // 'eslint',
'jest',
'webpack',
'webpack-dev-server',
diff --git a/packages/react-scripts/template/.editorconfig b/packages/react-scripts/template/.editorconfig
new file mode 100644
index 0000000000000000000000000000000000000000..6cd012bcc831e94d72b9a761c1a8a6ee67e47884
--- /dev/null
+++ b/packages/react-scripts/template/.editorconfig
@@ -0,0 +1,10 @@
+# http://editorconfig.org/
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
diff --git a/packages/react-scripts/template/.template.dependencies.json b/packages/react-scripts/template/.template.dependencies.json
new file mode 100644
index 0000000000000000000000000000000000000000..52ba7ce817316c048ea24c4864f1a2a45b0ede68
--- /dev/null
+++ b/packages/react-scripts/template/.template.dependencies.json
@@ -0,0 +1,9 @@
+{
+ "dependencies": {
+ "bpk-component-button": "*",
+ "bpk-component-code": "*",
+ "bpk-component-text": "*",
+ "bpk-mixins": "*",
+ "bpk-stylesheets": "*"
+ }
+}
diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 9d9614c4fd32e65dcbefff34b758d7824b397181..e6bd19fe6770fe70570e8dab0bce2ab3b9bcc25a 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -1,68 +1,202 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+> _This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) +
+> [backpack-react-scripts](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts)._
+> It is very similar to one that you would create using [Create React App](https://github.com/facebook/create-react-app)
+> without [backpack-react-scripts](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts),
+> so please refer to [it's documentation](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md)
+> for more usage information.
-## Available Scripts
+# [_Put your project name here_]
-In the project directory, you can run:
+[_Add a brief description of your project here._]
-### `npm start`
+## npm script commands
-Runs the app in the development mode.<br>
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+`backpack-react-scripts` is listed as a `devDependency` in your [package.json](./package.json) and exposes the following npm scripts:
-The page will reload if you make edits.<br>
-You will also see any lint errors in the console.
+- `npm start`: Runs the app in development mode. Open [http://localhost:3000/](http://localhost:3000/) to view it in the browser. The page will reload if you make edits. You will see the build errors in the console.
+- `npm test`: Runs the test watcher in an interactive mode. By default, runs tests related to files changes since the last commit.
+- `npm run build`: Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Your app is ready to be deployed!
-### `npm test`
+## Excluding React / ReactDOM from the output bundle
-Launches the test runner in the interactive watch mode.<br>
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Sometimes you need to exclude React (or any module) from your app's bundle for performance / code sharing reasons (i.e. if it's on the page already). To do this, add the following to your `package.json`:
-### `npm run build`
+```json
+{
+ ...
+ "backpack-react-scripts": {
+ "externals": {
+ "react": "React",
+ "react-dom": "ReactDOM"
+ }
+ }
+}
+```
-Builds the app for production to the `build` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Now when you run `npm run build`, every `'react'` / `'react-dom'` import is replaced with `window.React` / `window.ReactDOM`. You'll also notice that the output bundle size is dramatically smaller. _Note:_ You are responsible for ensuring that React is loaded before your app is!
-The build is minified and the filenames include the hashes.<br>
-Your app is ready to be deployed!
+## Server Side Rendering (SSR)
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+Most of the time you wont need server-side rendering, however if you need to generate your app's HTML on the server and send the markup down on the initial request to improve perceived page load or to allow search engines to crawl your pages for SEO purposes, then create a file named `ssr.js` in your app's root folder:
-### `npm run eject`
+```
+my-app/
+ src/
+ ...
+ index.js
+ ssr.js // <-- create this file
+```
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+Inside `ssr.js`, export the components that you wish to expose for server-side rendering - the file contents should look something like this:
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+```js
+import App from './App';
-Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+export default { App };
+```
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+Run `npm run build` as you would to build a production browser bundle - you should notice an additional `ssr.js` file in the output directory:
-## Learn More
+```
+my-app/
+ build/
+ static/
+ asset-manifest.json
+ favicon.ico
+ index.html
+ ssr.js // <-- new output file
+```
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+This file can now be required and pre-rendered on the server like so (rough implementation):
-To learn React, check out the [React documentation](https://reactjs.org/).
+`server.js`:
-### Code Splitting
+```js
+const React = require('react');
+const express = require('express');
+const ReactDOMServer = require('react-dom/server');
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+const components = require('./my-app/build/ssr').default;
-### Analyzing the Bundle Size
+const router = express.Router();
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+router.get('/', (req, res) => {
+ const element = React.createElement(components.App);
+ const html = ReactDOMServer.renderToString(element);
-### Making a Progressive Web App
+ res.render('index', { html });
+});
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+module.exports = router;
+```
-### Advanced Configuration
+`index.html`:
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+```html
+<div id="root">{{{html}}}</div>
+```
-### Deployment
+If you call `ReactDOM.render()` on a node that already has this server-rendered markup (`<div id="root">` in the example above), React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+**Note:** Your external module imports (anything you import from `node_modules/` i.e. `import React from 'react';`) are bundled into the `ssr.js` output file. If you want to exclude any external modules from the output file for performance / code sharing reasons (i.e. if it's being required elsewhere and is already in memory) you can do so by adding the following to your `package.json`:
-### `npm run build` fails to minify
+```json
+{
+ ...
+ "backpack-react-scripts": {
+ "ssrExternals": [
+ "react",
+ "react-dom"
+ ]
+ }
+}
+```
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
+## Compiling `node_modules` dependencies that contain JSX
+
+By default, modules imported from your app's `node_modules` directory will get compiled by Babel with the caveat that only standard ES features are supported. If you need to compile modules that contain non-standard ES features, including JSX, you can use the following:
+
+```json
+{
+ ...
+ "backpack-react-scripts": {
+ "babelIncludePrefixes": [
+ "my-module-prefix-",
+ "some-module"
+ ]
+ }
+}
+```
+
+The above example assumes that the module you want to compile is named with the prefix `my-module-prefix-` and a module with the name `some-module`. All entries in this array act as prefixes. It is used by all Webpack configurations as well as the Jest configuration — if you want to avoid compiling a dependency in tests, you should mock it.
+
+## Disabling AMD parsing for certain modules
+
+If you need to disable AMD module support for whatever reason, you can add the following to your `package.json`:
+
+```json
+{
+ ...
+ "backpack-react-scripts": {
+ "amdExcludes": [
+ "globalize"
+ ]
+ }
+}
+```
+
+The above example disables AMD support for the `globalize` dependency and overcomes issues such as:
+
+```sh
+Failed to compile.
+./node_modules/globalize/dist/globalize.js
+Module not found: Can't resolve 'cldr' in './node_modules/globalize/dist'
+```
+
+## Cross-origin loading of dynamic chunks
+
+You can configure [cross-origin loading](https://webpack.js.org/configuration/output/#output-crossoriginloading) of dynamic chunks like so:
+
+```json
+ "backpack-react-scripts": {
+ "crossOriginLoading": "anonymous"
+ }
+```
+
+> **Note:** `lodash` is disabled by default.
+
+## CSS Modules
+
+All Sass files are by default treated as [CSS Modules](https://github.com/css-modules/css-modules). You can opt out of this behaviour using the following config option:
+
+```
+"backpack-react-scripts": {
+ "cssModules": false
+}
+```
+
+If you decide to opt out, Sass files will not be treated as CSS Modules by default. However, you can opt-in on a per-file basis using the naming convention: `*.module.scss`.
+
+For example, with `cssModules` set to `false`:
+
+- The file `App.scss` will not be treated as CSS Module
+- The file `App.module.scss` _will_ be treated as CSS Module
+
+This allows you to upgrade your project file by file to CSS Modules.
+
+> Backpack components will _always_ be treated as CSS Modules, even if you opt out
+
+## Upgrading `backpack-react-scripts`
+
+The [Backpack team](mailto:backpack@skyscanner.net) provide ongoing maintenance and bugfixes to `backpack-react-scripts`. Please refer to
+[it's changelog](https://github.com/Skyscanner/backpack-react-scripts/tree/master/packages/react-scripts/CHANGELOG.md) for upgrade guides.
+
+## Adding your own custom build configuration
+
+If you're finding the need to customise the configuration of `backpack-react-scripts`, then please get in touch with the [Backpack team](mailto:backpack@skyscanner.net) - we are open to contributions.
+
+If this is unsuitable, then you can always run `npm run eject` which copies all the configuration files and the transitive dependencies (Webpack, Babel, etc) right into your project so you have full control over them. Commands like `npm start` and `npm run build` will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own.
+
+**Note: this is a one-way operation - once you eject, you can’t go back!**
+
+Please don't do this if you don't have to - the curated feature set is there to promote standardisation across Skyscanner's front-end stack.
diff --git a/packages/react-scripts/template/public/index.html b/packages/react-scripts/template/public/index.html
index 323182f3920a4d02bf8d1a4212056571bd604487..350191cc3b7c699e6e43a1bf846a3af3c51c40ee 100644
--- a/packages/react-scripts/template/public/index.html
+++ b/packages/react-scripts/template/public/index.html
@@ -3,11 +3,12 @@
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+ <meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
- <meta name="theme-color" content="#000000" />
+ <meta name="theme-color" content="#00b2d6" />
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -22,7 +23,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
- <title>React App</title>
+ <title>Backpack App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/packages/react-scripts/template/public/manifest.json b/packages/react-scripts/template/public/manifest.json
index 1f2f141fafdeb1d31d85b008ec5132840c5e6362..4c67f5809684c5dd219d69389abd0e43f53aff1f 100644
--- a/packages/react-scripts/template/public/manifest.json
+++ b/packages/react-scripts/template/public/manifest.json
@@ -1,6 +1,6 @@
{
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Backpack App",
+ "name": "Welcome to React + Backpack",
"icons": [
{
"src": "favicon.ico",
@@ -10,6 +10,6 @@
],
"start_url": ".",
"display": "standalone",
- "theme_color": "#000000",
+ "theme_color": "#00b2d6",
"background_color": "#ffffff"
}
diff --git a/packages/react-scripts/template/src/App.css b/packages/react-scripts/template/src/App.css
deleted file mode 100644
index 92f956e804021ea84d6bd69a97d286cda08b194d..0000000000000000000000000000000000000000
--- a/packages/react-scripts/template/src/App.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 40vmin;
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/packages/react-scripts/template/src/App.js b/packages/react-scripts/template/src/App.js
deleted file mode 100644
index 7e261ca47e6b4fd1be15ee98d59d9ff2c6779f1e..0000000000000000000000000000000000000000
--- a/packages/react-scripts/template/src/App.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-class App extends Component {
- render() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
- }
-}
-
-export default App;
diff --git a/packages/react-scripts/template/src/App.jsx b/packages/react-scripts/template/src/App.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..6d2002c4f298459263c74a62c2c568d03c398f05
--- /dev/null
+++ b/packages/react-scripts/template/src/App.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { BpkCode } from 'bpk-component-code';
+import BpkButton from 'bpk-component-button';
+import BpkText from 'bpk-component-text';
+
+import STYLES from './App.scss';
+
+const c = className => STYLES[className] || 'UNKNOWN';
+
+const App = () => (
+ <div className={c('App')}>
+ <header className={c('App__header')}>
+ <div className={c('App__header-inner')}>
+ <BpkText tagName="h1" textStyle="xxl" className={c('App__heading')}>Welcome to React + Backpack</BpkText>
+ </div>
+ </header>
+ <main className={c('App__main')}>
+ <BpkText tagName="p" className={c('App__text')}>
+ To get started, edit <BpkCode>src/App.jsx</BpkCode> and save to reload.
+ </BpkText>
+ <BpkButton onClick={() => alert('It works!')}>Click me</BpkButton>
+ </main>
+ </div>
+);
+
+export default App;
diff --git a/packages/react-scripts/template/src/App.scss b/packages/react-scripts/template/src/App.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b51fe7a70f86dd3db1ce7770bdbc9d4a7461dca
--- /dev/null
+++ b/packages/react-scripts/template/src/App.scss
@@ -0,0 +1,45 @@
+@import '~bpk-mixins';
+
+@mixin container {
+ max-width: $bpk-breakpoint-desktop;
+ margin: 0 auto;
+}
+
+.App {
+ text-align: center;
+
+ &__header {
+ padding: $bpk-spacing-lg * 2;
+ background-color: $bpk-color-sky-blue;
+ background-image: $bpk-primary-gradient;
+ color: $bpk-color-white;
+
+ @include bpk-box-shadow-sm;
+
+ @include bpk-breakpoint-mobile {
+ padding: $bpk-spacing-xl;
+ }
+ }
+
+ &__header-inner {
+ @include container;
+ }
+
+ &__main {
+ padding: $bpk-spacing-xxl;
+
+ @include container;
+
+ @include bpk-breakpoint-mobile {
+ padding: $bpk-spacing-base;
+ }
+ }
+
+ &__heading {
+ margin-bottom: $bpk-spacing-sm;
+ }
+
+ &__text {
+ margin-bottom: $bpk-spacing-sm;
+ }
+}
diff --git a/packages/react-scripts/template/src/App.test.js b/packages/react-scripts/template/src/App.test.js
deleted file mode 100644
index a754b201bf9c6caf5271293588189fb4210f99d1..0000000000000000000000000000000000000000
--- a/packages/react-scripts/template/src/App.test.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-it('renders without crashing', () => {
- const div = document.createElement('div');
- ReactDOM.render(<App />, div);
- ReactDOM.unmountComponentAtNode(div);
-});
diff --git a/packages/react-scripts/template/src/App.test.jsx b/packages/react-scripts/template/src/App.test.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..831daeaabed0d74f29cf072fb15101ee5d4c494a
--- /dev/null
+++ b/packages/react-scripts/template/src/App.test.jsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import App from './App';
+
+describe('App', () => {
+ it('renders without crashing', () => {
+ const div = document.createElement('div');
+
+ ReactDOM.render(<App />, div);
+ ReactDOM.unmountComponentAtNode(div);
+ });
+});
diff --git a/packages/react-scripts/template/src/index.css b/packages/react-scripts/template/src/index.css
deleted file mode 100644
index cee5f348fb90f0aaf875716f9bde36270331f3ba..0000000000000000000000000000000000000000
--- a/packages/react-scripts/template/src/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
- margin: 0;
- padding: 0;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
- "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
- monospace;
-}
diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js
index 0c5e75da1cd0651f3c34f0d51aaa6abac634f4f2..b9333159c1462096f6fd5c44e7cd925b620e5ac0 100644
--- a/packages/react-scripts/template/src/index.js
+++ b/packages/react-scripts/template/src/index.js
@@ -1,12 +1,9 @@
+import 'bpk-stylesheets/base';
+import 'bpk-stylesheets/base.css';
+
import React from 'react';
import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-ReactDOM.render(<App />, document.getElementById('root'));
+import App from './App';
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: http://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(React.createElement(App), document.getElementById('root'));
diff --git a/packages/react-scripts/template/src/logo.svg b/packages/react-scripts/template/src/logo.svg
deleted file mode 100644
index 6b60c1042f58d9fabb75485aa3624dddcf633b5c..0000000000000000000000000000000000000000
--- a/packages/react-scripts/template/src/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
- <g fill="#61DAFB">
- <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
- <circle cx="420.9" cy="296.5" r="45.7"/>
- <path d="M520.5 78.1z"/>
- </g>
-</svg>
diff --git a/packages/react-scripts/template/src/serviceWorker.js b/packages/react-scripts/template/src/serviceWorker.js
deleted file mode 100644
index 2283ff9ced126ba2ba3cadde952135b3728880f8..0000000000000000000000000000000000000000
--- a/packages/react-scripts/template/src/serviceWorker.js
+++ /dev/null
@@ -1,135 +0,0 @@
-// This optional code is used to register a service worker.
-// register() is not called by default.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on subsequent visits to a page, after all the
-// existing tabs open on the page have been closed, since previously cached
-// resources are updated in the background.
-
-// To learn more about the benefits of this model and instructions on how to
-// opt-in, read http://bit.ly/CRA-PWA
-
-const isLocalhost = Boolean(
- window.location.hostname === 'localhost' ||
- // [::1] is the IPv6 localhost address.
- window.location.hostname === '[::1]' ||
- // 127.0.0.1/8 is considered localhost for IPv4.
- window.location.hostname.match(
- /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
- )
-);
-
-export function register(config) {
- if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
- // The URL constructor is available in all browsers that support SW.
- const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
- if (publicUrl.origin !== window.location.origin) {
- // Our service worker won't work if PUBLIC_URL is on a different origin
- // from what our page is served on. This might happen if a CDN is used to
- // serve assets; see https://github.com/facebook/create-react-app/issues/2374
- return;
- }
-
- window.addEventListener('load', () => {
- const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
- if (isLocalhost) {
- // This is running on localhost. Let's check if a service worker still exists or not.
- checkValidServiceWorker(swUrl, config);
-
- // Add some additional logging to localhost, pointing developers to the
- // service worker/PWA documentation.
- navigator.serviceWorker.ready.then(() => {
- console.log(
- 'This web app is being served cache-first by a service ' +
- 'worker. To learn more, visit http://bit.ly/CRA-PWA'
- );
- });
- } else {
- // Is not localhost. Just register service worker
- registerValidSW(swUrl, config);
- }
- });
- }
-}
-
-function registerValidSW(swUrl, config) {
- navigator.serviceWorker
- .register(swUrl)
- .then(registration => {
- registration.onupdatefound = () => {
- const installingWorker = registration.installing;
- if (installingWorker == null) {
- return;
- }
- installingWorker.onstatechange = () => {
- if (installingWorker.state === 'installed') {
- if (navigator.serviceWorker.controller) {
- // At this point, the updated precached content has been fetched,
- // but the previous service worker will still serve the older
- // content until all client tabs are closed.
- console.log(
- 'New content is available and will be used when all ' +
- 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
- );
-
- // Execute callback
- if (config && config.onUpdate) {
- config.onUpdate(registration);
- }
- } else {
- // At this point, everything has been precached.
- // It's the perfect time to display a
- // "Content is cached for offline use." message.
- console.log('Content is cached for offline use.');
-
- // Execute callback
- if (config && config.onSuccess) {
- config.onSuccess(registration);
- }
- }
- }
- };
- };
- })
- .catch(error => {
- console.error('Error during service worker registration:', error);
- });
-}
-
-function checkValidServiceWorker(swUrl, config) {
- // Check if the service worker can be found. If it can't reload the page.
- fetch(swUrl)
- .then(response => {
- // Ensure service worker exists, and that we really are getting a JS file.
- const contentType = response.headers.get('content-type');
- if (
- response.status === 404 ||
- (contentType != null && contentType.indexOf('javascript') === -1)
- ) {
- // No service worker found. Probably a different app. Reload the page.
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister().then(() => {
- window.location.reload();
- });
- });
- } else {
- // Service worker found. Proceed as normal.
- registerValidSW(swUrl, config);
- }
- })
- .catch(() => {
- console.log(
- 'No internet connection found. App is running in offline mode.'
- );
- });
-}
-
-export function unregister() {
- if ('serviceWorker' in navigator) {
- navigator.serviceWorker.ready.then(registration => {
- registration.unregister();
- });
- }
-}
diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh
index c2fc89530a1ec4f105e8a4cb1d67a6b95f09d20c..479d5b4db3add0d4564d4de2c2ff1b7611afb984 100755
--- a/tasks/e2e-simple.sh
+++ b/tasks/e2e-simple.sh
@@ -137,7 +137,7 @@ yarn build
exists build/*.html
exists build/static/js/*.js
exists build/static/css/*.css
-exists build/static/media/*.svg
+# exists build/static/media/*.svg
exists build/favicon.ico
# Run tests with CI flag
@@ -245,7 +245,7 @@ yarn build
exists build/*.html
exists build/static/js/*.js
exists build/static/css/*.css
-exists build/static/media/*.svg
+# exists build/static/media/*.svg
exists build/favicon.ico
# Run tests with CI flag
@@ -275,7 +275,7 @@ yarn build
exists build/*.html
exists build/static/js/*.js
exists build/static/css/*.css
-exists build/static/media/*.svg
+# exists build/static/media/*.svg
exists build/favicon.ico
# Run tests, overriding the watch option to disable it.
diff --git a/tasks/publish.sh b/tasks/publish.sh
index 56f2de6fb8217b5fd52b7aba80f05f4283bc0e96..beef66c57ef9f5db2ab4db086f0d68749c2c28be 100755
--- a/tasks/publish.sh
+++ b/tasks/publish.sh
@@ -26,9 +26,10 @@ set -x
cd ..
root_path=$PWD
-if [ -z $CI ]; then
- yarn compile:lockfile
-fi
+# We do not modify the create-react-app package so compiling a cached lockfile makes no sense
+# if [ -z $CI ]; then
+# yarn compile:lockfile
+# fi
if [ -n "$(git status --porcelain)" ]; then
echo "Your git status is not clean. Aborting.";