v3.0.0

Changelog

👉 AckeeCZ/create-react-app has been upgraded to facebook/create-react-app@5.0.0, see changelog (💥 for breaking changes at least).

@ackee/create-react-app@3.0.0

• 8588f75 ⬆️ Upgrade to CRA v5.0.0
• ef3a0c0 ♻️ Fix & refactor optional modules

@ackee/cra-template-typescript@3.0.0

• 0d95eb5 ⬆️ Upgrade template dependencies
• 2f4a199 🔧 Update tsconfig based on react-scripts recommendation
• 8588f75 ⬆️ Upgrade to CRA v5.0.0
• f3c53ed ✨ Support css extraction in cra-template-typescript
• d24ba96 ✨ Support loading styles to a specific placeholder in
• 713bec5 🚚 Standardize name convention of Fela style files to .rules.ts
• 86a2258 📦 Add fela plugins
• 3d9f54e ♻️ Import isServerEnv as named import in store.ts
• d22163f 🏷️ Add useAppSelector and useAppDispatch hooks
• c4751f7 ♻️ Use Redux toolkit configure store
• e2ec903 ♻️ Simplify structure of localizations components
• 37312a1 ✨ new module optional for antd
• a242908 ♻️ Use Authenticated from petrus instead of HOC
• ff200e2 ➖ Remove unused @ackee/lucas
• e2e7408 ✨ Add service-worker module
• bf777ed ✨ Add network module
• c150d2e Add REACT_APP_IS_LOCALHOST env var
• e5b2893 🔥 Don't include @sentry/tracing by default due to bundle size
• e03c7a9 🚨 Fix undefined children prop
• 27b5c25 ➖ @ackee/chris (unused)
• 8036f2e 🏷️ Fix TS type in ErrorBoundary
• f9edbff ♻️ Refactor sentry implementation in skeleton
• fb4a7ea ⬆️ Upgrade to antd 4
• 5dc7bf1 ♻️ Use loglevel instead of console
• 683c3c7 ⬆️ Upgrade react-final-form-redux-submit package
• f13dd11 ✨ Add conditional form module
• 2cbdd65 ✨ Replace redux-form and mateus with final-form
• ba18684 ✨ Add form module
• e9b456d ♻️ Use sentry/react error boundary
• 8e7cba7 ♻️ Use localizations components over HOC
• b5eb8d5 ♻️ Replace withErrorBoundary hoc with ErrorBoundary component

@ackee/react-scripts@3.0.0

• 8588f75 ⬆️ Upgrade to CRA v5.0.0
• ef3a0c0 ♻️ Fix & refactor optional modules
• 3177c85 ➖ Remove redundant webworker-plugin
• 0110e8b 🔧 update less-loader options
• 2e7ebb8 ✨ use @ackee/browserslist-config

---

Migration guide from 2.x to 3.0.0

• Version 2.*.* was using fela renderStatic to render CSS files. For this purpose we needed to import CSS to JS as a string and pass it to renderStatic. The solutions caused "blinking" because React had to renderer before the styles were actually processed by a browser. The styles even enlarged the size of Javascript files.
• Version 3.0.0 returned back to the original idea from official CRA where imported CSS files are loaded by style-loader in dev and extracted to css files via MiniCSSExtractPlugin in production.

@ackee/react-scripts@3.0.0

💥 Breaking changes

• Replace import css from './some-css-file.css'; with import './some-css-file.css';. We normally do it in src/index.ts. You can do it in components which need a particular style to utilize lazy-loading.
  • Local variables from *.less files can't be used in Javascript anymore.
  • The migration has been already done in cra-template-typescript in #96 PR so you can get inspired there.
