TypeError: $ is not a function - toastr.js- AMD and SystemJS
TypeError: $ is not a function - toastr.js- AMD and SystemJS
我收到以下错误。
toastr.js:60 Uncaught (in promise) TypeError: $ is not a function
at getContainer (toastr.js:60)
at notify (toastr.js:215)
at r.error (toastr.js:49)
但是JQuery已经加载所以我不明白发生了什么。
更新
我开始明白发生了什么。
我在本地文件夹中编辑了以下文件：project/jspm_packages\npm\toastr@2.1.2\toastr.js
具体@第470行：https://github.com/CodeSeven/toastr/blob/1ef00d723691b563b610077a08539391386826b3/toastr.js#L470
我评论了旧代码并添加了以下内容：
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
/*if (typeof module !== 'undefined' && module.exports) { //Node
module.exports = factory(require('jquery'));
} else {
window.toastr = factory(window.jQuery);
}*/
window.toastr = factory(window.jQuery);
module.exports = factory(window.jQuery);
}));
我感觉 require('jquery') 命令导致了对位于 dist/jquery.js
的文件的获取请求
但是，此文件不存在，因此一位同事创建了一个空文件。
这修复了其他错误，但似乎 toastr 受到了影响。
我不是 JS 专家，但似乎 require 函数可能正在创建 jquery 的本地范围版本（基于 dist/js 文件），然后将此引用传递给 constructor/factory 烤面包机。
问题
我的问题是 toastr 中的 require 正在 dist 中寻找不存在的 jquery 文件。有没有办法创建一个 returns 现有 JQuery 预期格式的包装文件？
我认为包装器需要是 AMD 格式...
package.json 内容
{
"name": "mbak-ui",
"version": "0.5.0",
"description": "mbak",
"keywords": [
"mbak"
],
"main": "dist/main.js",
"repository": {
"type": "git",
"url": "https://MYREPO"
},
"scripts": {
"test": "gulp test",
"e2e": "gulp serve webdriver-standalone e2e"
},
"devDependencies": {
"aurelia-bundler": "^0.4.0",
"aurelia-protractor-plugin": "^1.0.0",
"aurelia-tools": "^1.0.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-plugin-istanbul": "^2.0.3",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-flow-strip-types": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-1": "^6.16.0",
"browser-sync": "^2.17.5",
"conventional-changelog": "1.1.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-bump": "^2.5.0",
"gulp-changed": "^1.3.2",
"gulp-eslint": "^3.0.1",
"gulp-htmlmin": "^3.0.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-protractor": "3.0.0",
"gulp-sourcemaps": "^2.2.0",
"http-proxy-middleware": "^0.17.4",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-jspm": "2.2.0",
"merge-stream": "^1.0.1",
"object.assign": "^4.0.4",
"protractor": "^4.0.10",
"proxy-middleware": "^0.15.0",
"require-dir": "^0.3.2",
"requireg": "^0.1.7",
"run-sequence": "^1.2.2",
"vinyl-paths": "^2.1.0",
"yargs": "^6.3.0"
},
"jspm": {
"dependencies": {
"aurelia-animator-css": "npm:aurelia-animator-css@^1.0.0",
"aurelia-binding": "npm:aurelia-binding@^1.2.1",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0",
"aurelia-dialog": "npm:aurelia-dialog@^1.0.0-rc.1.0.3",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0",
"aurelia-fetch-client": "npm:aurelia-fetch-client@^1.0.0",
"aurelia-framework": "npm:aurelia-framework@^1.0.0",
"aurelia-history-browser": "npm:aurelia-history-browser@^1.0.0",
"aurelia-http-client": "npm:aurelia-http-client@^1.0.0",
"aurelia-loader-default": "npm:aurelia-loader-default@^1.0.0",
"aurelia-logging-console": "npm:aurelia-logging-console@^1.0.0",
"aurelia-pal-browser": "npm:aurelia-pal-browser@^1.0.0",
"aurelia-polyfills": "npm:aurelia-polyfills@^1.0.0",
"aurelia-router": "npm:aurelia-router@^1.0.7",
"aurelia-templating-binding": "npm:aurelia-templating-binding@^1.0.0",
"aurelia-templating-resources": "npm:aurelia-templating-resources@^1.0.0",
"aurelia-templating-router": "npm:aurelia-templating-router@^1.0.0",
"aurelia-testing": "npm:aurelia-testing@^1.0.0-beta.2.0.1",
"aurelia-validation": "npm:aurelia-validation@^1.0.0",
"aurelia-view-manager": "npm:aurelia-view-manager@^0.1.0",
"css": "github:systemjs/plugin-css@^0.1.35",
"fetch": "github:github/fetch@^2.0.3",
"i18next-xhr-backend": "npm:i18next-xhr-backend@^1.4.2",
"moment": "npm:moment@^2.18.1",
"select2": "github:select2/select2@^4.0.3",
"text": "github:systemjs/plugin-text@^0.0.11",
"zui": "MBAKnet:mbak@alpha"
},
"devDependencies": {
"babel": "npm:babel-core@^5.8.24",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4"
},
"overrides": {
"github:select2/select2@4.0.3": {
"shim": {
"select2": [
"jquery"
]
},
"dependencies": {
"jquery": "jspm:jquery@*"
}
}
}
},
"dependencies": {}
}
config.js 内容
https://gist.github.com/menelaosbgr/94d64c03fd8f010688fb9424b63f36c5
解决方案
我找到答案并发布了。我只需要将 jquery 安装为 jquery （进入项目）：
jspm install jquery=jquery
问题是 toastr 正在使用以下命令，需要安装模块。
`module.exports = factory(require('jquery'));`
原来我需要的只是 运行:
jspm install jquery=jquery
参考：
我收到以下错误。
toastr.js:60 Uncaught (in promise) TypeError: $ is not a function
at getContainer (toastr.js:60)
at notify (toastr.js:215)
at r.error (toastr.js:49)
但是JQuery已经加载所以我不明白发生了什么。
更新
我开始明白发生了什么。
我在本地文件夹中编辑了以下文件：project/jspm_packages\npm\toastr@2.1.2\toastr.js
具体@第470行：https://github.com/CodeSeven/toastr/blob/1ef00d723691b563b610077a08539391386826b3/toastr.js#L470
我评论了旧代码并添加了以下内容：
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
/*if (typeof module !== 'undefined' && module.exports) { //Node
module.exports = factory(require('jquery'));
} else {
window.toastr = factory(window.jQuery);
}*/
window.toastr = factory(window.jQuery);
module.exports = factory(window.jQuery);
}));
我感觉 require('jquery') 命令导致了对位于 dist/jquery.js
但是，此文件不存在，因此一位同事创建了一个空文件。
这修复了其他错误，但似乎 toastr 受到了影响。
我不是 JS 专家，但似乎 require 函数可能正在创建 jquery 的本地范围版本（基于 dist/js 文件），然后将此引用传递给 constructor/factory 烤面包机。
问题
我的问题是 toastr 中的 require 正在 dist 中寻找不存在的 jquery 文件。有没有办法创建一个 returns 现有 JQuery 预期格式的包装文件？
我认为包装器需要是 AMD 格式...
package.json 内容
{
"name": "mbak-ui",
"version": "0.5.0",
"description": "mbak",
"keywords": [
"mbak"
],
"main": "dist/main.js",
"repository": {
"type": "git",
"url": "https://MYREPO"
},
"scripts": {
"test": "gulp test",
"e2e": "gulp serve webdriver-standalone e2e"
},
"devDependencies": {
"aurelia-bundler": "^0.4.0",
"aurelia-protractor-plugin": "^1.0.0",
"aurelia-tools": "^1.0.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-plugin-istanbul": "^2.0.3",
"babel-plugin-syntax-flow": "^6.18.0",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-flow-strip-types": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-1": "^6.16.0",
"browser-sync": "^2.17.5",
"conventional-changelog": "1.1.0",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-bump": "^2.5.0",
"gulp-changed": "^1.3.2",
"gulp-eslint": "^3.0.1",
"gulp-htmlmin": "^3.0.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.1.0",
"gulp-protractor": "3.0.0",
"gulp-sourcemaps": "^2.2.0",
"http-proxy-middleware": "^0.17.4",
"jasmine-core": "^2.5.2",
"karma": "^1.3.0",
"karma-babel-preprocessor": "^6.0.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-jspm": "2.2.0",
"merge-stream": "^1.0.1",
"object.assign": "^4.0.4",
"protractor": "^4.0.10",
"proxy-middleware": "^0.15.0",
"require-dir": "^0.3.2",
"requireg": "^0.1.7",
"run-sequence": "^1.2.2",
"vinyl-paths": "^2.1.0",
"yargs": "^6.3.0"
},
"jspm": {
"dependencies": {
"aurelia-animator-css": "npm:aurelia-animator-css@^1.0.0",
"aurelia-binding": "npm:aurelia-binding@^1.2.1",
"aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0",
"aurelia-dialog": "npm:aurelia-dialog@^1.0.0-rc.1.0.3",
"aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0",
"aurelia-fetch-client": "npm:aurelia-fetch-client@^1.0.0",
"aurelia-framework": "npm:aurelia-framework@^1.0.0",
"aurelia-history-browser": "npm:aurelia-history-browser@^1.0.0",
"aurelia-http-client": "npm:aurelia-http-client@^1.0.0",
"aurelia-loader-default": "npm:aurelia-loader-default@^1.0.0",
"aurelia-logging-console": "npm:aurelia-logging-console@^1.0.0",
"aurelia-pal-browser": "npm:aurelia-pal-browser@^1.0.0",
"aurelia-polyfills": "npm:aurelia-polyfills@^1.0.0",
"aurelia-router": "npm:aurelia-router@^1.0.7",
"aurelia-templating-binding": "npm:aurelia-templating-binding@^1.0.0",
"aurelia-templating-resources": "npm:aurelia-templating-resources@^1.0.0",
"aurelia-templating-router": "npm:aurelia-templating-router@^1.0.0",
"aurelia-testing": "npm:aurelia-testing@^1.0.0-beta.2.0.1",
"aurelia-validation": "npm:aurelia-validation@^1.0.0",
"aurelia-view-manager": "npm:aurelia-view-manager@^0.1.0",
"css": "github:systemjs/plugin-css@^0.1.35",
"fetch": "github:github/fetch@^2.0.3",
"i18next-xhr-backend": "npm:i18next-xhr-backend@^1.4.2",
"moment": "npm:moment@^2.18.1",
"select2": "github:select2/select2@^4.0.3",
"text": "github:systemjs/plugin-text@^0.0.11",
"zui": "MBAKnet:mbak@alpha"
},
"devDependencies": {
"babel": "npm:babel-core@^5.8.24",
"babel-runtime": "npm:babel-runtime@^5.8.24",
"core-js": "npm:core-js@^1.1.4"
},
"overrides": {
"github:select2/select2@4.0.3": {
"shim": {
"select2": [
"jquery"
]
},
"dependencies": {
"jquery": "jspm:jquery@*"
}
}
}
},
"dependencies": {}
}
config.js 内容
https://gist.github.com/menelaosbgr/94d64c03fd8f010688fb9424b63f36c5
解决方案
我找到答案并发布了。我只需要将 jquery 安装为 jquery （进入项目）：
jspm install jquery=jquery
问题是 toastr 正在使用以下命令，需要安装模块。
`module.exports = factory(require('jquery'));`
原来我需要的只是 运行:
jspm install jquery=jquery
参考：