`How can create-react-app with typescript be set up to automatically utilize ts-loader for node modules written in typescript?`

Question

`How can create-react-app with typescript be set up to automatically utilize ts-loader for node modules written in typescript?`

Currently, I am working on a project named client which relies on components and services from the core project. The core project, written in TypeScript, has not been compiled or built yet. To speed up the development of the client application, I need to work on both the core and client simultaneously. To achieve this, I created an npm link from the client to the core. However, when I attempt to utilize the core code, I encounter an error message.

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

I suspect that webpack is not using the correct loader to build the TypeScript node module. Is there a solution to this issue without having to eject the configuration files?

typescript npm webpack node-modules create-react-app

Answer 1

Answer №1

In the typescript version of create-react-app, babel-loader is used to convert typescript into javascript. The issue you are facing lies here:

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

It only compiles ts|tsx files in the paths.appSrc folder, the main src folder, while your linked module is located outside of this directory. To resolve this, you can adjust the include rule or remove it entirely, but this may require ejecting.

If you prefer not to eject, you can add a script to your build process that modifies the webpack.config.js file in

node_modules\react-scripts\config

after running npm install, although this is considered bad practice.

Here is an example of the script 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,' },
});

Answer 2

In the typescript version of create-react-app, babel-loader is used to convert typescript into javascript. The issue you are facing lies here:

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

It only compiles ts|tsx files in the paths.appSrc folder, the main src folder, while your linked module is located outside of this directory. To resolve this, you can adjust the include rule or remove it entirely, but this may require ejecting.

If you prefer not to eject, you can add a script to your build process that modifies the webpack.config.js file in

node_modules\react-scripts\config

after running npm install, although this is considered bad practice.

Here is an example of the script 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,' },
});

`How can create-react-app with typescript be set up to automatically utilize ts-loader for node modules written in typescript?`

Answer №1

Similar questions

Angular template error: Potential is present but not defined

What is the best way to retrieve the instance variable of a component from a handler method in Angular, specifically using the Razorpay API

What is the best way to handle typing arguments with different object types in TypeScript?

The ReactJS Material Table Tree mode experiences delays when new row data is introduced

Error occurred while trying to find binding file following electron version update

Incorporating HTML code within a .ts file: a basic guide

Dynamic data manipulation with Angular ReactiveForms

Tips for creating a window closing event handler in Angular 2

ConcatMap in RxJS processes only the last item in the queue

"What is the most effective way to utilize and integrate the `setValue` function from react-hook-form within a custom react hook

Need a specialized package for your project?

What steps are involved in setting up an npm package so that a global installation will place it in the path?

Eliminate the loading screen in Ionic 2

Having trouble locating async function after installation

Tips for incorporating momentjs into TypeScript within AngularJS 1.5

Using Typescript in React to render font colors with specific styling

What is the process for connecting a date/time form control?

Which symbol or character corresponds to the public "get symbol" method?

Issue encountered: Syntax error in bootstrap import statement at line 1, column 38 during Rails precompilation process

Guide on importing videojs-offset library