Ngx-datatable: Module not found: Error: Can't resolve '.'

[Muhammad-Soban]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
it is working fine if build it using ng serve and ng build --prod. But I am facing issues when I build it for server side rendering with angular universal. I am using following commands to build

npm run build:ssr

ERROR in ./dist/server/main.js
Module not found: Error: Can't resolve '.' in 'C:\Users\me\Desktop\example\dist\server'
@ ./dist/server/main.js 96:17-29
@ ./server.ts

npm run serve:ssr

[email protected] serve:ssr C:\Users\me\Desktop\example
node dist/server

C:\Users\me\Desktop\example\dist\server.js:54955
module.exports = __webpack_require__(!(function webpackMissingModule() { var e = new Error("Cannot find module '.'"); e.code = 'MODULE_NOT_FOUND'; throw e; }()));
^

Error: Cannot find module '.'
at webpackMissingModule (C:\Users\me\Desktop\example\dist\server.js:54955:82)
at Object.. (C:\Users\me\Desktop\example\dist\server.js:54955:158)
at __webpack_require__ (C:\Users\me\Desktop\example\dist\server.js:54879:30)
at Object../node_modules/@swimlane/ngx-datatable/release/utils/tree.js (C:\Users\me\Desktop\example\dist\server.js:62913:10)
at __webpack_require__ (C:\Users\me\Desktop\example\dist\server.js:54879:30)
at Object../node_modules/@swimlane/ngx-datatable/release/utils/index.js (C:\Users\me\Desktop\example\dist\server.js:62194:10)
at __webpack_require__ (C:\Users\me\Desktop\example\dist\server.js:54879:30)
at Object../node_modules/@swimlane/ngx-datatable/release/components/header/header-cell.component.js (C:\Users\me\Desktop\example\dist\server.js:59818:15)
at __webpack_require__ (C:\Users\me\Desktop\example\dist\server.js:54879:30)
at Object../node_modules/@swimlane/ngx-datatable/release/components/header/header-cell.component.ngfactory.js (C:\Users\me\Desktop\example\dist\server.js:60109:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:ssr: node dist/server
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\me\AppData\Roaming\npm-cache_logs\2018-10-06T07_02_52_121Z-debug.log

Expected behavior
Create ssr build without errors.

Reproduction of the problem
I have created a test project to reproduce the issue. Following is the github link.
https://github.com/Muhammad-Soban/ngx-datatable-ssr-issue.git

Please tell us about your environment:
Operating system: Windows 10
IDE: Webstorm
Package manager: npm
package.json:

{
  "name": "example",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
    "serve:ssr": "node dist/server",
    "build:client-and-server-bundles": "ng build --prod && ng run example:server",
    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/platform-server": "^6.1.9",
    "@angular/router": "^6.1.0",
    "@nguniversal/express-engine": "^6.1.0",
    "@nguniversal/module-map-ngfactory-loader": "^6.1.0",
    "@swimlane/ngx-datatable": "^13.1.0",
    "core-js": "^2.5.4",
    "rxjs": "~6.2.0",
    "ts-loader": "^5.2.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2",
    "webpack-cli": "^3.1.2"
  }
}

• Table version:
  "@swimlane/ngx-datatable": "^13.1.0"

• Angular version:
  Angular 6.1.0

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[Farqual]

I've got exactly the same issue here in my project, will keep you updated if I find some solution on this.

[pwalat]

Ran into a similar issue when trying to convert my recently migrated Angular 7 app to universal.
Any updates ?

[JSMike]

typically this is a tsconfig issue. try adding baseUrl: './'

This was mistaken, ignore.

[Farqual]

@JSMike Doesn't seems to change anything, tried to change baseUrl in my project but this issue is still there..

I found a temporary solution to fix this (at least this is working with my project), just start npm run build:client-and-server-bundles then, edit your main.js file and delete this : module.exports=require(".")

Then you can run npm run webpack:server.

[adriwicked]

I have the same problem trying to implement SSR on a 6.1 angular proyect. I'll try to start from the universal-starter project and add all the features one by one..

[ericel]

This issue is related to the utils/tree.js file. It imports '.' . I don't know why.
var _1 = require(".");

If you delete this line, then the app should build on universal.

[JSMike]

Looks like it's an issue with tree.ts it's importing ValueGetter and getterForProp from the current directory's index.ts which also has export * from './tree'; in it, this is creating a circular dependency which during webpack compilation is causing the unknown import. Typically you don't want to import from an index.ts file that also exports the current source file.

@ericel Deleting the line shouldn't really "fix" the error unless you're not actually using the tree code in your project, you'll get a runtime error.

The fix is to update the src/util/tree.ts file to import ValueGetter and getterForProp directly from ./column-prop-getters.

@marjan-georgiev is this something you can fix real quick? at my current job I can't submit a PR without a bunch of paperwork.

FYI, I searched the project, this is the only file that imports from '.' where the current file is in the index.ts.

[Muhammad-Soban]

Just downgrade the version of ngx-datatable from "@swimlane/ngx-datatable": "^13.1.0" to "@swimlane/ngx-datatable": "13.0.0". It works.

[jedmarcnocum]

Any update on this?

[JSMike]

@jedmarcnocum I have the fix outlined in my post, due to the company I work for I can't submit the PR right now, trying to get permission. Lots of annoying legal/paperwork stuff. Feel free to implement the change and push a PR if you can.

[marjan-georgiev]

Merged #1646

[steveacalabro]

@marjan-georgiev Is there a plan to do a release for this?

[marjan-georgiev]

Released in 15.0.0