Import js file in TypeScript without bundling it with Rollup
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a simple TypeScript + Rollup configuration, see minimal working example here.
The folder structure is as follow:
src/mwe.ts
vendor/verovio.js <-- library, that I would like to use
vendor/verovio.d.ts <-- content (for now): declare module 'verovio'
Now I am trying to use verovio.js inside my mwe.ts:
import * as verovio from '../vendor/verovio.js'
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
My goal is to have the js library simply copied into the dist folder instead of bundled into my own library when executing the js compiler and Rollup. I simply don't unterstand how to do it. The problem here consists of two things, as far as I can see:
- The type definition is not processed correctly:
error TS2306: File '[...]/mwe/vendor/verovio.d.ts' is not a module.
- Rollup does not know how to handle the js file properly.
typescript typescript-typings rollupjs
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
add a comment |
I have a simple TypeScript + Rollup configuration, see minimal working example here.
The folder structure is as follow:
src/mwe.ts
vendor/verovio.js <-- library, that I would like to use
vendor/verovio.d.ts <-- content (for now): declare module 'verovio'
Now I am trying to use verovio.js inside my mwe.ts:
import * as verovio from '../vendor/verovio.js'
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
My goal is to have the js library simply copied into the dist folder instead of bundled into my own library when executing the js compiler and Rollup. I simply don't unterstand how to do it. The problem here consists of two things, as far as I can see:
- The type definition is not processed correctly:
error TS2306: File '[...]/mwe/vendor/verovio.d.ts' is not a module.
- Rollup does not know how to handle the js file properly.
typescript typescript-typings rollupjs
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
add a comment |
I have a simple TypeScript + Rollup configuration, see minimal working example here.
The folder structure is as follow:
src/mwe.ts
vendor/verovio.js <-- library, that I would like to use
vendor/verovio.d.ts <-- content (for now): declare module 'verovio'
Now I am trying to use verovio.js inside my mwe.ts:
import * as verovio from '../vendor/verovio.js'
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
My goal is to have the js library simply copied into the dist folder instead of bundled into my own library when executing the js compiler and Rollup. I simply don't unterstand how to do it. The problem here consists of two things, as far as I can see:
- The type definition is not processed correctly:
error TS2306: File '[...]/mwe/vendor/verovio.d.ts' is not a module.
- Rollup does not know how to handle the js file properly.
typescript typescript-typings rollupjs
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
I have a simple TypeScript + Rollup configuration, see minimal working example here.
The folder structure is as follow:
src/mwe.ts
vendor/verovio.js <-- library, that I would like to use
vendor/verovio.d.ts <-- content (for now): declare module 'verovio'
Now I am trying to use verovio.js inside my mwe.ts:
import * as verovio from '../vendor/verovio.js'
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
My goal is to have the js library simply copied into the dist folder instead of bundled into my own library when executing the js compiler and Rollup. I simply don't unterstand how to do it. The problem here consists of two things, as far as I can see:
- The type definition is not processed correctly:
error TS2306: File '[...]/mwe/vendor/verovio.d.ts' is not a module.
- Rollup does not know how to handle the js file properly.
typescript typescript-typings rollupjs
typescript typescript-typings rollupjs
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
asked Nov 23 '18 at 11:27
sonovicesonovice
367617
367617
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You are trying to load a file as a module. Rather than specifying the JS file directly you should make the .d.ts file known to the compiler (e.g. via tsconfig.json or directly via import) and simply import the module afterwards.
import '../vendor/verovio';
import * as verovio from 'verovio';
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
I sent you a pull request at https://github.com/sonovice/mwe-ts-verovio-import/pull/1 that does this and also updates the typings as per documentation of the vendor library. I also edited the Rollup config to copy the vendor library though this is not ideal since your lib will not require() the vendor lib. It would be better to specify this as a dependency and let the module loader take care of the require().
answered Nov 23 '18 at 15:37
ChristianChristian
513
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445859%2fimport-js-file-in-typescript-without-bundling-it-with-rollup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You are trying to load a file as a module. Rather than specifying the JS file directly you should make the .d.ts file known to the compiler (e.g. via tsconfig.json or directly via import) and simply import the module afterwards.
import '../vendor/verovio';
import * as verovio from 'verovio';
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
I sent you a pull request at https://github.com/sonovice/mwe-ts-verovio-import/pull/1 that does this and also updates the typings as per documentation of the vendor library. I also edited the Rollup config to copy the vendor library though this is not ideal since your lib will not require() the vendor lib. It would be better to specify this as a dependency and let the module loader take care of the require().
answered Nov 23 '18 at 15:37
ChristianChristian
513
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
add a comment |
You are trying to load a file as a module. Rather than specifying the JS file directly you should make the .d.ts file known to the compiler (e.g. via tsconfig.json or directly via import) and simply import the module afterwards.
import '../vendor/verovio';
import * as verovio from 'verovio';
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
I sent you a pull request at https://github.com/sonovice/mwe-ts-verovio-import/pull/1 that does this and also updates the typings as per documentation of the vendor library. I also edited the Rollup config to copy the vendor library though this is not ideal since your lib will not require() the vendor lib. It would be better to specify this as a dependency and let the module loader take care of the require().
answered Nov 23 '18 at 15:37
ChristianChristian
513
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
add a comment |
You are trying to load a file as a module. Rather than specifying the JS file directly you should make the .d.ts file known to the compiler (e.g. via tsconfig.json or directly via import) and simply import the module afterwards.
import '../vendor/verovio';
import * as verovio from 'verovio';
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
I sent you a pull request at https://github.com/sonovice/mwe-ts-verovio-import/pull/1 that does this and also updates the typings as per documentation of the vendor library. I also edited the Rollup config to copy the vendor library though this is not ideal since your lib will not require() the vendor lib. It would be better to specify this as a dependency and let the module loader take care of the require().
answered Nov 23 '18 at 15:37
ChristianChristian
513
You are trying to load a file as a module. Rather than specifying the JS file directly you should make the .d.ts file known to the compiler (e.g. via tsconfig.json or directly via import) and simply import the module afterwards.
import '../vendor/verovio';
import * as verovio from 'verovio';
export default class DummyClass {
constructor() {
let foo: any = new verovio.toolkit()
}
}
I sent you a pull request at https://github.com/sonovice/mwe-ts-verovio-import/pull/1 that does this and also updates the typings as per documentation of the vendor library. I also edited the Rollup config to copy the vendor library though this is not ideal since your lib will not require() the vendor lib. It would be better to specify this as a dependency and let the module loader take care of the require().
answered Nov 23 '18 at 15:37
ChristianChristian
513
answered Nov 23 '18 at 15:37
ChristianChristian
513
answered Nov 23 '18 at 15:37
ChristianChristian
513
answered Nov 23 '18 at 15:37
ChristianChristian
513
513
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
add a comment |
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
Thank you very much for your extensive help!
– sonovice
Nov 23 '18 at 15:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53445859%2fimport-js-file-in-typescript-without-bundling-it-with-rollup%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