• Possible breaking changes might appear in config/transformWebpackConfig.js your project. It must be compatible with webpack@5.
• If you have installed @ackee/redux-utils@3.x, upgrade to 3.1.7 or higher. This version doesn't include @ackee/eslint-config among dependencies, thus it won't anymore break resolving of eslint config and its plugins in project.
• If you have installed @ackee/petrus, upgrade to 5.2.4 or higher. The below versions includes the unwated version of @ackee/redux-utils.
• Upgrade NODE_BASE_IMAGE in .gitlab-ci.yml to v14.
• webpack@5 has updated syntax for creating web worker:

  - const worker =  new Worker('./foo.worker.js', { type: 'module' });
  + const worker = new Worker(new URL('./foo.worker.js', import.meta.url));

• webpack-bundle-analyzer has been removed, call it with npx instead:

  - "analyze-bundle": "yarn build:production --stats && webpack-bundle-analyzer build/bundle-stats.json",
  + "analyze-bundle": "yarn build:production --stats && npx webpack-bundle-analyzer build/bundle-stats.json",

🧑‍💻 Recommended actions on your side

• Now you can enable FAST_REFRESH in .env file.
• Consider removing resolutions and check if the audit is now passing.

---

👏 Credits

• @horaklukas
• @jancama2
• @jstorm31
• @baierjak
• @adamtretera
• @martinfoldyna

@ackee/react-scripts@2.0.0

@ackee/react-script@2.0.0

💥 Breaking changes

1. Add extensions to eslint config:

    "settings": {
       "import/resolver": {
           "node": {
               "paths": ["src"],
   +            "extensions": [".js", ".jsx"]
           }
       }
   },

2. Replace BUILD_ENV and --target with REACT_APP_BUILD_ENV:

   Update config/config.js:

   - const envConfig = require(`./config.${process.env.BUILD_ENV}.js`).default;
   + const envConfig = require(`./config.${process.env.REACT_APP_BUILD_ENV}.js`).default;

   Update build:* scripts in package.json:

   - "build:development": "react-scripts build --target=development",
   - "build:master": "react-scripts build --target=production",
   - "build:stage": "react-scripts build --target=stage",
   
   + "build:development": "export REACT_APP_BUILD_ENV=development; react-scripts build",
   + "build:stage": "export REACT_APP_BUILD_ENV=stage; react-scripts build",
   + "build:master": "export REACT_APP_BUILD_ENV=production; react-scripts build",

   Update start script in package.json - prepend export REACT_APP_BUILD_ENV=development;:

   - "start": "yarn localize && react-scripts start",
   + "start": "export REACT_APP_BUILD_ENV=development; yarn localize && react-scripts start",

   Update test script/s in package.json - prepend export REACT_APP_BUILD_ENV=test;:

   - "test": "react-scripts test",
   + "test": "export REACT_APP_BUILD_ENV=test; react-scripts test",

3. Update the eslint config:

   - "extends": ["react-app", "@ackee/eslint-config", "prettier"],
   + "extends": ["@ackee/eslint-config", "prettier"],

4. Disable FAST_REFRESH for now - it doesn't work
   In .env:

   + FAST_REFRESH=false

5. Remove EXTEND_ESLINT - it is no longer required to customize the ESLint config
   In .env:

   - EXTEND_ESLINT=false

6. (Possible breaking change) Jest has been upgraded to v26 and resetMocks: true is set by default.

7. Remove cypress
   If you're using it in your project, install it manually:

   yarn add cypress@latest eslint-plugin-cypress@latest -D

8. Upgrade react-scripts@4.0.0 - changelog includes following breaking changes that relates to @ackee/react-script:

9. Add typescript package (for TypeScript projects only)
   typescript has been move to peerDependencies, so you need to install it manually:

   yarn add typescript -D

10. Add src/servicer-worker.js or src/servicer-worker.ts

    Starting with Create React App 4, you can add a src/service-worker.js file to your project to use the built-in support for Workbox's InjectManifest plugin, which will compile your service worker and inject into it a list of URLs to precache.
    See more at https://create-react-app.dev/docs/making-a-progressive-web-app/

11. ⚠️ To prevent unexpected issues, do a clean install as the last step:

rm -rf ./node_modules && yarn

---

🚀 New features

• Upgrade @ackee/eslint-config@3.0.0
• Upgrade worker-plugin@5.0.0
• Upgrade madge@4.0.2