# Importing tsx module in perspective modules

**URL:** <https://forum.inductiveautomation.com/t/importing-tsx-module-in-perspective-modules/33660>\
**Category:** Module Development\
**Tags:** perspective\
**Created:** [April 3, 2020, 12:06pm UTC](https://forum.inductiveautomation.com/t/importing-tsx-module-in-perspective-modules/33660 "2020-04-03T12:06:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![bas.dejong](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@bas.dejong](https://forum.inductiveautomation.com/u/bas.dejong)\
**Post date:** [April 3, 2020, 12:06pm UTC](https://forum.inductiveautomation.com/t/importing-tsx-module-in-perspective-modules/33660/1 "2020-04-03T12:06:29Z")

</div>

We’re trying to build a perspective module that consists of multiple react components. I’m able to import the main .tsx module file. However, any other .tsx file that I try to import from there can’t be found by the gradle buildtool.

This is my project folder:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/b038e3b3c6811f6419ba47d1b77e4eaaff31e8a9.png)

The import in ClickDrawing.tsx:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/d/dc943554bdc08bbb7772be373ab84d66e3ec1f67.png)

And the error from the gradle buildtool:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/92fa398869b9c54fe9fae1fc86438fbb34a28b21.png)

The SDK perspective example TagCounter has a Poller module imported from the ‘util’ folder. This is a .ts file. Why am I able to import .ts files but not .tsx files? Is there a setting somewhere I’m missing?

---

<div class="post-metadata">

**Author:** ![PerryAJ](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/perryaj/32/3281_2.png) [@PerryAJ](https://forum.inductiveautomation.com/u/PerryAJ)\
**Post date:** [April 3, 2020, 3:58pm UTC](https://forum.inductiveautomation.com/t/importing-tsx-module-in-perspective-modules/33660/2 "2020-04-03T15:58:09Z")

</div>

Hi @bas.dejong,

First thing I would note is that the error you are seeing isn’t a gradle error, but is rather a typescript compiler error. The only role gradle really plays in the ‘web’ packages is in telling the system to ‘run webpack’, and then copying the assembled JS/CSS files into the appropriate locations as java resources. The build structure for a module targeting perspective is somewhat complex and convoluted. I wish that weren’t the case, but such is the nature of ‘front end’ software engineering/tooling these days.

I would suggest that ignore gradle entirely for the moment, and focus on getting your typescript to build purely via `tsc` (the typescript compiler, just run from the ‘client’ directory). If that fails, then you likely have either an issue in your tsconfig.json, or maybe just a syntax error in your ts/tsc files (export for `Groundplan` should be a named export, etc). So you’d want to take a look at the typescript official documentation and see what’s going on there. There is a lot of flexibility in how things are resolved, I’d take a look at those settings.

Once you can run `tsc` against your typescript files without error, then check your webpack configuration by running just the webpack in the same way. If tsc succeeds but webpack errors, you probably want to look at how webpack is configured, noting that the example configuration may not necessarily be ideal for you/your environment or goals.

In both cases, you’ll want to make sure the versions of node/yarn/webpack on your system path match the versions that are declared in the package.json/build.gradle files in the ‘web’ subproject. I find nodenv and using `npx` or `yarn exec` to be helpful when dealing with multiple versions of these kinds of dependencies.

If webpack succeeds, then try to ‘clean’ your project by running `./gradlew clean`, and make sure all node\_modules, dist, and build folders have all be deleted. Then try running the build again from scratch.

Wish I could give more specific ideas. We run into these sorts of issues far more often than we’d like, and rarely is there a ‘one size fits all’ solution. So I suppose the best suggestion I could give would be to take some time to learn the underlying tools, since this sort of thing will happen regularly. In the example repo, that’s mostly typescript/tsc, webpack, yarn/npm – though you do _not_ need to use this toolchain.

---

<div class="post-metadata">

**Author:** ![bas.dejong](https://avatars.discourse-cdn.com/v4/letter/b/ba8739/32.png) [@bas.dejong](https://forum.inductiveautomation.com/u/bas.dejong)\
**Post date:** [April 6, 2020, 6:41am UTC](https://forum.inductiveautomation.com/t/importing-tsx-module-in-perspective-modules/33660/3 "2020-04-06T06:41:26Z")

</div>

Thanks for the tips. Both Ignition module development and React component development are new to me and the development toolchain is still kind of a foggy forest of things, especially on the React side. I’m gone work on these suggestions which im sure will give me a clearer view on the toolchain as a whole. I’ll post a sollution if I find one. If not I’ll be back.

**EDIT:**

🤭😆 : Contain **t** er  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/b/bbea222b0822324cdc69dc8f9acd10bca243be7a.png)

I blame it on Friday