CODEWITHSUNDEEP
node.jsreactjstypescript
Goodies
Goodies

Reputation: 2069

Persistent undefined error in typescript import export

There's already a LOT of questions about typescript in multiple files.. for instance, this one,

Typescript import/export

Interesting question and answer, I simplified and tested it, see below.. but whatever I try, I still get

Uncaught TypeError: Cannot read properties of undefined (reading 'A')

.. as does any other example of import/export in TypeScript I found online. Whatever I do, whatever object I try export (class, function, const) with or without using a module: I get the same error.

Maybe there is something wrong in my NPM/TSC/React configuration ? Should I change e.g. tsconfig.js when i want to use more than one typescript file in a project ? I'm lost, what do I miss ?

tsconfig.json

{ // TypeScript configuration file: provides options to the TypeScript 
  // compiler (tsc) and makes VSCode recognize this folder as a TS project,
  // enabling the VSCode build tasks "tsc: build" and "tsc: watch".
  "compilerOptions": {
   "target": "es5",            // Compatible with older browsers
   "module": "umd",            // Compatible with both Node.js and browser
   "moduleResolution": "node", // Tell tsc to look in node_modules for modules
   "sourceMap": true,          // Creates *.js.map files
   "jsx": "react",             // Causes inline XML (JSX code) to be expanded
   "strict": true,             // Strict types, eg. prohibits `var x=0; x=null`
   "alwaysStrict": true        // Enable JavaScript's "use strict" mode
  },
 "include": ["**/*.ts", "**/*.tsx"],
 "exclude": ["node_modules"]

}

first.tsx

const A ={
  val: 'A'
}    
export { A }

app.tsx

import { A } from "./first";

// ... other code

function reportPerson()
{
  console.log(A);
}

.. Both files translate to .js with TSC, but A is reported by the Google Chrome console as undefined,

enter image description here

Both tsx files are in the same directory, TSC converts them both to JS without any issue.

What's going on ?

Upvotes: 4

Views: 909

Answers (1)

Goodies
Goodies

Reputation: 2069

Thanks everyone for the advice (I didn't solve the above minimal example either..)

In order to properly link my stuff together, I've now put Parcel 2 to work,

https://www.npmjs.com/package/parcel

npm i parcel

This is basically a bundler, that allows separate ts files to be concatenated after they are compiled to Javascript and it will put everything in a \dist directory,

parcel build src/index.html

Based on a small react example, I put my first "modulized" little app in TypeScript to work. Then, with the help of expert advise, I proceeded with twgl.js, which is a great toolkit for Webgl2.

npm install twgl.js

This javascript library even has sub-modules.. and everything links fine now, I can access (all of?) twgl with

import * as twgl from "./twgl-full.js";

Upvotes: 1

Related Questions