app.config.react.js

'use strict'

/**
 * This file overrides the default react webpack config.
 * This react config enables the use of TypeScript.
 *
 * @override node_modules/cozy-scripts/config/webpack.config.react.js
 */

const webpack = require('webpack')
const path = require('path')
const { useHotReload } = require('cozy-scripts/config/webpack.vars')
const CopyPlugin = require('copy-webpack-plugin')
const CTS = require('cozy-scripts/utils/constants.js')
const babelConf = require('./babel.config')

process.env[CTS.ENTRY_EXT] = '.tsx' // Replaces .jsx

module.exports = {
  resolve: {
    extensions: ['.jsx', '.tsx', '.ts', '.scss'], // Add TS extensions
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/, // Add TS extensions
        exclude: /node_modules(\/|\\)(?!(cozy-ui))/,
        loader: require.resolve('cozy-scripts/node_modules/babel-loader'), // Add full path
        options: {
          cacheDirectory: 'node_modules/.cache/babel-loader/react',
          presets: babelConf.presets,
          plugins: useHotReload ? babelConf.plugins : [],
        },
      },
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader',
      },
      {
        test: path.resolve(__dirname, 'node_modules/uglify-js/tools/node.js'),
        loader: 'null-loader',
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  // Necessary for cozy-ui during Preact -> React apps transition
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: './src/assets/icons/visu/ecogesture',
          to: './assets/ecogesture',
        },
        {
          from: './src/assets/icons/email',
          to: './assets/',
        },
        {
          from: `./src/targets/vendor/assets/icon.svg`,
          to: 'public/',
        },
        {
          from: `./src/targets/vendor/assets/favicon*`,
          to: 'public/',
          flatten: true,
        },
        {
          from: `./src/targets/vendor/assets/apple-touch-icon.png`,
          to: 'public/apple-touch-icon.png',
        },
        {
          from: `./src/targets/vendor/assets/safari-pinned-tab.svg`,
          to: 'public/safari-pinned-tab.svg',
        },
      ],
    }),
    new webpack.DefinePlugin({
      'process.env': {
        USE_REACT: 'true',
      },
    }),
  ],
}