我正在使用 Searchkit 节点模块从 Jekyll 项目中的 elasticsearch 检索数据。为此，我使用 webpack 并按照 that tutorial 中的建议使用react.
我在实例化 Searchkit 对象时遇到问题。
当我使用 webpack 然后使用 Jekyll 构建我的项目时，我没有收到任何错误。
但是我尝试注入(inject)的组件没有出现在网站上，我在 google chrome 控制台中收到此错误:
Search.js:41 Uncaught TypeError: Cannot read property 'SearchkitManager' of undefined
at eval (Search.js:41)
at Object../webpack/components/Search.js (bundle.js:6933)
at __webpack_require__ (bundle.js:20)
at eval (entry.js:9)
at Object../webpack/entry.js (bundle.js:6945)
at __webpack_require__ (bundle.js:20)
at bundle.js:84
at bundle.js:87
Search.js:41
var sk = new _searchkit2.default.SearchkitManager('http://demo.searchkit.co/api/movies/');
我尝试在控制台中实例化它，但没有出现任何错误。
我认为这是配置问题，但我不熟悉这些技术。
有人知道如何解决这个问题吗？
package.json :
{
"name": "proto_doc",
"version": "1.0.0",
"description": "",
"main": "index.js",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.4.1",
"react-addons-update": "^15.6.2",
"react-dom": "^16.4.1",
"searchkit": "^2.3.0",
"serviceworker-webpack-plugin": "^1.0.0-alpha02",
"webpack": "^4.0.0-beta.3",
"webpack-cli": "0.0.8-development",
"webpack-dashboard": "^2.0.0",
"webpack-dev-server": "^3.1.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "npx webpack-cli --mode development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/pbelabbes/proto_doc.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/pbelabbes/proto_doc/issues"
},
"homepage": "https://github.com/pbelabbes/proto_doc#readme"
}
webpack.config.js
const webpack = require("webpack");
const path = require("path");
let config = {
entry: "./webpack/entry.js",
output: {
path: path.resolve(__dirname, "./assets/javascripts/"),
filename: "bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: {
presets: ['react', 'es2015']
}
}],
},
mode: "development"
}
module.exports = config;
entry.js
// Dependencies.
import React from 'react';
import {render} from 'react-dom';
// Custom components.
import Search from './components/Search';
// Mount apps to DOM.
render(<Search /> , document.getElementById('react-search'));
Search.js
// 1. Import Dependencies. =====================================================
import React, {Component} from 'react';
import Searchkit,{
SearchBox,
RefinementListFilter,
Hits,
HitsStats,
SearchkitComponent,
SelectedFilters,
MenuFilter,
HierarchicalMenuFilter,
Pagination,
ResetFilters
} from "searchkit";
import * as _ from "lodash";
// custom to my project: generate random example searchbox placeholder.
// import SearchQuotes from './SearchQuotes';
// var randomQuote = SearchQuotes[Math.floor(Math.random() * SearchQuotes.length)];
// 2. Connect elasticsearch with searchkit =====================================
// Set ES url - use a protected URL that only allows read actions.
// const sk = new Searchkit.SearchkitManager(ELASTICSEARCH_URL, {});
const sk = new Searchkit.SearchkitManager('http://demo.searchkit.co/api/movies/');
// Custom hitItem display HTML.
const HitItem = (props) => (
<div className={props.bemBlocks.item().mix(props.bemBlocks.container("item"))}>
<a href={ `https://omc.github.io/jekyll-elasticsearch-boilerplate${props.result._source.url}` }>
<div className={props.bemBlocks.item("title")}
dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.title",false) || props.result._source.title}}></div>
</a>
<div>
<small className={props.bemBlocks.item("hightlights")}
dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.text",'')}}></small>
</div>
</div>
)
// 3. Search UI. ===============================================================
class Search extends Component {
render(){
const SearchkitProvider = Searchkit.SearchkitProvider;
const Searchbox = Searchkit.SearchBox;
var queryOpts = {
analyzer:"standard"
}
return (
<SearchkitProvider searchkit={sk}>
<div className="search">
<div className="search__query">
{/* search input box */}
<Searchbox searchOnChange={true}
autoFocus={true}
queryOptions={queryOpts}
translations={{"searchbox.placeholder":"ex: bcd configuration", "NoHits.DidYouMean":"Search for {suggestion}."}}
queryFields={["text", "title"]}/>
</div>
<div className="_Search_display_wrapper">
<div className="_Search_facets">
{/* search faceting */}
<RefinementListFilter
id="categories"
title="Category"
field="categories"
operator="AND"/>
</div>
<div className="search__results">
{/* search results */}
<Hits hitsPerPage={50}
highlightFields={["title", "text"]}
itemComponent={HitItem}/>
{/* if there are no results */}
<NoHits className="sk-hits" translations={{
"NoHits.NoResultsFound":"No results were found for {query}",
"NoHits.DidYouMean":"Search for {suggestion}"
}} suggestionsField="text"/>
</div>
</div>
</div>
</SearchkitProvider>
)
}
}
export default Search;
控制台中提到的Babel生成的Search.js
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(/*! react */ "./node_modules/react/index.js");
var _react2 = _interopRequireDefault(_react);
var _searchkit = __webpack_require__(/*! searchkit */ "./node_modules/searchkit/lib/index.js");
var _searchkit2 = _interopRequireDefault(_searchkit);
var _lodash = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
var _ = _interopRequireWildcard(_lodash);
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // 1. Import Dependencies. =====================================================
// custom to my project: generate random example searchbox placeholder.
// import SearchQuotes from './SearchQuotes';
// var randomQuote = SearchQuotes[Math.floor(Math.random() * SearchQuotes.length)];
// 2. Connect elasticsearch with searchkit =====================================
// Set ES url - use a protected URL that only allows read actions.
var ELASTICSEARCH_URL = 'https://doc-bonita-test-4287920661.us-west-2.bonsaisearch.net/bonita_doc';
console.log(ELASTICSEARCH_URL);
// const sk = new Searchkit.SearchkitManager(ELASTICSEARCH_URL, {});
var sk = new _searchkit2.default.SearchkitManager('http://demo.searchkit.co/api/movies/');
// Custom hitItem display HTML.
var HitItem = function HitItem(props) {
return _react2.default.createElement(
"div",
{ className: props.bemBlocks.item().mix(props.bemBlocks.container("item")) },
_react2.default.createElement(
"a",
{ href: "https://omc.github.io/jekyll-elasticsearch-boilerplate" + props.result._source.url },
_react2.default.createElement("div", { className: props.bemBlocks.item("title"),
dangerouslySetInnerHTML: { __html: _.get(props.result, "highlight.title", false) || props.result._source.title } })
),
_react2.default.createElement(
"div",
null,
_react2.default.createElement("small", { className: props.bemBlocks.item("hightlights"),
dangerouslySetInnerHTML: { __html: _.get(props.result, "highlight.text", '') } })
)
);
};
// 3. Search UI. ===============================================================
var Search = function (_Component) {
_inherits(Search, _Component);
function Search() {
_classCallCheck(this, Search);
return _possibleConstructorReturn(this, (Search.__proto__ || Object.getPrototypeOf(Search)).apply(this, arguments));
}
_createClass(Search, [{
key: "render",
value: function render() {
var SearchkitProvider = _searchkit2.default.SearchkitProvider;
var Searchbox = _searchkit2.default.SearchBox;
var queryOpts = {
analyzer: "standard"
};
return _react2.default.createElement(
SearchkitProvider,
{ searchkit: sk },
_react2.default.createElement(
"div",
{ className: "search" },
_react2.default.createElement(
"div",
{ className: "search__query" },
_react2.default.createElement(Searchbox, { searchOnChange: true,
autoFocus: true,
queryOptions: queryOpts,
translations: { "searchbox.placeholder": "ex: bcd configuration", "NoHits.DidYouMean": "Search for {suggestion}." },
queryFields: ["text", "title"] })
),
_react2.default.createElement(
"div",
{ className: "_Search_display_wrapper" },
_react2.default.createElement(
"div",
{ className: "_Search_facets" },
_react2.default.createElement(_searchkit.RefinementListFilter, {
id: "categories",
title: "Category",
field: "categories",
operator: "AND" })
),
_react2.default.createElement(
"div",
{ className: "search__results" },
_react2.default.createElement(_searchkit.Hits, { hitsPerPage: 50,
highlightFields: ["title", "text"],
itemComponent: HitItem }),
_react2.default.createElement(NoHits, { className: "sk-hits", translations: {
"NoHits.NoResultsFound": "No results were found for {query}",
"NoHits.DidYouMean": "Search for {suggestion}"
}, suggestionsField: "text" })
)
)
)
);
}
}]);
return Search;
}(_react.Component);
exports.default = Search;
最佳答案
事实上，这就是我导入 Searchkit 模块包的方式。因此，我删除了所有 Searchkit. 并在导入中添加了 SearchkitManager、SearchkitProvider、Searchbox 和 NoHits。
所以现在，我有
// 1. Import Dependencies. =====================================================
import React, {Component} from 'react';
import {
SearchBox,
RefinementListFilter,
Hits,
HitsStats,
SearchkitComponent,
SelectedFilters,
MenuFilter,
HierarchicalMenuFilter,
Pagination,
ResetFilters,
SearchkitManager,
SearchkitProvider,
NoHits
} from "searchkit";
import * as _ from "lodash";
// 2. Connect elasticsearch with searchkit =====================================
// Set ES url - use a protected URL that only allows read actions.
const ELASTICSEARCH_URL = 'http://demo.searchkit.co/api/movies/';
const sk = new SearchkitManager(ELASTICSEARCH_URL, {});
console.log(sk);
// Custom hitItem display HTML.
const HitItem = (props) => (
<div className={props.bemBlocks.item().mix(props.bemBlocks.container("item"))}>
<a href={ `https://omc.github.io/jekyll-elasticsearch-boilerplate${props.result._source.url}` }>
<div className={props.bemBlocks.item("title")}
dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.title",false) || props.result._source.title}}></div>
</a>
<div>
<small className={props.bemBlocks.item("hightlights")}
dangerouslySetInnerHTML={{__html:_.get(props.result,"highlight.text",'')}}></small>
</div>
</div>
)
// 3. Search UI. ===============================================================
class Search extends Component {
render(){
const SearchkitProvider = SearchkitProvider;
const Searchbox = SearchBox;
var queryOpts = {
analyzer:"standard"
}
return (
<SearchkitProvider searchkit={sk}>
<div className="search">
<div className="search__query">
{/* search input box */}
<Searchbox searchOnChange={true}
autoFocus={true}
queryOptions={queryOpts}
translations={{"searchbox.placeholder":"pof", "NoHits.DidYouMean":"Search for {suggestion}."}}
queryFields={["text", "title"]}/>
</div>
<div className="_Search_display_wrapper">
<div className="_Search_facets">
{/* search faceting */}
<RefinementListFilter
id="categories"
title="Category"
field="categories"
operator="AND"/>
</div>
<div className="search__results">
{/* search results */}
{/* <Hits hitsPerPage={50}
highlightFields={["title", "text"]}
itemComponent={HitItem}/> */}
{/* if there are no results */}
<NoHits className="sk-hits" translations={{
"NoHits.NoResultsFound":"No results were found for {query}",
"NoHits.DidYouMean":"Search for {suggestion}"
}} suggestionsField="text"/>
</div>
</div>
</div>
</SearchkitProvider>
)
}
}
export default Search;
我仍然有问题，但与 SearchkitProvider 无关。我在做。
关于javascript - 使用 Jekyll、react 和 webpack 实例化对象的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51192308/