Recently, I started incorporating TypeScript and React into my company's existing JavaScript code base. It has been a bit of a rollercoaster ride, as I'm sure many can relate to.
After conquering major obstacles such as setting up webpack correctly, configuring and implementing tsconfig files, and organizing the bundling process effectively, I have successfully integrated everything with our current CI pipeline.
However, I am currently facing an issue with importing JavaScript libraries in my TypeScript code. While I understand that this is not best practice, it serves as a temporary solution before transitioning to full TS compliance.
I have a basic component that compiles without any issues:
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Header } from "./components/header";
import * as $C from "./../../fortress.content.js";
import * as $F from "./../../fortress.js";
let url : string = $F.writeUrl("Account", "LoginAjax");
ReactDOM.render(
<div>
<div> {url} </div>
</div>,
document.getElementById("body")
);
The $F.writeUrl function allows us to generate a string based on a webconfig file located at the root of the project. Essentially, it takes multiple parameters and returns a formatted string based on them.
However, when I run the transpiled JavaScript in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<div id="body"></div>
<div id="header"></div>
<body>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/react-0.14.3.js"></script>
<script src="js/react-dom-0.14.3.js"></script>
<script src="js/filemanager/filemanager.bundle.js"></script>
<script src="js/anothermanager/anothermanager.bundle.js"></script>
<script>
console.log("$F: ", $F);
console.log("$C: ", $C);
</script>
</body>
</html>
The following errors occur:
Uncaught TypeError: Cannot read property 'bind' of undefined
at new t (filemanager.bundle.js:1)
at ReactCompositeComponentWrapper.mountComponent (react.js:5504)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12346)
at Object.mountComponent (react.js:12971)
at ReactDOMComponent.mountChildren (react.js:11685)
at ReactDOMComponent._createContentMarkup (react.js:6817)
anothermanager.bundle.js:1 Uncaught ReferenceError: $C is not defined
at anothermanager.bundle.js:1
at Object.<anonymous> (anothermanager.bundle.js:1)
at n (anothermanager.bundle.js:1)
at Object.<anonymous> (anothermanager.bundle.js:1)
at n (anothermanager.bundle.js:1)
at anothermanager.bundle.js:1
at anothermanager.bundle.js:1
at ReactDOMComponent.mountComponent (react.js:6705)
at Object.mountComponent (react.js:12971)
at ReactCompositeComponentWrapper.mountComponent (react.js:5581)
at ReactCompositeComponentWrapper.wrapper [as mountComponent] (react.js:12346)
index.html:17 Uncaught ReferenceError: $F is not defined
at index.html:17
To resolve this, I attempted to instantiate $C and $F within my TypeScript code:
let test = $F;
let test2 = $C;
This eliminated the above errors and displayed the $F and $C objects in the console log. However, the issue now is that Chrome does not recognize
$F.writeUrl("Account", "LoginAjax")Have I made any mistakes with my imports?