Can't resolve 'crossfilter' in '~node_modules\dc'

[alexkibler]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.3
node: 6.10.3
os: win32 x64
@angular/common: 4.1.2
@angular/compiler: 4.1.2
@angular/core: 4.1.2
@angular/forms: 4.1.2
@angular/http: 4.1.2
@angular/platform-browser: 4.1.2
@angular/platform-browser-dynamic: 4.1.2
@angular/router: 4.1.2
@angular/cli: 1.0.3
@angular/compiler-cli: 4.1.2

Repro steps.

ng new testproj && cd testproj
npm install --save dc

replace app.component.ts with

import { Component } from '@angular/core';
import * as crossfilter from 'crossfilter2';
import * as d3 from 'd3';
import * as dc from 'dc';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';

    constructor() {
        this.setupCharts();
    }
  
    setupCharts() {
        const chart = dc.barChart('#test');
        chart.width(768);
    }
}

The log given by the failure.

ERROR in ./~/dc/dc.js
Module not found: Error: Can't resolve 'crossfilter' in 'C:\Users\akibler\Documents\Visual Studio 2017\Projects\testproj\node_modules\dc'
 @ ./~/dc/dc.js 10707:8-42
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Desired functionality.

Let me use DC?

Mention any other details that might be useful.

This issue with dc.js makes it seem like we need to be able to add a "resolve" to the webpack config. I'm not sure that this is possible with .angular-cli.json

[sumitarora]

@alexkibler Is there a repo replicating the issue?

[alexkibler]

@sumitarora Sure, I've just created one: https://github.com/alexkibler/DCJSCrossfilterProblem

If you clone and npm install followed by ng build, you'll see it blows up with the error I listed above.

[clydin]

Quickly looking over the "dc" package, I wouldn't expect that to work. It has a dependency on the "crossfilter2" package not "crossfilter".

[alexkibler]

@clydin yeah, I see that as well. It's something to do with crossfilter changing, so the dc team switched their dependency to crossfilter2 but still reference it as crossfilter. But I can't figure out how to do the "reference it as crossfilter" thing mentioned in the Issue I linked above

[clydin]

this is really a fatal defect in the library.
As an ugly workaround you can rename the directory in node modules to the expected name.

[alexkibler]

Right, I knew that, but that means all of our developers have to do that, and any time we want to update the version, or reinstall node_modules for whatever reason, we'll have to remember to do that.

The point of this post was that webpack itself has the workaround to let you alias, and I was hoping the CLI would support this.

[clydin]

Without ejecting the config, there is no support for that.

As to the renaming, you could add a post install script to package.json to handle the renaming until the package is fixed.

I'd also recommend raising an issue with the package, if not already present.

[alexkibler]

That's some great advice, thanks. I'll give that a shot when I'm back in the office tomorrow.

…

On Wed, May 17, 2017, 8:27 PM clydin ***@***.***> wrote: Without ejecting the config, there is no support for that. As to the renaming, you could add a post install script to package.json to handle the renaming until the package is fixed. I'd also recommend raising an issue with the package, if not already present. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6354 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHwp6fn5BcE3ji0PIgwfT42_5pv2mFeeks5r65B-gaJpZM4NeGq6> .

[sumitarora]

Closing as above @alexkibler Please reopen the issue if needed.

[alexkibler]

@clydin Do you have a recommendation for how to do a rename in the postinstall? Sorry, I haven't really done much with npm scripts

[clydin]

Untested but something like the following should work on Linux/MacOS (not sure of the equivalent for Windows):

"postinstall": "if [ -e node_modules/crossfilter2 ]; then mv node_modules/crossfilter2 node_modules/crossfilter; fi"

[alexkibler]

Thanks! I'm on Windows, though. For what it's worth, renaming the crossfilter directory never helped me anyway, and I actually had to rename it in a line of code in dc.js. Once I did that everything started working. One of the people from DC opened an issue in crossfilter2 to try to fix it permanently but for now I have to change that line in dc.

define(["d3", "crossfilter"], _dc);

changes to

define(["d3", "crossfilter2"], _dc);

You wouldn't know a way to replace a line of text in a file, would you? That's where I'm struggling now, but for now I'm just going to have my team change it manually.

[clydin]

There's a package called replace which you could add as a dev dependency. It's unmaintained but for a simple temporary workaround it should do what you need.

something like the following should work:

replace "crossfilter" "crossfilter2" path_to_dc.js_file

[alexkibler]

Yeah, I tried that, but when I gave it "node_modules/dc/dc.js" as the file, it said it couldn't find it

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}