How to use new react-env API?

[ivansky]

Hi,

Before 486 version, on 485 we had a custom-react configuration that looks like:

const compilerOptions: Partial<TsCompilerOptionsWithoutTsConfig> = {
  types: [
    resolve(__dirname, './@types/theme/index.d.ts'),
    resolve(__dirname, './@types/next-global.d.ts'),
  ],
};
const tsConfig = react.env.getTsConfig();
const buildTsConfig = react.env.getBuildTsConfig();

const customReactEnv = react.compose([
   react.overrideJestConfig(JestConfig, require.resolve('jest')),
   react.overrideTsConfig(tsConfig, compilerOptions),
   react.overrideBuildTsConfig(buildTsConfig, compilerOptions),
]);

envs.registerEnv(customReactEnv);

return new CustomReactExtension(react);

After some research I've made configuration:

react.useTypescript({
    buildConfig: [
    configMutator => {
        configMutator.addTypes([
        resolve(__dirname, './@types/theme/index.d.ts'),
        resolve(__dirname, './@types/next-global.d.ts'),
        ]);
        return configMutator;
    },
    ],
});
// trying to disable eslint
react.useEslint({
    transformers: [
    configMutator => {
        configMutator.addOverrides([
        {
            excludedFiles: ['*'],
            files: [],
        },
        ]);
        return configMutator;
    },
    ],
});
react.usePrettier({
    transformers: [
    configMutator => {
        Object.entries(prettierConfig).map(([key, value]) => {
            configMutator.setKey(key, value);
        });
        return configMutator;
    },
    ],
});

const customReactEnv = react.compose([
    react.overrideJestConfig(JestConfig, require.resolve('jest')),
]);

envs.registerEnv(customReactEnv);

return new CustomReactExtension(react);

Does it look right? Could you please help?

[ivansky]

it does not use types declarations anymore, declarations were not changed, it was working on 485

after compile it does look like

[GiladShoham]

First, your old implementation should have been still working, but indeed, there was a bug with the types config that broke due to the useTypescript API. this has been fixed here - #4788 and it will be part of the next nightly
About your useTypescript implementation, it's correct, the only part you miss is to pass it inside the react.compose.
it should be something like this:

const customReactEnv = react.compose([
    react.overrideJestConfig(JestConfig, require.resolve('jest')),
    react.useTypescript(...),
    react.usePrettier(...),
    react.useEslint(...),
]);

Please try putting it inside the compose and let me know if it worked as expected.