I am currently working on creating a simple custom npm package that will be utilized in a Typescript React application built with CRA.
React application BETA:
import {MyText} from 'custom-package';
function App() {
return (
<div>
{MyText()}
</div>
);
}
At this point, the directory node_modules/custom-package contains both package.json and index.ts:
index.ts
export const myText = (): string => 'Hello world';
The code above results in the following error:
You may need an additional loader to handle the result...1. Why is the React app having trouble interpreting the imported Typescript code? Do I really need to transpile it into JavaScript?
My understanding was that Webpack of the BETA app would handle that part. Doesn't Webpack usually take control when it comes to 'export' and 'import' statements? For example, the following scenario works fine:
index.js
export const myText = () => 'Hello world';
2. In this case, Webpack compiles the 'export' statement. Otherwise, the browser wouldn't recognize it without specifying <script type='module'>. Am I correct? If so, why doesn't Webpack also compile index.ts?
I hope my message is clear. Therefore,
3. Is it feasible to directly import Typescript or even JSX code, and if so, how can this be achieved?