swimlane / ngx-datatable

✨ A feature-rich yet lightweight data-table crafted for Angular
http://swimlane.github.io/ngx-datatable/
MIT License
4.63k stars 1.68k forks source link

Rollup fails due to missing exports #733

Open Nathan-Ryan opened 7 years ago

Nathan-Ryan commented 7 years ago

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 Using rollup with module importing NgxDatatableModule fails due to missing exports.

Warning: 'default' is imported from external module 'rollup' but never used
'ScrollbarHelper' is not exported by 'node_modules\@swimlane\ngx-datatable\release\services\scrollbar-helper.service.js'
'NgxDatatableModule' is not exported by 'node_modules\@swimlane\ngx-datatable\release\datatable.module.js'
'NgxDatatableModule' is not exported by 'node_modules\@swimlane\ngx-datatable\release\datatable.module.js'
'ScrollbarHelper' is not exported by 'node_modules\@swimlane\ngx-datatable\release\services\scrollbar-helper.service.js'
Error: 'NgxDatatableModule' is not exported by node_modules\@swimlane\ngx-datatable\release\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module

Expected behavior Rollup completes as normal.

Reproduction of the problem Include NgxDatatableModule in your module which is used by rollup.

What is the motivation / use case for changing the behavior? Would like to use this in production.

Please tell us about your environment: Windows 10, NPM 4.2, Node 7.9

Nathan-Ryan commented 7 years ago

Looks like this issue was also reported here and closed.

mgmarlow commented 7 years ago

I'm running into this same issue with the following rollup configuration:

Error:

Error: 'NgxDatatableModule' is not exported by node_modules\@swimlane\ngx-datatable\release\index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
build\temp\src\app\iq\design\ui\ui.module.js (18:9)
16: import { AppNavTabsComponent } from './components/navigation/app-nav/components/app-nav-tabs/app-nav-tabs.component';
17: import { DatagridComponent } from './components/datagrid/datagrid.component';
18: import { NgxDatatableModule } from '@swimlane/ngx-datatable';
             ^
19: var IQDesignUIModule = (function () {
20:     function IQDesignUIModule() {

rollup.config.js:

import commonjs from 'rollup-plugin-commonjs';
import nodeResolve from 'rollup-plugin-node-resolve';

export default {
  entry: './build/index.js',
  dest: './dist/index.js',
  onwarn: function (warning) {
    if (warning.code === 'THIS_IS_UNDEFINED') return;
    console.warn(warning.message);
  },
  plugins: [
    nodeResolve({ jsnext: true, module: true }),
    commonjs({
      include: ['node_modules/rxjs/**', 'node_modules/@swimlane/**']
    })
  ]
};
mgmarlow commented 7 years ago

We can suppress the above error by including the modulesOnly: true field in the nodeResolve plugin, but we will still get the following warnings:

'@swimlane/ngx-datatable' is imported by build\temp\src\app\company\design\ui\ui.module.js, but could not be resolved – treating it as an external dependency
Nathan-Ryan commented 7 years ago

@mgmarlow Thanks but unfortunately that seems to cause issues with rxjs. Here's my rollup.config.js with your workaround.

import rollup from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'

export default {
    entry: 'App/SecureApp.Aot.js',
    dest: 'Js/app-secure.js',
    sourceMap: false,
    format: 'iife',
    onwarn: function (warning) {
        if (warning.code === 'THIS_IS_UNDEFINED')
            return;

        console.warn(warning.message);
    },
    plugins: [
        nodeResolve({ jsnext: true, module: true, modulesOnly: true }),
        commonjs({
            include: [
                'node_modules/rxjs/**',
                'node_modules/@swimlane/**'
            ]
        }),
        uglify()
    ]
}

Which causes many of these kind of errors

No name was provided for external module 'rxjs/operator/last' in options.globals – guessing 'rxjs_operator_last'
No name was provided for external module 'rxjs/operator/mergeAll' in options.globals – guessing 'rxjs_operator_mergeAll'
No name was provided for external module 'rxjs/operator/filter' in options.globals – guessing 'rxjs_operator_filter'

The process seems to complete, however, the dest file is corrupt.

amcdnl commented 7 years ago

Do we have a consensus on this? Open to changes to improve this...

mgmarlow commented 7 years ago

@amcdnl Perhaps one solution is to export both the UMD modules and the ES2015 modules. This library uses that method. The UMD output is provided in the node_modules/ng-lightning/bundles/ directory, rather than the base ng-lightning.js file.

Nathan-Ryan commented 7 years ago

@amcdnl Would you recommend using Webpack over Rollup?

nicholasgrillsolutions commented 7 years ago

In the commonjs plugin you can add the namedExports option, where you can add missing exports. https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports Here my rollup-config.js:

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify';

export default {

  entry: 'src/main.js',
  dest: '../build.js', // output a single application bundle
  sourceMap: true,
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        namedExports: {
          'node_modules/@swimlane/ngx-datatable/release/index.js': ['NgxDatatableModule']
        },
        include: 
        ['node_modules/rxjs/**', 
        'node_modules/@swimlane/**']
      }),
      uglify()
  ]
};
schmitzt3 commented 6 years ago

To add to @Niro003's comment - in my rollup config I added 'node_modules/@swimlane/ngx-datatable/release/index.js': ['NgxDatatableModule', 'DatatableComponent'] so that I could use the DatatableComponent with AOT.