Horizon: Error when building with webpack

[sunjay]

ERROR in ./~/@horizon/client/lib/util/fetch.js
Module not found: Error: Cannot resolve module 'exports' in ./node_modules/@horizon/client/lib/util
 @ ./~/@horizon/client/lib/util/fetch.js 13:0-69

Server Version: 1.0.1
Client Version: 1.0.1

Installed client with npm install @horizon/client

I am following the second option in the instructions for Integrating Horizon.

I'm seeing the error above. I installed @horizon/client and attempted to build it within my existing setup. Apparently this has something to do with the imports loader. Installing imports-loader in my project doesn't fix the problem.

In fetch.js:

require('imports?this=>global!exports?global.fetch!isomorphic-fetch');

That is the problem line.

My code is exactly the example on the @horizon/client npm page:

const Horizon = require("@horizon/client")
const horizon = Horizon()

[deontologician]

Hi @sunjay

Have you installed all dependencies of the client and the server?

[sunjay]

That should happen automatically with npm install shouldn't it?

[deontologician]

It should, but we haven't seen this problem before, so I'm trying to find out what might be going wrong.

[deontologician]

Ok, I might have been confused. This is your own webpack configuration that you're using right?

[sunjay]

@deontologician Yes. Let me give you some more detailed information.

I have a simple project setup to build with webpack.

Here is my webpack config file:

const path = require('path');

const CopyWebpackPlugin = require('copy-webpack-plugin');
const autoprefixer = require('autoprefixer');

const DIST = path.resolve(__dirname, 'dist');

module.exports = {
  entry: {
    app: './app/index.js',
  },
  devServer: {
    outputPath: DIST,
  },
  output: {
    path: DIST,
    filename: '[name].js',
    publicPath: '/',
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['babel-loader'],
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css?modules&importLoaders=1&sourceMap!postcss!sass?sourceMap&sourceMapContents'],
      },
      {
        test: /\.json$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'json-loader',
      },
    ],
  },
  plugins: [
    new CopyWebpackPlugin([
      {from: 'app/index.html'},
    ]),
  ],
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  devtool: 'inline-source-map',
  postcss: [autoprefixer],
};

Webpack essentially builds the application bundle, places it in the dist directory and also copies a simple index.html file to the same directory. These are both then to be served by Horizon.

My app/index.js file is very simple too:

const Horizon = require("@horizon/client")
const horizon = Horizon()

horizon.onReady(() => {
  document.querySelector('h1').innerHTML = 'api works!'
});
horizon.connect();

I copied this code from the index.html file generated and used the require() from the docs I linked to above.

The problem is that when I run my webpack build, I get this error:

ERROR in ./~/@horizon/client/lib/util/fetch.js
Module not found: Error: Cannot resolve module 'exports' in ./node_modules/@horizon/client/lib/util
 @ ./~/@horizon/client/lib/util/fetch.js 13:0-69

This error is not in my code. It has to do with a line in fetch.js which is using the webpack imports-loader package.

This is a bug because I can't build using require('@horizon/client') due to this error.

[sachinbhutani]

I get a similar error with webpack, but mine reads "imports" instead of "exports"
it was working with version 0.3.2
now i am on version horizon v1.0.1
ERROR in ./~/@horizon/client/lib/util/fetch.js
Module not found: Error: Cannot resolve module 'imports' in /Users/sachin/sites/node/h7/node_modules/@horizon/client/lib/util
@ ./~/@horizon/client/lib/util/fetch.js 13:0-69

My webpack config is even simpler
{
"name": "H7",
"version": "0.0.1",
"description": "Horizon VueJs Webpack Starter",
"dependencies": {
"vue": "^1.0.24",
"@horizon/client": "^1.0.1"
},
"devDependencies": {
"babel-core": "^6.1.2",
"babel-loader": "^6.1.0",
"babel-plugin-transform-runtime": "^6.1.2",
"babel-preset-es2015": "^6.1.2",
"babel-preset-stage-0": "^6.1.2",
"babel-runtime": "^5.8.0",
"webpack": "^1.13.0",
"css-loader": "^0.23.0",
"style-loader": "^0.13.0",
"vue-loader": "^7.3.0",
"vue-html-loader": "^1.0.0",
"vue-hot-reload-api": "^1.2.0"
},
"scripts": {
"dev": "hz serve --dev & webpack-dev-server --inline --hot"
},
"author": "Sachin"
}

[flipace]

I also ran into this. It was my mistake - we have to add import/exports
loader not to devDependencies but dependencies. I can create a pr later.

A solution for now is to install exports-loader and imports-loader manually
in the project where horizon is used.

EDIT: here https://github.com/rethinkdb/horizon/pull/437

[hnordt]

Same problem here using webpack:

ERROR in ./~/@horizon/client/lib/util/fetch.js
Module not found: Error: Cannot resolve module 'imports' in /Users/hnordt/workspace/healthware_app/node_modules/@horizon/client/lib/util
 @ ./~/@horizon/client/lib/util/fetch.js 13:0-69

[haukurk]

+1

[stellanhaglund]

I have the same error and I'm not using webpack, I just tried to import it from node.

Installing the dependencies doesn't fix it only commenting out the

require('imports?this=>global!exports?global.fetch!isomorphic-fetch');

[deontologician]

If you're using node, import the version from @horizon/client/dist/horizon since that's compiled already.

[stellanhaglund]

When i do, it doesnt seem to connect or anything.

fredag 27 maj 2016 skrev Josh Kuhn [email protected]:

If you're using node, import the version from @horizon/client/dist/horizon
since that's compiled already.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/rethinkdb/horizon/issues/420#issuecomment-222166673,
or mute the thread
https://github.com/notifications/unsubscribe/ACZ_rpKP7k7h4OpesJU40RhWqnMq1S0Eks5qFwS2gaJpZM4IhvB7
.

[sunjay]

@deontologician Has this fix been released?

[deontologician]

not yet

On Sat, Jun 4, 2016, 21:50 Sunjay Varma [email protected] wrote:

@deontologician https://github.com/deontologician Has this fix been
released?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/rethinkdb/horizon/issues/420#issuecomment-223793069,
or mute the thread
https://github.com/notifications/unsubscribe/AAAFVk-EcN5mW4EEXT8HkF6ELRNvonf0ks5qIlV3gaJpZM4IhvB7
.

[StefanSchwartze]

What is the current status? I still can't use horizon client because of this bug..

[deontologician]

Try the version on the next branch in github. We've removed the fetch
dependency

On Sun, Jul 17, 2016, 14:09 StefanSchwartze [email protected]
wrote:

What is the current status? I still can't use horizon client because of
this bug..

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/rethinkdb/horizon/issues/420#issuecomment-233204311,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAFVt3ZY7Yrk40DLVDlnRXhyj-5t8K6ks5qWpohgaJpZM4IhvB7
.

[StefanSchwartze]

How can I install that version? npm install @horizon/[email protected] and git+ssh://[email protected]:rethinkdb/horizon.git#2.0.0 didn't work for me..

[deontologician]

we havent tagged 2.0 yet, you'll probably need to check it out and build it
yourself

On Sun, Jul 17, 2016, 17:05 StefanSchwartze [email protected]
wrote:

How can I install that version? npm install @horizon/[email protected] and
git+ssh://[email protected]:rethinkdb/horizon.git#2.0.0 didn't work for me..

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/rethinkdb/horizon/issues/420#issuecomment-233212117,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAAFVsnHc8MRDuB4jbLV0VT2f30QmOcWks5qWsNkgaJpZM4IhvB7
.