Importing tsx module in perspective modules

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:

The import in ClickDrawing.tsx:

And the error from the gradle buildtool:

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?

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.

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:

:face_with_hand_over_mouth::laughing: : Containter
image

I blame it on Friday

1 Like