Cannot call a namespace ('$') #1267
Comments
|
Use triple backticks (```) to enclose code blocks please — your issue is unreadable. See this page for info. It sounds like you're doing this: import * as $ from 'jquery';It should be this: import $ from 'jquery'; |
|
@Rich-Harris thnx, for the reply. I updated the comment. in my system-config.ts i set $ as a global... Which i use in previous projects and does seem to work. I think the problem is in one of the 3th party libraries using jquery, but no clue how to find it. |
|
Ok, i have some new info I'm using fullcalendar which breaks... Changing the jquery import as mentioned by @Rich-Harris solved it.... But, now i modified a 3th party lib, which i dont like to much... so, is there a beter way to do this? |
|
Same issue here when importing jQuery. We're running typescript and have to import jQuery as: When we compile for es2015 and run rollupJs, then we get this error. |
|
To add to the previous comment, changing jquery.d.ts to |
|
Any updates on this? |
|
Unfortunately this is out of our hands — it needs to be fixed on the TypeScript end. Calling a namespace isn't possible, libraries like jQuery need to be imported as a default export... import $ from 'jquery';...which means TypeScript needs to generate code like that. I'll close this issue as there isn't anything Rollup can do differently. Thanks all |
|
Typescript is following the ES6 module spec and not introducing a '.default guard' for CommonJS modules that do things like The correct way to consume jQuery is Rollup's CommonJS proxy is doing something like When Rollup imports a namespace it does an |
|
I fixed it by adding my own check after the import: In all environments except the Rollup bundle, jquery will be the entire imported object. Rollup will generate something like this: I think it would be better if Rollup somehow detected if a namespace import had a function signature and allowed you to call it directly. |
Fixed @types/jquery issues and rollup issues DefinitelyTyped/DefinitelyTyped#17239 DefinitelyTyped/DefinitelyTyped#17239 rollup/rollup#1267 by pairing "typescript": "~2.3.4" with "@types//jquery": "3.2.5" import * as jqueryProxy from 'jquery' const jquery: JQueryStatic = (<any>jqueryProxy).default || jqueryProxy In all environments except the Rollup bundle, jquery will be the entire imported object. Rollup will generate something like this: var jqueryProxy = Object.freeze({ default: jquery$1, __moduleExports: jquery$1 }) So in the Rollup bundle jquery will be set to jqueryProxy.default.
|
I have a working environment in jQuery, TypeScript and Rollup with the following setups:
import $ from 'jquery';
$.fn['yourFunction'] = function(options) {
...
};
And you'll get output like the following: (function ($) {
'use strict';
$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
$.fn['yourFunction'] = function (options) {
...
};
}(jQuery));Updated: Here is my |
|
Followed @nghuuphuoc |
|
I'm experiencing the same issue. I have a third-party module exported like this: When I'm importing it as When I'm importing it as The workaround, suggested by Enrique helps, but is there a better way? |
More information, see: rollup/rollup#1267 (comment)
|
I was having the same issue with two libraries, I used Enrique's workaround like so: import * as _cosmiconfig from "cosmiconfig";
import * as _filenamify from "filenamify";
const cosmiconfig = (_cosmiconfig as any).default || _cosmiconfig;
const filenamify = (_filenamify as any).default || _filenamify;But I didn't like how this forced the types of I ended up using My project source file: import * as cosmiconfig from "cosmiconfig";
import * as filenamify from "filenamify";My import replace from "rollup-plugin-re";plugins: [
replace({
exclude: "node_modules/**",
replaces: {
'import \* as cosmiconfig from "cosmiconfig";': 'import cosmiconfig from "cosmiconfig";',
'import \* as filenamify from "filenamify";': 'import filenamify from "filenamify";',
}
}),
// other pluginsIt's not the prettiest solution, but I prefer it because:
|
// Depending on whether rollup is used, moment needs to be imported differently.
// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
// the `default as` syntax.
import * as _moment from 'moment';
// tslint:disable-next-line:no-duplicate-imports
import {default as _rollupMoment, Moment} from 'moment';
const moment = _rollupMoment || _moment; |
|
Thanks for the workaround, @schtauffen! Here's what it looks like when using import * as jscsTypes from "jscodeshift";
import { default as jscodeshiftDefault } from "jscodeshift";
const jscodeshiftNamespace = jscsTypes;
const jscs = jscodeshiftNamespace || jscodeshiftDefault;
// Simplified version
function findMatchingNodes(code: string): jscsTypes.Collection {
const ast = jscs(code);
return ast.find(jscsTypes.VariableDeclarator);
}Basically the same as @schtauffen's above, except that this is worth noting on the TS front: If, in the above example, you do this: const { Collection, VariableDeclarator } = jscs;then this will work: return ast.find(VariableDeclarator);but this will not: function findMatchingNodes(code: string): Collection { ... }In other words, you need the namespace in order to use something as a type, but can unpack it if you're only using it as a value. |
|
For those of you having trouble importing using one of these: import $ from 'jquery'
import * as $ from 'jquery'You can try doing this: import jQuery from 'jquery'See this related StackOverflow answer for more info: https://stackoverflow.com/a/3291916/12206312 |
Hi,
I'm used the have previous project using rollup/aot successfully. Angular2 projects using JQuery as well.
But now for some reason i don't manage to get it rolled-up.
I'm not able to figure out where the problem occurs.
Any suggestions?
Here are my config files:
rollup-config:
system-config.ts
package.json
The text was updated successfully, but these errors were encountered: