react-boilerplate / react-boilerplate

🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
https://www.reactboilerplate.com
MIT License
29.48k stars 6.12k forks source link

Algolia importing node modules is crashing webpack #1159

Closed HommeSauvage closed 8 years ago

HommeSauvage commented 8 years ago

I am trying to use react-algoliasearch-helper which requires algoliasearch. Algolia claim that their isomorphic library works perfectly with webpack. Now when I tried to include it in the boilerplate, webpack is crashing with this error:

ERROR in ./~/debug-ms-fix-yui-compressor/node.js
Module not found: Error: Can't resolve 'fs' in '/path/node_modules/debug-ms-fix-yui-compressor'
 @ ./~/debug-ms-fix-yui-compressor/node.js 163:15-28
 @ ./~/algoliasearch/src/browser/createAlgoliasearch.js
 @ ./~/algoliasearch/src/browser/builds/algoliasearch.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi main

ERROR in ./~/debug-ms-fix-yui-compressor/node.js
Module not found: Error: Can't resolve 'net' in '/path/node_modules/debug-ms-fix-yui-compressor'
 @ ./~/debug-ms-fix-yui-compressor/node.js 170:16-30
 @ ./~/algoliasearch/src/browser/createAlgoliasearch.js
 @ ./~/algoliasearch/src/browser/builds/algoliasearch.js
 @ ./app/containers/App/index.js
 @ ./app/app.js
 @ multi main

I tried following the code and I saw that it's trying to include some debugging features which requires fs. The problem is that it's picking the wrong module, instead of picking browser, it's picking node in the package debug-ms-fix-yui-compressor. This should not be a problem in webpack alone because it works out of the box, but with this boilerplate, it's thinking that it's running in a node environment rather than browser.

Steps to reproduce

  1. npm install --save algoliasearch algoliasearch-helper react-algoliasearch-helper
  2. Add these lines to containers/App/index.js:
// ...other  imports above
import algoliasearch from 'algoliasearch';
import algoliasearchHelper from 'algoliasearch-helper';
import {Provider} from 'react-algoliasearch-helper';
const client = algoliasearch('id', 'somekey');
const helper = algoliasearchHelper(client, 'index');

function App(props) {
  return (
    <Provider helper={helper}>
     // Reste of the app
    </Provider>
  );
}
  1. run npm start and you'll get the webpack errors

    Versions

    • Node/NPM: 7.0.0/3.10.8
luis-teixeira commented 8 years ago

Some here trying to use twilio

NPM updated to 3.10.9 and added

node: { fs: 'empty', net: 'empty', tls: 'empty', },

on webpack.base.babel.js result to me

mxstbr commented 8 years ago

Those libraries are meant to run in node, not in the browser. What you're seeing means that node-internal modules don't exist in the browser, which, well, they don't. This is expected behaviour, you're trying to make something work that isn't meant to work.

HommeSauvage commented 8 years ago

@mxstbr that's why I said that it's an "isomorphic" package. It's supposed to work with node and browser. They come with both versions in the same package. If you use the package algoliasearch with webpack, it will work regardless of node. Please check: https://www.npmjs.com/package/algoliasearch#nodejs--react-native--browserify--webpack They are webpack and browsersify friendly, they're not exclusively node modules.

lock[bot] commented 6 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.