Stack Overflow Asked by Marc Rasmussen on February 5, 2021
I feel like ive tried everything but nothing seem to work. So i create this question in hopes that someone with more knowledge than me can come to my aid:
I have created and published the following module:
Index.ts :
import ContentIOService from "./IOServices/ContentIOService";
export = {
ContentIOService: ContentIOService,
}
Where ContentIOService
is the following file:
import {SuperIO} from "../Framework/SuperIO";
export interface ICMSContentData {
id: number;
url: string;
htmlTag: string;
importJSComponent: string;
componentData: string
}
export interface CMSData {
id: number;
url: string;
htmlTag: string;
importJSComponent: string;
componentData: Object
}
export default class ContentIOService extends SuperIO {
private static instance: ContentIOService;
public static getInstance(): ContentIOService {
if (!ContentIOService.instance) {
ContentIOService.instance = new ContentIOService();
}
return ContentIOService.instance;
}
public async GetContent(url: string) {
const response = await super.get<ICMSContentData[]>(url, {});
try {
if (response?.parsedBody) {
return this.ProcessResponse(response.parsedBody);
} else {
this.handleHTTPError(new Error("Error"))
}
} catch (e) {
this.handleHTTPError(e);
}
}
private ProcessResponse(ContentData: ICMSContentData[]): CMSData[] {
let CMSData: CMSData[] = [];
for (let i = 0; i < ContentData.length; i++) {
CMSData.push({
id: ContentData[i].id,
url: ContentData[i].url,
htmlTag: ContentData[i].htmlTag,
importJSComponent: ContentData[i].importJSComponent,
componentData: this.parseComponentData(ContentData[i].componentData)
})
}
return CMSData;
}
private handleHTTPError(e: Error) {
console.log(e)
}
private parseComponentData(parseAbleString: string): Object {
return JSON.parse(parseAbleString);
}
}
Then i have built this together and bundled it into a /lib
folder:
This is built with the following tsconfig
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./lib",
"esModuleInterop": true,
"strict": true
},
"include": ["src"],
"exclude": ["node_modules", "**/__tests__/*"]
}
For the sake of argument i will also post my Package.json
should that be necessary:
{
"name": "sdk-io-package",
"version": "1.1.6",
"description": "",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"scripts": {
"test": "jest --config jestconfig.json",
"build": "tsc",
"format": "prettier --write "src/**/*.ts" "src/**/*.js"",
"lint": "tslint -p tsconfig.json"
},
"keywords": [],
"author": "Marc Rasmussen",
"license": "MIT",
"devDependencies": {
"@types/jest": "25.2.2",
"chai": "^4.2.0",
"es6-promise": "^4.2.8",
"isomorphic-fetch": "^2.2.1",
"jest": "25.2.2",
"prettier": "^2.1.1",
"ts-jest": "^26.3.0",
"tslint": "^6.1.3",
"tslint-config-prettier": "^1.18.0",
"typescript": "^3.9.7"
},
"files": [
"lib/**/*"
]
}
I publish this module on my private proget server and import it in my other project:
Where the index.js file looks like this:
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
var ContentIOService_1 = __importDefault(require("./IOServices/ContentIOService"));
module.exports = {
ContentIOService: ContentIOService_1.default,
};
Then inside of my typescript i import it:
import {LitElement, html, customElement, property} from 'lit-element';
import {ContentIOService} from 'sdk-io-package';
@customElement('my-test-element')
export class MyTestElement extends LitElement {
@property()
text: string = "Hello world";
render() {
this.test();
return html`
${this.text}
`;
}
async test (){
const instance = ContentIOService.getInstance();
const data = instance.GetContent("https://httpbin.org/get")
console.log(data);
}
}
declare global {
interface HTMLElementTagNameMap {
'my-test-element': MyTestElement;
}
}
I then run my application (it builds without any typescript errors) and serve, Go to the browser and i get the following error:
Uncaught (in promise) SyntaxError: The requested module ‘../../node_modules/sdk-io-package/lib/index.js’ does not provide an export named ‘ContentIOService’
I simply dont know what ive done wrong. I really pray that some of you guys can see my error and help me fix it.
Thank you in advance
Small update
When i look in the browser in the node_modules folder i actually dont see the folders inside lib and thereby not the module?:
export = {
ContentIOService: ContentIOService,
}
This does NOT export a value named ContentIOService
. Instead, it's a default export of an object that has a property named ContentIOService
. Those two scenarios are not the same thing.
A named export would look more like this:
import _ContentIOService from "./IOServices/ContentIOService";
export const ContentIOService = _ContentIOService;
Which you can clean up by using a re-export:
export { default as ContentIOService } from "./IOServices/ContentIOService";
Answered by Alex Wayne on February 5, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP