Import TypeScript modules from local module into React app

Question

I'm trying to separate my projects and keep logic as separate components that I will end up publishing. For now, before I do so, I'd like to keep it organized as such:

A library of TS scripts in a project called project-a
A separate React app that I created with create-react-app (using Typescript as the template) called project-b

The React app's .tsx components will pull from project-a's .ts files.

I've gone ahead in project-b and ran yarn add ../project-a. This installs the library as a dependency. I then import the .ts files and my code editor is able to see all the types and definitions really nicely. Great!

When I run the application, Webpack complains:

./node_modules/project-a/src/calc.ts 2:7
Module parse failed: Unexpected token (2:7)
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
| 
> export enum Position {
|   Inner = 0,
|   Outer = 1

I don't understand why it's not parsing the file as a .ts. The whole React application is setup with TypeScript and I'm even import some .ts files locally. Do I need to tell Webpack to handle the files imported from this module as Typescript source (assuming Webpack wouldn't attempt parsing them if it didn't need to)?

The React template didn't setup a webpack (I'm assuming it's using a hidden default) but I am able to adjust the tsconfig.json file. I added my modules direct path into the include array. That didn't seem to do much either.

Basically: how can I get passed the above error and continue importing the TypeScript files from my dependency module in my main application?

Johannes Klauß · Accepted Answer · 2021-09-10 08:40:33Z

6

You have to compile down project-a to javascript and emit the typings file, because imports from packages have to be Javascript.

The type infos you get from external packages is delivered via the .d.ts file alongside the package.

When you import other packages, you always import the Javascript file. Even locally, Webpack doesn't compile the typescript for you, a loader during bundling does. So once running inside the browser, it's all Javascript. But you are trying to import a Typescript file during runtime.

edited Sep 10, 2021 at 8:40

answered Sep 29, 2020 at 8:57

Johannes Klauß

11.1k18 gold badges73 silver badges127 bronze badges

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

2 Comments

ddibiase Over a year ago

As I thought about after posting this I figured this would most likely be the appropriate way of doing this. Sigh. Thanks!

Harsh Agarwal Over a year ago

I followed pluralsight.com/guides/react-typescript-module-create blog to help me compile package.

Collectives™ on Stack Overflow

Import TypeScript modules from local module into React app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related