# @talend/scripts-config-react-webpack > Webpack configuration for @talend/scripts-core Latest version **16.10.0** (published 2025-09-09) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @talend/scripts-config-react-webpack pnpm add @talend/scripts-config-react-webpack yarn add @talend/scripts-config-react-webpack bun add @talend/scripts-config-react-webpack ``` ## Health **Score 40/100 (D)** — status: stable. Positive: no vulnerabilities; high maintenance score. Warnings: low downloads; no types; no esm support. Negative: stale. ## Facts | | | |---|---| | Version | 16.10.0 | | Published | 2025-09-09 | | First published | 2019-05-20 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 38 | | Unpacked size | 63.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 159 | | Author | Talend Frontend | | Maintainers | talend-frontend | ## Links - npm: https://www.npmjs.com/package/@talend/scripts-config-react-webpack - Repository: https://github.com/Talend/ui - Homepage: https://github.com/Talend/ui/tree/master/packages/ui-scripts#readme - Issues: https://github.com/Talend/ui/issues - npm.io page: https://npm.io/package/@talend/scripts-config-react-webpack ## Dependencies (38) - [tmp](https://npm.io/package/tmp.md) ^0.2.5 - [url](https://npm.io/package/url.md) ^0.11.4 - [sass](https://npm.io/package/sass.md) ^1.92.0 - [svg64](https://npm.io/package/svg64.md) ^1.2.0 - [terser](https://npm.io/package/terser.md) ^5.44.0 - [postcss](https://npm.io/package/postcss.md) ^8.5.6 - [webpack](https://npm.io/package/webpack.md) ^5.101.3 - [css-loader](https://npm.io/package/css-loader.md) ^7.1.2 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.28.3 - [inspectpack](https://npm.io/package/inspectpack.md) ^4.7.1 - [sass-loader](https://npm.io/package/sass-loader.md) ^14.2.1 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^6.0.1 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.21 - [babel-loader](https://npm.io/package/babel-loader.md) ^9.2.1 - [style-loader](https://npm.io/package/style-loader.md) ^3.3.4 - [core-js-bundle](https://npm.io/package/core-js-bundle.md) ^3.45.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^8.2.0 - [querystring-es3](https://npm.io/package/querystring-es3.md) ^0.2.1 - [@yarnpkg/lockfile](https://npm.io/package/@yarnpkg/lockfile.md) ^1.1.0 - [source-map-loader](https://npm.io/package/source-map-loader.md) ^4.0.2 - [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^5.0.0 - [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^5.2.2 - [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^11.0.0 - [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.6.4 - [postcss-safe-parser](https://npm.io/package/postcss-safe-parser.md) ^6.0.0 - [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.11 - [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^4.0.0 - [@talend/scripts-utils](https://npm.io/package/@talend/scripts-utils.md) ^2.5.0 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.3.14 - [@sentry/webpack-plugin](https://npm.io/package/@sentry/webpack-plugin.md) ^1.21.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^2.9.4 - [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.10.2 - [@talend/scripts-config-cdn](https://npm.io/package/@talend/scripts-config-cdn.md) ^10.14.0 - [circular-dependency-plugin](https://npm.io/package/circular-dependency-plugin.md) ^5.2.2 - [@talend/scripts-config-babel](https://npm.io/package/@talend/scripts-config-babel.md) ^13.7.0 - [fork-ts-checker-webpack-plugin](https://npm.io/package/fork-ts-checker-webpack-plugin.md) ^9.1.0 - [@talend/react-cmf-webpack-plugin](https://npm.io/package/@talend/react-cmf-webpack-plugin.md) ^6.41.0 - [@welldone-software/why-did-you-render](https://npm.io/package/@welldone-software/why-did-you-render.md) ^7.0.1 ## Recent versions - 16.10.0 (latest) — 2025-09-09 - 10.0.0-alpha.1 (next) — 2021-02-12 - 16.9.0 — 2025-07-09 - 16.8.5 — 2025-06-27 - 16.8.4 — 2025-06-26 - 16.8.3 — 2025-06-19 - 16.8.2 — 2025-04-10 - 16.8.1 — 2024-09-11 - 16.8.0 — 2024-06-13 - 16.7.0 — 2024-06-11 - 16.6.0 — 2024-04-19 - 16.5.1 — 2024-02-29 - 16.5.0 — 2023-12-22 - 16.4.2 — 2023-12-20 - 16.4.1 — 2023-12-14 - … 253 more at https://npm.io/package/@talend/scripts-config-react-webpack/versions ## README ## Webpack config customisation Your folder hierarchy should follow ``` |_ src |_ app |_ index.js |_ assets |_ settings |_ cmf.json |_ package.json |_ talend-scripts.js(on) ``` | Folder/File | Description | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------ | | src/app | Your application code | | src/app/index.js | Your entry point | | assets | The assets such as images. This folder content is copied via `copy-webpack-plugin`. | | settings | Your settings. This can be changed, depending or your `cmf.json` configuration, but [DO NOT put the settings in assets](#cmf). | ## Configuration overview ```json { "preset": "@talend/scritps-preset-react", "cmf": true, "html": { "title": "Talend Data Preparation", "other-options": "Option value passed to html-webpack-plugin" }, "sass": { "data": { "$brand-primary": "#4F93A7", "$brand-primary-t7": "#00A1B3", "$brand-secondary-t7": "#168AA6" }, "theme": "tdp" }, "css": { "modules": false, "prefix": "resources/" }, "js": { "prefix": "resources/" }, "webpack": { "debug": true, "config": { "development": "./webpack.config.dev.js", "production": "./webpack.config.prod.js" } }, "dynamic-cdn-webpack-plugin": { "exclude": ["react-router-dom"] }, "sentry": { "org": "talend", "project": "tmc", "include": ["dist"], "ignore": ["dist/cdn"] } } ``` | Preset variable | Description | | --------------- | --------------------------------------------------------- | | cmf | `cmf-webpack-plugin` flag. | | html | `html-webpack-plugin` template and options customisation. | | sass | `sass-loader` customisation. | | css | `css-loader` customisation. | | js | `js` customisation. | | webpack | `webpack` and `devServer` customisation. | | sentry | `sentry` release config. | ## HTML ```json { "preset": "talend", "html": { "title": "Talend Data Preparation", "other-options": "Option value passed to html-webpack-plugin" } } ``` | html options | type | description | | ------------- | ------ | ------------------------------------------------------ | | title | string | fill the title tag in head | | meta | object | add `` | | template | string | default to `src/app/index.html` | | appId | string | id of your app will be used in many places | | appLoaderIcon | string | base64 encoded version of icon to use as AppLoader | | ...rest | | rest will be passed to HTML webpack plugins | by default the configuration will try to find custom html to add to the default ### Meta tags You can use the [option](https://www.npmjs.com/package/html-webpack-plugin#options) meta which exists in the HTML webpack plugin like this: ```json { "html": { "meta": { "metaname": "metavalue", "bis": "foo" } } } ``` This is quite simple to use and understand but not enough flexible to add other attributes to the tag. For more advanced use case talend-scripts will try to read .talend/head.html and will insert the results in the head tag. ## Template By default you don't need to provide a template. The configuration will try to find the file but if not found it will fallback to our default template. To customize html output you have the following options: - add `src/app/index.html` only if you need to remove things from the current output - add `.talend/head.html` so you can add anything in the head. - add `.talend/body.html` so you can add anything in the body (useful for react portals). Note: if you do not use our template you will have to add support for options. ## App loader in a custom template By default, a static app loader is available to be displayed during your webapp download. The loader contains the Talend logo. If you have a custom template and you want to use it, you must deal with the `html-webpack-plugin` option named `appLoader`. ```html
<%= htmlWebpackPlugin.options.appLoader %>
``` To change the logo, you can customise the `appLoaderIcon` variable in configuration. ```json { "preset": "talend", "html": { "appLoaderIcon": "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov+" } } ``` ## Sass/Css You can pass all sass variables you need. Those will be loaded before any sass file. ```json { "preset": "talend", "sass": { "data": { "$brand-primary": "red" } } } ``` In case you want to load one of T7+ @talend/bootstrap-theme variation, you can pass the variation name. ```json { "preset": "talend", "sass": { "theme": "tdp" } } ``` By default, css modules are activated. To deactivate them, ```json { "preset": "talend", "css": { "modules": false } } ``` ## Webpack You can add the debug option to true so the webpack configuration will be printed to the output. ```json { "preset": "talend", "webpack": { "debug": true } } ``` ## CMF Talend preset integrates `cmf-webpack-plugin`. By default it is deactived, to enable it: ```json { "preset": "talend", "cmf": true } ``` It has an incompatibility with `copy-webpack-plugin`. To use it correctly 1. Create your `settings.json`, be careful not to create it in one of the folders copied by `copy-webpack-plugin`. Otherwise you'll end up in an infinite loop. 2. Create a `cmf.json` at your app root folder and configure it. _Important_ : remove the destination property. `cmf-webpack-plugin` will output the result in a `settings.json` in the webpack output folder. 3. In your cmf app index file, you can fetch the settings from `/settings.json`. ## Versions Some variables are injected as global. | Variable | Description | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | | BUILD_TIMESTAMP | The built timestamp. | | TALEND_APP_INFO | Versioning of current app and @talend libs. To get the libs git SHA1, you need to provide `sha1.json` containing the sha of the packages (example below). | | TALEND_APP_INFO.version | Current app version (from `package.json`). | | TALEND_APP_INFO.revision | Current app version last commit SHA1 (determined with `git rev-parse HEAD`). | | TALEND_APP_INFO.talendLibraries | @talend libs infos (name, SHA1 if provided in `sha1.json`, version from `package.json`). | To include the git SHA1 of each talend libraries version, you need to provide a `sha1.json`, mapping the libraries with their SHA1. Note that the librairies from `@talend/ui` will be gather into 1 library info. **Example** sha1.json ```json { "@talend/dataset": "785a5552a4b", "@talend/rating": "156c32bc15", "@talend/ui": "8c8cb6544fe" } ``` package.json ```json { "version": "3.6.0", "dependencies": { "@talend/react-components": "^2.6.0", "@talend/react-forms": "^2.6.0", "@talend/dataset": "1.5.0", "@talend/sharing": "1.2.1" } } ``` Result (`TALEND_APP_INFO`) ```javascript const TALEND_APP_INFO = { version: '3.6.0', revision: '654fe645b5c84', talendLibraries: [ { name: '@talend/ui', version: '^2.6.0', revision: '8c8cb6544fe', }, { name: '@talend/dataset', version: '1.5.0', revision: '785a5552a4b', }, { name: '@talend/sharing', version: '1.2.1', revision: undefined, }, ], }; ``` ## whyDidYouRender This package bundles automatically for dev only [whyDidYouRender](https://github.com/welldone-software/why-did-you-render) library to help you investigate React rendering issues. ## webpack-bundle-analyzer and inspectpack/plugin You can add these plugin by passing `--env analyze` option to your start / build webpack command. ### How to use? ```javascript // log only if rendering occurs while props values are the same Component.whyDidYouRender = true; Component.whyDidYouRender = { logOnDifferentValues: true, // log on every change of props customName: 'Menu', // change the name of the log for this component }; ``` If your component is cmf connected you also can do the following ```json { "props": { "MyComponent#its-component-id-or-default": { "whyDidYouRender": true } } } ``` ## Route basename If you want to serve the app under a basename, set a `BASENAME` environment variable before start. ```json { "scripts": { "start": "BASENAME=/tdc/ talend-scripts start" } } ``` ## Sentry Sentry config is only used for build script in production mode. If you add this config it will: 1. Create a new release for your project on Sentry. Release version will be taken from `package.json`'s version. 2. Upload sourcemaps to Sentry. ```json { "sentry": { "org": "talend-0u", "project": "tmc", "include": ["dist"], "ignore": ["dist/cdn"] } } ``` | sentry options | type | description | | -------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | org | string | Optional. The slug of the organization to use for a command. Defaults to 'talend-0u'. It also can be configured by environment variable `SENTRY_ORG`. | | project | string | Required. The slug of the Sentry project associated with the app. It also can be configured by environment variable `SENTRY_PROJECT`. | | include | string/array/object | Optional. One or more paths that Sentry CLI should scan recursively for sources. It will upload all `.map` files and match associated .js files. Defaults to `["dist"]`. More info [here](https://github.com/getsentry/sentry-webpack-plugin#options). | | ignore | string/array | Optional. One or more paths to ignore during upload, defaults to `["cdn"]`, so sourcemaps inside `dist/cdn` won't be uploaded as default. | Sentry authToken is also required. It's the authentication token to use for all communication with Sentry. Can be obtained from https://sentry.io/settings/account/api/auth-tokens/. Required scopes: project:releases (and org:read if setCommits option is used). There're several ways to configure `authToken`. You can choose a convient one to configure it for CI. Sentry CLI will pick up these configurations automatically. 1. Environment variables: ```shell > SENTRY_AUTH_TOKEN=[yourToken] talend-scripts build ``` 2. Config file: provide a `.sentryclirc` in the root of your app, with your token and other info. ```shell [defaults] org=[yourOrg] project=[yourProjectId(eg. tmc)] [auth] token=[yourToken] ``` For more information, see [Sentry CLI configuration values](https://docs.sentry.io/product/cli/configuration/#configuration-values) ## dynamic-cdn-webpack-plugin This entry let you pass options to the plugin `@talend/dynamic-cdn-webpack-plugin`. If you want you can also pass `false` to desactivate the plugin. ```json { "preset": "@talend/scritps-preset-react", "dynamic-cdn-webpack-plugin": false } ``` --- _Source: https://npm.io/package/@talend/scripts-config-react-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._