How to configure create-react-app typescript to automatically use ts-loader for typescript based node modules?

Question

So I have a project called client. The client requires components and services from the core. The core is a typescript project that hasn't been compiled and built yet. In order to develop the client application faster I'm required to develop both the core and client at the same time. with this regard I created an npm link into the core within client. However, when I use the core codes I get an error message.

Module parse failed: Unexpected token (7:34)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I suspect that the webpack isn't using the appropriate loader to build the typescript node module. Is there any way of solving this issue without ejecting the config files.

Simone Conti · Accepted Answer · 2020-07-27 04:19:40Z

2

The typescript version of create-react-app is using the babel-loader to transform typescript into javascript. The problem you are having is here:

test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),

it only compiles ts|tsx in the paths.appSrc folder, which is the main src folder, but your linked module is outside this folder. You can fix it by editing the include rule or removing it altogheter, so you have to eject.

If you don't want to eject you can add a script in your build chain that modifies the webpack.config.js file under node_modules\react-scripts\config after the npm install, but this is a bad practice.

This is what I am using:

import * as fs from 'fs';

export function deleteLineFromFile(props: { path: string; lineToRemove: { index: number; value: string } }) {
  const data = fs.readFileSync(props.path, 'utf-8');
  const array = data.split('\n');
  const value = array[props.lineToRemove.index - 1].trim();

  if (value === props.lineToRemove.value) {
    array.splice(props.lineToRemove.index - 1, 1);
    const newData = array.join('\n');
    fs.writeFileSync(props.path, newData, 'utf-8');
  }
}

deleteLineFromFile({
  path: 'node_modules/react-scripts/config/webpack.config.js',
  lineToRemove: { index: 384, value: 'include: paths.appSrc,' },
});

edited Jul 27, 2020 at 4:19

answered Jul 24, 2020 at 4:47

Simone Conti

5943 gold badges10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arturo Hernandez Over a year ago

You should use patch-package. Way way better option.

Collectives™ on Stack Overflow

How to configure create-react-app typescript to automatically use ts-loader for typescript based node modules?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related