React-instantsearch: React instantsearch encounter error on PreactJS

[ppshein]

Do you want to request a feature or report a bug?
bug

Bug: What is the current behavior?
React Instantsearch absolutely not working on PreactJS.

Bug: What is the expected behavior?

Bug: What browsers are impacted? Which versions?
Google Chrome(Version 60.0.3112.90)

• node v7.0.0
• npm 3.10.8

Feature: What is your use case for such a feature?

import {InstantSearch} from 'react-instantsearch/dom';

<InstantSearch appId="MY_APP_ID" apiKey="MY_API" indexName="INDEX" />

Feature: What is your proposed API entry? The new option to add? What is the behavior?
nil

What is the version you are using? Always use the latest one before opening a bug issue.
"version": "3.24.3"

Error Logs

webpack-internal:///../node_modules/algoliasearch/src/AlgoliaSearchCore.js:12 Uncaught ReferenceError: process is not defined
    at eval (webpack-internal:///../node_modules/algoliasearch/src/AlgoliaSearchCore.js:12)
    at Object.../node_modules/algoliasearch/src/AlgoliaSearchCore.js (bundle.js:917)
    at __webpack_require__ (bundle.js:689)
    at fn (bundle.js:110)
    at eval (webpack-internal:///../node_modules/algoliasearch/src/browser/builds/algoliasearchLite.js:3)
    at Object.../node_modules/algoliasearch/src/browser/builds/algoliasearchLite.js (bundle.js:932)
    at __webpack_require__ (bundle.js:689)
    at fn (bundle.js:110)
    at eval (dom.js?fbab:1)
    at Object.../node_modules/react-instantsearch/dom.js (bundle.js:3376)

[Haroenv]

Can you send your complete configuration in a form that’s as simple as possible? We’ve had people using it with preact, so it should work. Did you enable preact-compat?

[ppshein]

  "devDependencies": {
    "eslint": "^4.3.0",
    "eslint-config-synacor": "^1.0.1",
    "if-env": "^1.0.0",
    "preact-cli": "^1.4.1"
  },
  "dependencies": {
    "preact": "^8.2.1",
    "preact-compat": "^3.16.0",
    "preact-router": "^2.5.5",
    "react-instantsearch": "^4.0.10"
  }

I'm currently using preact-cli and installed dependencies with npm.

[mthuret]

By making a small search I found this: https://github.com/developit/preact-cli/issues/269

[ppshein]

@mthuret I start with preact create my-great-app that's gonna be problem to search that file.

[mthuret]

@ppshein a quick fix is just to add a file name preact.config.js at the root of your app created with preact-cli.

The content:

import { DefinePlugin } from 'webpack';

export default function(config, env, helpers) {
  config.plugins.push(
    new DefinePlugin({
      process: {
        env: {},
      },
    })
  );
}

With that I make it work locally.

@Haroenv: is there something we can do on our side? Using another version of the js client?

[Haroenv]

don’t you want to have process.env.production be "production" for dead code elimination?

[ppshein]

@mthuret that's sweet while developing. But to build for production, I've encountered following errors:

Template execution failed: Error: ENOENT: no such file or directory, open '/Projects/Preact/courses/src/~/agentkeepalive/lib/utils.js'
  Error: ENOENT: no such file or directory, open '/Projects/Preact/courses/src/~/agentkeepalive/lib/utils.js'

  - prerender.js:69 handlePrerenderError
    [courses]/[preact-cli]/lib/lib/webpack/prerender.js:69:33

  - prerender.js:52 prerender
    [courses]/[preact-cli]/lib/lib/webpack/prerender.js:52:3

  - webpack-client-config.js:194 Object.ssr
    [courses]/[preact-cli]/lib/lib/webpack/webpack-client-config.js:194:54

  - template.html:111 EM6I.module.exports
    [courses]/[preact-cli]/lib/resources/template.html:111:37

  - index.js:264 
    [courses]/[html-webpack-plugin]/index.js:264:16

  - util.js:16 tryCatcher
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/util.js:16:23

  - promise.js:512 Promise._settlePromiseFromHandler
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:512:31

  - promise.js:569 Promise._settlePromise
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:569:18

  - promise.js:606 Promise._settlePromiseCtx
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:606:10

  - async.js:138 Async._drainQueue
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/async.js:138:12

  - async.js:143 Async._drainQueues
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/async.js:143:10

  - async.js:17 Immediate.Async.drainQueues
    [courses]/[html-webpack-plugin]/[bluebird]/js/release/async.js:17:14


asset size limit: The following asset(s) exceed the recommended size limit (200 kB).
This can impact web performance.
Assets: 
  bundle.19df3.js (308 kB)
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (200 kB). This can impact web performance.
Entrypoints:
  bundle (318 kB)
      bundle.19df3.js
      style.87675.css

Build failed!

but that error is not occurred when I removed that code,

<InstantSearch
    appId="..."
    apiKey="..."
    indexName="..."
    >
    <SearchBox />
    <Hits />
</InstantSearch>

[mthuret]

Indeed I followed what's here: https://github.com/developit/preact-cli/issues/244 and was able to use yarn run dev, yarn run start and yarn run build (and launch through build files using a python server).

Content of the preact.config.js

export default function(config, env, helpers) {
  config.node = {
    process: 'mock',
  };
}

I'll spend more time on this next week (build size).

[ppshein]

@mthuret

I've done as embedded external javascript file into my preact project as follow, because while I building preact, I got warning that bundle file size is over 200kb (as not standard size of preact :))

componentDidMount() {

    const script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.js";
    script.async = true;
    document.body.appendChild(script);

    var isMobile = this.state.isMobileDevice;
    script.onload = function() {

        var search = instantsearch({
            appId: '..',
            apiKey: '..', // search only API key, no ADMIN key
            indexName: '..',
            urlSync: false
        });

        var mobileContent = 'MOBILE_CONTAINER'
        var desktopContent = 'DESKTOP_CONTAINER'

        search.addWidget(
            instantsearch.widgets.hits({
                container: '#hits',
                templates: {
                    empty: '<div class="coursesListMobile">No results</div>',
                    item: isMobile ? mobileContent : desktopContent
                }
            })
        );

        search.addWidget(
            instantsearch.widgets.searchBox({
                container: '#search-input'
            })
        );

        search.start();
    }
};

[Haroenv]

You can also just import instantsearch.js if you want to use that, it uses preact already so that should definitely work

[mthuret]

@vvo here a repository using preact-cli with instantsearch: https://github.com/mthuret/preact-cli-react-is

It contains the fix using process: mock

[Haroenv]

Let's close this, since it seems to be fixed when the process it mocked.