Import Typescript/JSX code directly from npm package

Question

I am trying to build a very basic custom npm package which will be imported in a Typescript React app (created with CRA).

React app ALPHA:

import {MyText} from 'custom-package';
function App() {
   return (
      <div>
         {MyText()}
      </div>  
  );
}

Now, node_modules/custom-package includes package.json and index.ts:

index.ts

export const myText=():string=>'Hello world';

The above code gives me the following error: You may need an additional loader to handle the result...

1. Why React app is unable to parse the imported Typescript code? Why do I need to transpile it to JS?

My thought was Webpack of ALPHA app would take over that code. Isn't it Webpack that takes over in case of 'export' and 'import'? For example, the following works:

index.js

export const myText=()=>'Hello world';

2. It is Webpack that compiles 'export' in the above example. Otherwise the browser would not recognise it unless we define <script type='module'>. Am I right? If yes, why Webpack does not compile index.ts as well?

I hope you got my point. So,

3. Is it possible to import directly Typescript or even JSX code and how?

Silviu-Marian · Accepted Answer · 2022-05-07 22:28:47Z

Answering each point in it's initial form:

1. Why React app is unable to parse the imported Typescript code? Why do I need to transpile it to JS?

Webpack has what's called a loaders chain for files; those loaders are specified in webpack.config.js on a subset of files, usually by extension and location in the project.

For your case node_modules are most likely not transpiled because:

not all apps use Typescript. To a large extent they don't.
most library authors provide a "main" field in their package.json pointing to a file that's already been transpiled prior to uploading to npm
node_modules tends to be bigger (lots bigger) than project code and it's in nobody's best interest to have webpack parse all of that with each project build.

2. It is Webpack that compiles 'export' in the above example. Otherwise the browser would not recognise it unless we define <script type='module'>. Am I right? If yes, why Webpack does not compile index.ts as well?

What webpack does (but again, depending on configuration) is it bundles all files together like this (oversimplified):

var files = { 
   1: () => { /* transpiled code of some file */ },  
   2: () => { var myLib = require(1); /* transpiled code of some other file */ },  
   /* ...so on */
}

var require = function(id) { return files[id]() }

It's clear here that exports no longer matter, as all code has been bundled together; webpack is otherwise likely not to parse typescript due to the reasons outlined at #1.

3. Is it possible to import directly Typescript or even JSX code and how?

It is possible, but it will likely slow down build speed. This can be achieved by extending the .ts loaders to node_modules, or at least node_modules/custom-package:

locate webpack.config.js
either remove exclude: /node_modules/, if you find any from a loaders block that deals with ts files, or,

add the same loaders to node_modules -

module: {
  rules: [
    {
      test: /\.tsx?$/,
      include: /node_modules/,
      loader: 'ts-loader',
    },
  ],
},

Collectives™ on Stack Overflow

Import Typescript/JSX code directly from npm package

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related