kendo-labs / kendo-ui-boilerplates Goto Github PK

Hi,

I'm currently developing React components and wanted to try Kendo but am running into a problem. FYI, I typically use browersify and unfortunately have limited experience with webpack where the problem may lie.

My environment:-
Windows 10
NodeJS 6.6
NPM - 3.3.10
React - 15.3

I downloaded the boilerplates and followed the instructions for the React boilerplates and was able to get them running (with some modifications for my environment - see Issue #2).
I then tried to integrate the KendoDropDownList component into my current environment where I've successfully developed and run many React components. I ran into a " 'window' defined in Kendo.core.js could not be found" problem. In my environment I'm doing server-side rendering so I'm not sure if this is causing a problem since I'm assuming the 'window' reference is only applicable to the browser environment. Here is the package.json for my environment:-

{ "name": "itc", "version": "0.0.1", "private": true, "scripts": { "test": "jasmine-node spec" }, "dependencies": { "babel": "^6.5.2", "babel-cli": "^6.14.0", "babel-plugin-transform-es2015-destructuring": "^6.9.0", "babel-plugin-transform-object-rest-spread": "^6.8.0", "babel-preset-es2015": "^6.13.2", "babel-preset-react": "^6.11.1", "babel-preset-stage-2": "^6.13.0", "babel-register": "^6.11.6", "babelify": "^7.3.0", "body-parser": "^1.15.2", "browserify": "^13.1.0", "browserify-css": "^0.9.2", "concat-stream": "^1.5.1", "constants": "0.0.2", "cookie-parser": "^1.4.3", "css-modules-require-hook": "^4.0.3", "deasync": "^0.1.4", "debug": "~2.2.0", "deep-diff": "^0.3.4", "events": "^1.1.0", "express": "^4.13.4", "extract-text-webpack-plugin": "^1.0.1", "gremlin": "^2.3.2", "header-hostname": "^1.0.0", "highland": "^2.5.1", "history": "^3.0.0", "http-proxy": "^1.12.0", "kendo-ui-core": "^2016.3.914", "literalify": "^0.4.0", "lodash": "^4.15.0", "memory-cache": "^0.1.4", "morgan": "^1.6.1", "npm": "^3.5.2", "path-to-regexp": "^1.5.3", "react": "^15.3.0", "react-bootstrap": "^0.30.3", "react-bootstrap-table": "^2.4.2", "react-breadcrumbs": "^1.3.16", "react-dom": "^15.1.0", "react-redux": "^4.4.5", "react-router": "^2.5.0", "react-router-redux": "^4.0.5", "redux": "^3.5.2", "redux-thunk": "^2.1.0", "scroll-behavior": "^0.8.1", "serialize-javascript": "^1.3.0", "streamifier": "^0.1.1", "webpack": "^1.13.1", "winston": "^2.1.1", "winston-config": "^0.4.2", "xmlhttprequest": "^1.8.0" } }

Any ideas?

Thanks,
Dave

UPDATE: when I removed the server-side rendering functionality from my app I was able to render the drop down list. I assume server-side rendering is not supported?

The root of my development environment is built on "node_modules". Each subdirectory is essentially a module, which makes it easy to reference using "require" no matter where in the directory structure you are calling it from i.e. I don't use relative paths and hence do not break my code if I change the directory structure. This is beneficial in a large project.

Unfortunately, this causes a problem with the boilerplates because of the "exclude: '/node_modules/' in the webpack-config.js. Once I deleted this line I was able to run the boilerplates i.e. "npm run webpack" no longer generated errors.

Dave