Trying to make an NPM library, but methods and classes are all undefined. | TypeScript Community | Page 1

exotic minnow Mar 31, 2023, 12:59 AM

#

I can import { sayHello } from 'libname' but sayHello(), or anything else I import, is all undefined.
TypeError: Cannot read properties of undefined (reading 'sayHello')

I'll post my library basics in first reply. Can anybody recognize an issue?

#

package.json

{
  "name": "libname",
  "version": "0.0.1",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "tsc",
    "local": "tsc && npm pack --pack-destination ~"
  },
  "devDependencies": {
    "typescript": "^4.9.5"
  },
  "type": "module"
}

The library doesn't seem to need a typescript dependency? I don't want any dependencies if I don't need them.

tsconfig.json

{
  "compilerOptions": {
    "module": "es2020",
    "target": "es2020",
    "declaration": true,
    "outDir": "./dist",
    "esModuleInterop": true
  },
  "include": [
    "src/**/*"
  ]
}

index.ts

export * from './test'
export * from './components/meta'
export * from './lib/utils'

test.ts

export function sayHello() {
  console.log('hi')
}

#

This is my first npm library, so I feel likeI'm missing something really basic that hard to search about.

gritty bluff Mar 31, 2023, 1:09 AM

#

TypeError: Cannot read properties of undefined (reading 'sayHello')
what code causes this exactly? do you have a stacktrace?

exotic minnow Mar 31, 2023, 1:11 AM

#

I do, it's initially being run SSR side of a SvelteKit app, so basically node.js

#

