CODEWITHSUNDEEP
typescriptnpmwebpacknode-modulescreate-react-app
Andre
Andre

Reputation: 71

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

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.

Upvotes: 2

Views: 3083

Answers (1)

Simone Conti
Simone Conti

Reputation: 584

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,' },
});

Upvotes: 2

Related Questions