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: 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/targets/vendor/assets/arrows.svg`,
          to: 'public/'
        },
        {
          from: `./src/targets/vendor/assets/manifest.json`,
          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'
        }
      ]
    }),
    new webpack.DefinePlugin({
      'process.env': {
        USE_REACT: 'true'
      }
    })
  ]
}