TypeError: Cannot read properties of undefined (reading 'sayHello')
    at load (/....../src/routes/+layout.ts:15:2)
    at Module.load_data (/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/load_data.js:110:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async eval (/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/src/runtime/server/page/index.js:196:13)

#

It's SSR, I want to support both node and browser. That may be the source of my issues.

gritty bluff Mar 31, 2023, 1:13 AM

#

maybe try running it in a minimal environment first

exotic minnow Mar 31, 2023, 1:14 AM

#

minimal in browser? not node?

gritty bluff Mar 31, 2023, 1:14 AM

#

could be in node

exotic minnow Mar 31, 2023, 1:18 AM

#

so the simplest project with the depndency:
test.js

import { sayHello } from 'libname'
sayHello()

node test.js gets this error:

node:internal/process/esm_loader:108
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/..../test/node_modules/.pnpm/file+..+..+..+libname-0.0.1.tgz/node_modules/libname/dist/test' imported from /..../test/node_modules/.pnpm/file+..+..+..+libname-0.0.1.tgz/node_modules/libname/dist/index.js
Did you mean to import ../../../../../../../test.js?
    at new NodeError (node:internal/errors:400:5)
    at finalizeResolution (node:internal/modules/esm/resolve:260:11)
    at moduleResolve (node:internal/modules/esm/resolve:879:10)
    at defaultResolve (node:internal/modules/esm/resolve:1087:11)
    at nextResolve (node:internal/modules/esm/loader:161:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:834:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:415:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

exotic minnow Mar 31, 2023, 3:32 AM

#

not certain if that use is correct though

#

Does anybody have an example of the simplest working TypeScript npm library exporting basic Classes and functions?

jade heron Mar 31, 2023, 3:43 AM

#

Can u post ur folder structure?

exotic minnow Mar 31, 2023, 12:18 PM

#

Screen_Shot_2023-03-31_at_9.17.14_AM.png

cedar swan Mar 31, 2023, 10:48 PM

#

what does your dist folder look like

exotic minnow Apr 1, 2023, 2:48 AM

#

here's the dist folder in my other project node_modules

Screen_Shot_2023-03-31_at_11.46.37_PM.png

exotic minnow Apr 1, 2023, 3:06 AM

#

im trying everything i can. I tried putting this right in the index.ts so not even importing:

export function sayHello() {
    console.log('hi');
}
export const sayGoodbye = () => {
    console.log('goodbye');
};

#

still undefined

#

this reddit sonuds similar but they dont seem to have figured it out:
https://www.reddit.com/r/typescript/comments/d0gxyx/why_is_my_class_undefined_when_exported_like_this/

r/typescript - why is my class undefined when exported like this?

4 votes and 13 comments so far on Reddit

exotic minnow Apr 2, 2023, 2:02 AM

#

OK. So I went back to scratch:

I made the most simple javascript only with just a index.js with those methods. It worked.
I manually added a index.d.ts with type defs for those methods. It worked.
I moved those methods into a seperate test.js and test.d.ts and imported in index, and I got the error! methods undefined.

#

So the problem is with how I'm importing:

export * from './test';

#

This also fails with the same undefined methods:

export { sayHello, sayGoodbye } from './test';

#

those exports are fine though? I pinpointed the problem, but what could be wrong?

tulip sage Apr 2, 2023, 2:47 AM

#

Do you have a repo I could look at? I suspect esm shenanigans, but it's hard to say for sure without a project to look at

gleaming cradle Apr 2, 2023, 2:57 AM

#

exotic minnow so the simplest project with the depndency: test.js ``` import { sayHello } from...

do you perhaps need to import from ./test.js, not ./test?

jade heron Apr 2, 2023, 2:57 AM

#

@exotic minnow u will have to add the .js extension for ur imports, so it should look like

export { sayHello, sayGoodbye } from ‘./test.js';

I suspect this could be the issue, lemme know if it fixes

gleaming cradle Apr 2, 2023, 2:57 AM

#

lol

exotic minnow Apr 2, 2023, 2:57 AM

#

ill try....

#

yeah! that worked with my testlib... ill try ith my main lib and more real situation...

#

does not work with typescript. this creates the error:
export * from './lib/utils.ts'
An import path cannot end with a '.ts' extension. Consider importing './lib/utils.js' instead.ts(2691)

#

should index.ts just import the .js files, even they they don't exist yet?

tulip sage Apr 2, 2023, 3:02 AM

#

Yeah, TS doesn't rewrite exports, so your imports should try to import the extension that the files will eventually have

exotic minnow Apr 2, 2023, 3:02 AM

#

if so, should my index.ts just be index.js?

tulip sage Apr 2, 2023, 3:03 AM

#

TS will still resolve the .js import to the .ts file for type checking, but it will point to the compiled file when emitted

jade heron Apr 2, 2023, 3:04 AM

#

Even if u have any typescript files ur import should still be .js

#

Typescript will be smart enough to know to look for .ts

#

Once the file is compiled it becomes .js so that’s why u gotta put that

#

Ur index can stay as .ts

exotic minnow Apr 2, 2023, 3:08 AM

#

I dono. it worked for the testlib with just those sayHello() methods. But the class in my main ts library is still undefined, same error as before.

#

thanks though, that .js stuff seems like correct thing...

#

or any method

exotic minnow Apr 2, 2023, 4:00 AM

#

still trying stuff.... it seems to be just the class that's breaking everything. When I exclude the class, the other utility methods work. When I include the class then everything is undefined.

#

that class has some static

jade heron Apr 2, 2023, 4:43 AM

#

exotic minnow thanks though, that .js stuff seems like correct thing...

Ur .js need to be added in every file that has imports

exotic minnow Apr 2, 2023, 4:45 AM

#

did that. i think it's something to do with a static class. trying to use a modue or namespace instead, but same undefined

jade heron Apr 2, 2023, 4:45 AM

#

Another way to check is try to debug and run ur compiled .js code in dist/
Add some codes in the index.js to see if things work

exotic minnow Apr 2, 2023, 5:02 AM

#

I think I got it working.... went back to class. I was storing a reference to window.fetch but works now that i check (typeof window !== 'undefined') first.

Doesn't make sense to me that it would cause the whole class to be undefined -- the same error as the .js thing. Dono, too tired. maybe make sense tomorrow.

exotic minnow Apr 4, 2023, 12:12 AM

#

It's all working. There were two issues causing the same error (making the imported class undefined). Neither intuitive:

Library imports all need .js.
Don't use window server-side.

#Trying to make an NPM library, but methods and classes are all undefined.