ERROR in ./node_modules/parcoord-es/dist/parcoords.mjs 1035:12-17 Can't import the named export 'mouse' from non EcmaScript module (only default export is available)

[ciukstar]

Hi! I keep getting these errors on 'ng build' and before renaming the file './node_modules/parcoord-es/dist/parcoords.mjs' to something like './node_modules/parcoord-es/dist/Xparcoords.mjsX'. I use Angular 6. As I understand, there are some problems with webpack and .mjs files. What is the best way to deal with this problem. I keep getting these errors after each 'npm update' of parcoords-es:

ERROR in ./node_modules/parcoord-es/dist/parcoords.mjs 1035:12-17 Can't import the named export 'mouse' from non EcmaScript module (only default export is available) ERROR in ./node_modules/parcoord-es/dist/parcoords.mjs 103:29-35 Can't import the named export 'select' from non EcmaScript module (only default export is available) ERROR in ./node_modules/parcoord-es/dist/parcoords.mjs 1090:16-20 Can't import the named export 'drag' from non EcmaScript module (only default export is available) ERROR in ./node_modules/parcoord-es/dist/parcoords.mjs 1285:14-18 Can't import the named export 'drag' from non EcmaScript module (only default export is available) ..... .....

[BigFatDog]

Hello. Would you please provide more information about your environment?

• Webpack version
• webpack config
• Sample code

Will there be any problem if you keep .mjs file unchanged?

[bfischer1121]

Get the same error with unejected CRA 2.x (react-scripts@2.0.0-next.3e165448) on webpack 4.8.3

import 'parcoord-es/parcoords.css';
import ParCoords from 'parcoord-es';
//...
let pc = ParCoords({ nullValueSeparator: 'bottom' })(chart.ref.current);

[bfischer1121]

Relevant issues: webpack/webpack#6699 and apollographql/react-apollo#1737

Changing parcoords.mjs to parcoords.esm.js avoided the issue, but I opted for this for the time being:

import 'parcoord-es/dist/parcoords.css';
import ParCoords from 'parcoord-es/dist/parcoords.js';
//...
let pc = ParCoords({ nullValueSeparator: 'bottom' })(chart.ref.current);

(parcoord-es/parcoords.css -> parcoord-es/dist/parcoords.css too)

Thanks.

[BigFatDog]

@bfischer1121 Thanks for providing materials as well as sample code. I've reproduced this bug. I'll investigate and come back with a solution.

[BigFatDog]

v2.1.6 has been published with the bug-fix. I've tested in a webpack 4 project and it works.

Although the original issue is based on angular's ng build but not on webpack 4, I think v2.1.6 should fix the original issue, too.

If anyone is still using previous versions with webpack 4. Please upgrade parcoord-es or consider a workaround that has been introduced by relevant discussions (webpack/webpack#6699 and apollographql/react-apollo#1737, thanks @bfischer1121 for providing it):

Add the following config to your webpack config:

{
  type: 'javascript/auto',
  test: /\.mjs$/,
  use: []
}

[ciukstar]

No more errors on ng build. Issue fixed. Thanks!

[BigFatDog]

You're welcome. 😃