Files
NativeScript/packages/webpack5/src/configuration/react.ts
2021-09-08 16:12:11 -07:00

75 lines
2.2 KiB
TypeScript

import { merge } from 'webpack-merge';
import Config from 'webpack-chain';
import { getPlatformName } from '../helpers/platform';
import { env as _env, IWebpackEnv } from '../index';
import base from './base';
export default function (config: Config, env: IWebpackEnv = _env): Config {
base(config, env);
const platform = getPlatformName();
const mode = env.production ? 'production' : 'development';
const production = mode === 'production';
// todo: use env
let isAnySourceMapEnabled = true;
config.resolve.extensions.prepend('.tsx').prepend(`.${platform}.tsx`);
config.resolve.alias.set('react-dom', 'react-nativescript');
config.module
.rule('ts')
.test([...config.module.rule('ts').get('test'), /\.tsx$/]);
config.plugin('DefinePlugin').tap((args) => {
args[0] = merge(args[0], {
/** For various libraries in the React ecosystem. */
__TEST__: false,
// todo: re-visit later, disabling by default now
// __UI_USE_EXTERNAL_RENDERER__: true,
/**
* Primarily for React Fast Refresh plugin, but technically the allowHmrInProduction option could be used instead.
* Worth including anyway, as there are plenty of Node libraries that use this flag.
*/
'process.env.NODE_ENV': JSON.stringify(mode),
});
return args;
});
// todo: env flag to forceEnable?
config.when(env.hmr && !production, (config) => {
config.module
.rule('ts')
.use('babel-loader|react-refresh')
.loader('babel-loader')
.before('ts-loader')
.options({
sourceMaps: isAnySourceMapEnabled ? 'inline' : false,
babelrc: false,
plugins: ['react-refresh/babel'],
});
config
.plugin('ReactRefreshPlugin')
.use(require('@pmmmwh/react-refresh-webpack-plugin'), [
{
/**
* Maybe one day we'll implement an Error Overlay, but the work involved is too daunting for now.
* @see https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/79#issuecomment-644324557
*/
overlay: false,
/**
* If you (temporarily) want to enable HMR on a production build:
* 1) Set `forceEnable` to `true`
* 2) Remove the `!production` condition on `tsxRule` to ensure that babel-loader gets used.
*/
forceEnable: false,
},
]);
});
return config;
}