jedwards1211 / meteor-webpack-react

(DEPRECATED) use jedwards1211/crater instead
https://github.com/jedwards1211/crater
374 stars 75 forks source link

Problem using Elasticsearch #141

Open darkadept opened 8 years ago

darkadept commented 8 years ago

I think this might be a webpack configuration issue but I'm not exactly sure.

The Problem I cloned the repo fresh, ran npm install elasticsearch --save and placed import {Client} from 'elasticsearch' in the main_server.js file.

Running that I get an error about navigator not found. This error is an Elasticsearch error from their xhr.js file. It's looking for stuff that's not available on the server (ie. navigator and window). I traced it further and found that that file is really for the browser, not server. I believe it's getting included because the Elasticsearch npm package uses the "browser" directive in it's package.json file. This is an excerpt of that file:

"browser": {
    "./src/lib/apis/index.js": "./src/lib/apis/browser_index.js",
    "./src/lib/connectors/index.js": "./src/lib/connectors/browser_index.js",
    "./src/lib/loggers/index.js": "./src/lib/loggers/browser_index.js",
    "./test/mocks/server.js": "./test/mocks/browser_server.js",
    "lodash": "lodash-compat"
  },

The "browser" field spec is here: https://github.com/defunctzombie/package-browser-field-spec

You can actually tell webpack to ignore or include certain fields in package.json as explained here: https://webpack.github.io/docs/configuration.html#resolve-packagemains

Fix Attempt So I tried adding that clause to my webpack server configuration telling it to ignore "browser" but that causes a bunch of other things to break.

Further Testing To make sure that this isn't a Meteor/Elasticsearch problem I created a new Meteor (1.3) app, installed Elasticsearch and put the include in the server code. That worked fine so I guess the Meteor 1.3 npm code is importing the package properly.

Question Does anyone have any insight as to what's going on here? When Elasticsearch gets included on the server it seems to be thinking it's on the browser.

jedwards1211 commented 8 years ago

This really sounds like a webpack config issue to me, not something specific to this project. But anyway...

What changes did you make to the webpack config, and what were the new error messages?

jedwards1211 commented 8 years ago

Sorry, I take that back, you're right that this project should already contain webpack server config to ignore the browser sections.

darkadept commented 8 years ago

Ok. If it's as easy as excluding "browser" the way I did above (using resolve.packageNames) then I'll have to see why that still wasn't working and report back here.

buildbreakdo commented 6 years ago

Had this same problem with elasticsearch in a different repo. Landed here, posted for anyone else who makes it here too. All you have to do is add target: 'node' to your webpack.config.js exports. See below:

Targets

Because JavaScript can be written for both server and browser, webpack offers multiple deployment targets that you can set in your webpack configuration.

The webpack target property is not to be confused with the output.libraryTarget property. For more information see our guide on the output property. Usage To set the target property, you simply set the target value in your webpack config:

webpack.config.js

module.exports = {
  target: 'node'
};

In the example above, using node webpack will compile for usage in a Node.js-like environment (uses Node.js require to load chunks and not touch any built in modules like fs or path).

https://webpack.js.org/concepts/targets/