Out-of-the-box support for Webpack

[cburgmer]

We've managed to integrate handsontable via webpack successfully, but it wasn't a very rewarding journey. To avoid the same pain for the 100s of other developers out there, it would be helpful if handsontable could integrate well with webpack out of the box.

What is happening (AFAIK):

1. Webpack is parsing dist/handsontable.js (as mentioned in main of package.json)
2. If finds a require statement and tries to parse it (https://github.com/handsontable/handsontable/blob/master/dist/handsontable.js#L40) to extract the necessary dependencies, but fails due to handsontable programmatically extracting its dependencies from a JSON blob (https://github.com/handsontable/handsontable/blob/master/dist/handsontable.js#L30).
3. Webpack gives up, prints a warning
4. On load handsontable falls back to sourcing elements from window context, but fails because Webpack isn't providing any underlying dependency lookup.

Expected behaviour:

Provide a require header that both Webpack and Browserify can process. For reference, I'm doing something similar programatically with rasterizeHTML.js (see the dist file under http://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.2.2/rasterizeHTML.js).

For reference the workaround:

import Handsontable from 'handsontable';

and in webpack

module: {
  noParse: [path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.js')]
},
resolve: {
  alias: {
    'handsontable': path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.js')
  }
}

Downside: you might end up including the same dependency twice in case you use any of handsontable's dependencies elsewhere.

[cburgmer]

JFR the other solutions in #3407 #3651 #3673 did not work for us.

[AMBudnik]

sorry for a late response @cburgmer Unfortunately it's a known bug but we didn't checked it further yet.

[mrjumpy]

maybe we forgot css part?

import Handsontable from 'handsontable';
import 'handsontable.css';

module: {
  noParse: [path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.js')]
},
resolve: {
  alias: {
    'handsontable': path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.js')
    'handsontable.css': path.join(__dirname, 'node_modules/handsontable/dist/handsontable.full.css')
  }
}

[nite-knite]

@cburgmer @mrjumpy Thank you for providing the solution, you saved my day! But importing the pre-built file triggers the warning in dev mode as follows. Is there any way to import the original source files?

client.js?5bc0:107
[HMR] ./~/.0.28.4@handsontable/dist/handsontable.full.js
Critical dependencies:
40:46-72 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ./~/.0.28.4@handsontable/dist/handsontable.full.js 40:46-72

[minipai]

I think noParse is the correct solution, but use regex to get a wider match.

  module: { 
    noParse: [/handsontable.full.min.js/],
 }

is the code we use and works fine. In your case try

  module: { 
    noParse: [/handsontable.full.js/],
 }

[masato-io]

@cburgmer thank you for your solution, it helped me a lot!

[astegmaier]

@cburgmer thanks for providing the solution here. I was able to eventually use your ideas to get things working. I hit a snag at first, though, that took a while to figure out, and I wanted to share it here in case other folks hit the same thing.

I followed the instructions above to add the alias and noParse lines to my webpack.config.js file, and imported handsontable into my root .ts file with the statement import Handsontable from 'handsontable' Webpack would compile fine, but at runtime, anything that tried to use the Handsontable variable would not actually be defined, and if you tried to use it through a statement like let myTable = new Handsontable(...) you would get an error such as TypeError: handsontable_1.default is not a constructor.

The problem, as it turns out, was the module property of my tsconfig file. By default, if you target es5, this property will be commonJs (see docs). I found that by changing it it to:

    "module": "es2015"

everything would work.

[KevinMcIntyre]

This should probably be documented somewhere other than a Closed issue...

[AMBudnik]

Issue moved to handsontable/docs #54 via ZenHub