TypeError: require is not a function

[nachikettalwalkar]

Hello,

I had a working ng2-handsontable on production but with a latest deploy, I'm getting a type error at (handsontable.js:46). Is there any dependency that I'm missing? or any compiler options that I should be looking at ?

Following is my package.json file -

    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/compiler-cli": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/platform-server": "^4.1.3",
    "@angular/router": "^4.1.3",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.26",
    "@types/node": "^6.0.73",
    "angular-tree-component": "^3.7.3",
    "bootstrap": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.0.0-alpha.6.tgz",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "karma-chrome-launcher": "^2.1.1",
    "moment": "^2.18.1",
    "ng-bootstrap": "^1.6.3",
    "ng2-handsontable": "^1.0.3",
    "ng2-translate": "^5.0.0",
    "ngx-bootstrap": "^1.6.6",
    "ngx-contextmenu": "^1.2.0",
    "rxjs": "^5.4.0",
    "survey-angular": "^0.12.15",
    "ts-helpers": "^1.1.1",
    "typescript": "2.3.4",
    "zone.js": "^0.7.2",
    "ng2-toastr": "^4.1.0"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^4.1.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "2.3.4"
  }```

Thanks

[HIMISOCOOL]

I had a play around with this yesterday and was gonna log this on the weekend when I had time. It's because of the latest version of angular cli (1.3.0) and therefore the latest version of the compiler + webpack. AFAIK require was always undefined but now it's a problem.

@nachikettalwalkar You could try using the 1.2.8 version of the cli if you need it working for now. To do that change your @angular/cli to ~1.2.8 (rather than ^1.0.0)

[nachikettalwalkar]

@HIMISOCOOL Thank you, that fixed it. I was playing around with angular versions thinking if that caused it to break. I'll just leave this thread open here until the resolution I guess.

[josehenriqueventura]

Hi Guys. I'm having the same issue here. I've tried that approach of changing the angular-cli version but the error persists.

"jquery-slimscroll": "^1.3.8", "ng2-handsontable": "^1.0.3", "reflect-metadata": "^0.1.10", "rxjs": "^5.4.2", "webfontloader": "^1.6.28", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "~1.2.8", "@angular/compiler-cli": "^4.1.3", "@angularclass/hmr": "^2.1.3", "@angularclass/hmr-loader": "^3.0.4", "@ngtools/webpack": "^1.5.2", "@types/core-js": "^0.9.42", "@types/hammerjs": "^2.0.34", "@types/jasmine": "^2.5.53", "@types/jquery": "^3.2.9", "@types/node": "^8.0.14", "add-asset-html-webpack-plugin": "^2.0.1", "angular-router-loader": "^0.6.0", "angular2-template-loader": "^0.6.2", "autoprefixer": "^7.1.2", "awesome-typescript-loader": "^3.2.1", "bootstrap": "~4.0.0-alpha.6", "codelyzer": "^3.1.2", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.4", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^0.11.2", "html-webpack-plugin": "^2.29.0", "json-loader": "^0.5.4", "material-design-lite": "^1.3.0", "ng-router-loader": "^2.1.0", "node-sass": "^4.5.3", "postcss-loader": "^2.0.6", "raw-loader": "^0.5.1", "rimraf": "^2.6.1", "sass-loader": "^6.0.6", "style-loader": "^0.18.2", "ts-helpers": "^1.1.2", "ts-node": "^3.2.1", "tslib": "^1.7.0", "tslint": "^5.5.0", "tslint-loader": "^3.5.3", "typescript": "^2.4.2", "webpack": "^3.3.0", "webpack-dev-server": "^2.5.1", "webpack-dll-bundles-plugin": "^1.0.0-beta.5", "webpack-merge": "^4.1.0"

[nachikettalwalkar]

@josehenriqueventura It is definitely still working for me. Can you delete the node_modules folder and do a fresh npm install ?

[josehenriqueventura]

@nachikettalwalkar Yep. Many times and with the fragment of the package.json below workerd fine.

"dependencies": {
    "@angular/animations": "^4.3.2",
    "@angular/common": "^4.3.2",
    "@angular/compiler": "^4.3.2",
    "@angular/core": "^4.3.2",
    "@angular/forms": "^4.3.2",
    "@angular/http": "^4.3.2",
    "@angular/material": "2.0.0-beta.8",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.2",
    "@angular/platform-browser-dynamic": "^4.3.2",
    "@angular/platform-server": "^4.3.2",
    "@angular/router": "^4.3.2",
    "angular2-datatable": "^0.6.0",
    "copy-dir": "^0.3.0",
    "core-js": "^2.4.1",
    "echarts": "^3.6.2",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.2.1",
    "jquery-slimscroll": "^1.3.8",
    "ng2-completer": "^1.6.0",
    "ng2-currency-mask": "^4.3.1",
    "ng2-handsontable": "^1.0.3",
    "ngx-webstorage": "^1.8.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "^5.4.2",
    "webfontloader": "^1.6.27",
    "zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.6",
    "@angular/compiler-cli": "^4.3.2",
    "@angularclass/hmr": "^1.2.2",
    "@angularclass/hmr-loader": "^3.0.4",
    "@ngtools/webpack": "^1.5.5",
    "@types/core-js": "^0.9.42",
    "@types/hammerjs": "^2.0.34",
    "@types/jasmine": "^2.5.53",
    "@types/jquery": "^2.0.48",
    "@types/node": "^7.0.39",
    "add-asset-html-webpack-plugin": "^1.0.2",
    "angular-router-loader": "^0.6.0",
    "angular2-template-loader": "^0.6.2",
    "autoprefixer": "^6.7.7",
    "awesome-typescript-loader": "^3.2.2",
    "bootstrap": "~4.0.0-alpha.6",
    "browser-sync": "^2.18.13",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "del": "^2.2.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "gulp": "~3.9.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-open": "~2.0.0",
    "gulp-plumber": "~1.1.0",
    "gulp-pug": "~3.3.0",
    "gulp-task-listing": "~1.0.0",
    "gulp-util": "~3.0.4",
    "html-webpack-plugin": "^2.30.1",
    "json-loader": "^0.5.7",
    "ng-router-loader": "^2.1.0",
    "node-sass": "^4.5.2",
    "postcss-loader": "^1.3.3",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.16.1",
    "ts-helpers": "^1.1.2",
    "ts-node": "^3.3.0",
    "tslib": "^1.6.0",
    "tslint": "^5.5.0",
    "typescript": "^2.4.2",
    "webpack": "^2.7.0",
    "webpack-dev-server": "^2.6.1",
    "webpack-dll-bundles-plugin": "^1.0.0-beta.5",
    "webpack-merge": "^4.1.0",
    "yargs": "^7.0.2"
  },
  "engines": {
    "node": ">=6.9.0",
    "npm": ">= 3"
  }

[nachikettalwalkar]

@josehenriqueventura You still have "@angular/cli": "^1.2.6" with a ^ , that definitely caused me the problems. My package.json has "@angular/cli": "~1.2.8" . Glad its working for u now.

[ssidorchik]

Are there any ideas how the issue can be workaround, so the package works with @angular/cli@1.3? I would like to use typescript@2.4 but it's available only starting from that cli version.

[HIMISOCOOL]

here's a list of the breaking changes https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes there's quite a few in typescript 2.4. I would also love to update but haven't had time to check if there is any work around's :(

On Thu, Aug 24, 2017 at 3:35 PM, Sergey Sidorchick <notifications@github.com

wrote:

Are there any ideas how the issue can be workaround, so the package works with @angular/cli@1.3? I would like to use typescript@2.4 but it's available only starting from that cli version.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/valor-software/ng2-handsontable/issues/479#issuecomment-324523773, or mute the thread https://github.com/notifications/unsubscribe-auth/ABpTdO3r3w86OBRhjalSJ60DTJTa4x6fks5sbO-agaJpZM4Ozpl3 .

[elgame]

Hello, I have a similar problem: My package.json file is:

"dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/core": "3.12.1", "@ionic-native/keyboard": "3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic/storage": "2.0.1", "@types/big.js": "0.0.31", "@types/handsontable": "0.31.1", "big.js": "^3.1.3", "ionic-angular": "3.6.0", "ionicons": "3.0.0", "ng2-handsontable": "1.0.3", "ng2-img-cropper": "^0.9.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12" }, "devDependencies": { "@ionic/app-scripts": "2.1.4", "ionic": "3.9.1", "pug": "^2.0.0-rc.2", "typescript": "2.3.4" }

If I change the "@ionic/app-scripts": "2.1.4" to "@ionic/app-scripts": "1.3.7" does not throw this error.

Any idea why it marks that mistake?

[xoneill]

The issue is caused by Webpack 3.x. Switching back to 2.x (2.6.1 in my case) resolves it

[HIMISOCOOL]

@xoneill interesting, So another possible fix if you are experienced with webpack is to do the following: run ng eject on your newly generated or upgraded angular cli 1.3+ project go to package.json and change the newly inserted webpack dev dependency to ~2.7.0 down from 3.x.x run npm install and you should be good to go, just know that you can no longer run ng start you have to run npm start but you can just read your package.json to see the changed commands in the scripts section

However this does confirm it is a webpack issue

[HIMISOCOOL]

Heres an update chaps. handsontable/handsontable#4495 This is an update to the base library that brings it to support webpack 3 and a crafty devil made a branch to support 0.34 which is the major version of this update, the fix is in 0.34.4 though. https://github.com/valor-software/ng2-handsontable/commit/9d55fbdc0af68c5482d7043c91acfe26a446e812

Unfortunately, it hasn't been made into a new release.

@renehamburger when will this be merged and can you push to 0.34.4?

[Moffmo]

@HIMISOCOOL @renehamburger

The branch has been merged into master that fixes this. Just need a new release so that we can get it in NPM. :) Please?

[Brounchy]

Hello all,

Same problem here with :

"dependencies": { "@angular/common": "4.4.3", "@angular/compiler": "4.4.3", "@angular/compiler-cli": "4.4.3", "@angular/core": "4.4.3", "@angular/forms": "4.4.3", "@angular/http": "4.4.3", "@angular/platform-browser": "4.4.3", "@angular/platform-browser-dynamic": "4.4.3", "@ionic-native/core": "3.12.1", "@ionic-native/native-storage": "^4.3.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic/storage": "2.0.1", "cordova-android": "^6.3.0", "cordova-plugin-device": "^1.1.6", "cordova-plugin-nativestorage": "^2.2.2", "cordova-plugin-splashscreen": "^4.0.3", "cordova-plugin-statusbar": "^2.2.3", "cordova-plugin-whitelist": "^1.3.1", "cordova-sqlite-storage": "^2.0.4", "ionic-angular": "3.7.1", "ionic-plugin-keyboard": "^2.2.1", "ionicons": "3.0.0", "ng2-handsontable": "^1.0.3", "rxjs": "5.4.3", "sw-toolbox": "3.6.0", "zone.js": "0.8.18" }, "devDependencies": { "@ionic/app-scripts": "3.0.0", "typescript": "2.3.4" }

@elgame Any luck on that one ?

[renehamburger]

Apologies for the slow response! I did start the update to Handsontable@0.34 quite a few weeks back, but encountered a couple of issues. The first one was the requirement to import handsontable before zone,js (see handsontable/handsontable#4452), which amounts to a breaking change for all ng2-handsontable users. The second was the fact, that the typings included in handsontable@0.34 are not working yet. Fortunately, there is a PR at handsontable for that and once that's merged our update can be released.

[HIMISOCOOL]

awesome thanks for your work

[elgame]

Hi @Brounchy sorry, I tried to change the webpack version, but it did not work, and for lack of time continue using the version "@ionic/app-scripts": "1.3.7"

[renehamburger]

The required PR at handsontable has been merged (but not yet released). I've updated the feature branch handsontable-update to use that commit, which works fine now. Feel free to use that branch to test it in your environment. We will release this once handsontable has done a new release, too.

[kunalkakkad]

Hello, I am unable to understand that how do I resolve this issue. As I am also facing the same issue in my Angular4 Application.

Thanks in advance.

Regards, Kunal Kakkad

[carlmon]

@renehamburger, handsontable 0.35 was released 5 days ago. Is this the one you were waiting for?

[aarontoys]

@renehamburger Thanks for all your effort and work to resolve this issue and for v 2.0! Can you please publish this release to NPM or let me know how I can use it?

I tried updating my package.json to "ng2-handsontable": "github:valor-software/ng2-handsontable#2.0.0" (similar to how you used the feature branch/commit from handsontable before they release their update), but this did not add ng2-handsontable to my node_modules. I also tried "npm i github:valor-software/ng2-handsontable#2.0.0" and that added "ng2-handsontable-base": "github:valor-software/ng2-handsontable#2.0.0" to my package.json and "ng2-handsontable-base" in my node_modules. I couldn't figure out how use this and when I compared the files and package.json in ng2-handsontable and ng2-handsontable-base, they were very different. It seems like there's a build process that happens when (or before) you publish to NPM.

Looking forward to your help, resolving this issue 100% and updating Angular CLI.

Ps. I'm a very new developer with < 1 year experience so sorry if the answer is simple or obvious.

[HIMISOCOOL]

Yeah, it looks like that 2.0 just needs to be pushed to npm.

In the meantime, you might be able to replace the version in package.json to: the github link I.e. https://github.com/valor-software/ng2-handsontable if you really need it. Not sure what the console command for it is but that line should do it.

On Wed, Dec 13, 2017 at 10:19 AM, Aaron Toys notifications@github.com wrote:

@renehamburger https://github.com/renehamburger Thanks for all your effort and work to resolve this issue and for v 2.0! Can you please publish this release to NPM or let me know how I can use it?

I tried updating my package.json to "ng2-handsontable": "github: valor-software/ng2-handsontable#2 https://github.com/valor-software/ng2-handsontable/pull/2.0.0", but this does not add ng2-handsontable to my node_modules. I also tried "npm i github:valor-software/ng2-handsontable#2 https://github.com/valor-software/ng2-handsontable/pull/2.0.0" and that added "ng2-handsontable-base": "github:valor-software/ng2-handsontable#2 https://github.com/valor-software/ng2-handsontable/pull/2.0.0" to my package.json and "ng2-handsontable-base" in my node_modules. I couldn't use this and when I compared the files and package.json in ng2-handsontable and ng2-handsontable-base, they were very different.

Looking forward to your help, resolving this issue 100% and updating Angular CLI.

Ps. I'm a very new developer with < 1 year experience so sorry if the answer is simple or obvious.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/valor-software/ng2-handsontable/issues/479#issuecomment-351197971, or mute the thread https://github.com/notifications/unsubscribe-auth/ABpTdJ_YgArDphKfB1PrkN9Hleh38I_pks5s_u3xgaJpZM4Ozpl3 .

[renehamburger]

There are a few (hopefully minor) issues that showed up in the quality check yesterday. They need to be fixed first before we can push it to npm. If anyone in this thread has got time to help with this, please let me know. Otherwise I should get this done by the weekend the latest.

[dmattsson]

Thanks for all the work. I finally got it working by cloning & building the 2.0.1, and manually copying the dist folder into node_modules. (Is there a better way to do this? Couldn't make anything else I tried work)

Forgive me if I've misunderstood something, but it seems like npm is out of sync with the github version. In Git it is 2.0.1 but in npm it is 1.0.3. Is this intended or have you forgot to publish? https://www.npmjs.com/package/ng2-handsontable

[renehamburger]

@dmattsson, you're right. You need to build ng2-handsontable manually, if you want to use a commit from GitHub that isn't published to npm yet. That's what happens as part of the publishing to npm. You don't need to copy the dist filter, though, you can also point "ng2-handsontable" to the local folder in your package.json.

I have just published ng2-handsontable@2.0.0 to npm! Finally! Feel free to give that on a try.