Can't import the named export on compilation

[lorenzofox3]

Bug Report or Feature Request (mark with an x)

- [x] bug report
- [ ] feature request

Probable related issue: #10744

Area

- [ ] devkit
- [ ] schematics

I don't know

Versions

node: v10.0.0
npm: v6.1.0
on macOs (Sierra)

with the following dependencies

"dependencies": {
    "@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "smart-table-ng": "0.0.10",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^6.0.3",
    "@angular-devkit/build-angular": "~0.6.8",
    "typescript": "~2.7.2",
    "@angular/cli": "~6.0.8",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1"
  }

Repro steps

1. fresh install with angular-cli: ng new my-app
2. install smart-table-ng: npm install smart-table-ng
3. Using the component below.
4. Compiling

with the following component (cf 3)

import {Component} from '@angular/core';
import {SmartTable, of} from 'smart-table-ng';

interface User {
    name: string;
    age: number;
}

const users: User[] = [{
    name: 'Laurent',
    age: 31
}, {
    name: 'Foo',
    age: 21
}];


const providers = [{
    provide: SmartTable, useValue: of<User>(users)
}];

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

I get a compilation error.

The log given by the failure

ERROR in ./node_modules/smart-table-search/dist/bundle/index.mjs
23:36-38 Can't import the named export 're' from non EcmaScript module (only default export is available)

Desired functionality

I would expect a correct compilation. The related package and its dependencies seem to be correctly packaged smart-table-ng > smart-table-core > smart-table-search > re-template-tag

Mention any other details that might be useful

I believe it is a regression as stackblitz (with their own set up then) compiles and run correctly. see this sample

[filipesilva]

As far as I can tell this is intended behaviour as part of Webpack's support for .mjs.

To illustrate I put up a repro that only uses smart-table-ng and pure webpack at https://github.com/filipesilva/issue11527-webpack.

The only thing it does is bundle this file:

import { SmartTable } from 'smart-table-ng';

console.log(SmartTable);

Running npm test (which runs webpack) yields the same error:

./node_modules/smart-table-search/dist/bundle/index.mjs 23:36-38
  0:0  error  Can't import the named export 're' from non EcmaScript module (only
              default export is available)

The best hint I found as to this behaviour is webpack/webpack#7126 (comment).

It looks like using .mjs makes it so you can only import the main field of a given node module, and that this is intended per the compatibility rules within Webpack.

For re-template-tag, the fields are as follows:

  "main": "./cjs/index.js",
  "module": "./esm/index.js",

So when you import re-template-tag from from a .mjs file, you will get re-template-tag/cjs/index.js instead of re-template-tag/esm/index.js. Getting a file in CommonJS format results in the error you see.

You can test this hypothesis by editing node_modules/re-template-tag/package.json and replacing the main path with the module path ("main": "./cjs/index.js" -> "main": "./esm/index.js"). The build will now succeed.

This is mostly a packaging issue I think, and not a problem with Angular CLI. It has to do with how smart-table-ng and re-template-tag are packaged. Hope this helps.

[lorenzofox3]

Thanks for your help, I'll get in touch with the re-template-tag author. Quite surprising it compiles on stackblitz though.

[filipesilva]

stackblitz has its own build system that isn't Webpack based (AFAIK), so it might resolve packages differently.

[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.}