New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to bundle UMD format libraries and ES6 modules with rollup-plugin-commonjs? #547

Closed
fengshuo opened this Issue Mar 8, 2016 · 6 comments

Comments

Projects
None yet
3 participants
@fengshuo

fengshuo commented Mar 8, 2016

I am trying to bundle es6 module files with some UMD style third party libraries, specifically i18next, i18next backend, and jquery-i18next.

I downloaded these i18next minified js files, put them into a 'vendors' folder, here is my rollup config:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import includePaths from 'rollup-plugin-includepaths';
import nodeResolve from 'rollup-plugin-node-resolve';

var includePathOptions = {
  paths: ['myES6', 'vendors']
};

export default {
  entry: 'entry.js',
  plugins: [
    includePaths(includePathOptions),
    nodeResolve({
      jsnext: true,
      main: true
    }),
    commonjs({
      include: 'vendors/**'
    }),
    babel()
  ],
  format: 'amd',
  dest: 'build/test-bundle.js',
  sourceMap: true
};

In my es6 files(localization.js):

import i18next from 'i18next.min';
import XHR from 'i18nextXHRBackend.min'; // use rollup-plugin-includepaths to solve relative path issue
// more code below...

Error message returned by rollup -c:

Module [directory]/vendors/i18nextXHRBackend.min.js does not export default (imported by [directory]/es6/localization.js)

I searched for plugins to convert umd format js to es6 module format but haven't found anything available. What should I do to enable rollup to bundle UMD format third party library with other ES6 modules? or is it not supported in any way?

Thanks.

@TrySound

This comment has been minimized.

Show comment
Hide comment
@TrySound

TrySound Mar 8, 2016

Member

@fengshuo Try npm i i18next

Member

TrySound commented Mar 8, 2016

@fengshuo Try npm i i18next

@fengshuo

This comment has been minimized.

Show comment
Hide comment
@fengshuo

fengshuo Mar 8, 2016

@TrySound I did try to install these packages via npm, but the error message is the same saying: 'XXX does not export default...'. Is there any plugin or rollup config missing? Below is the npm approach setting:

I installed packages via npm, here is the npm approach config:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import includePaths from 'rollup-plugin-includepaths';
import nodeResolve from 'rollup-plugin-node-resolve';

var includePathOptions = {
  paths: ['myES6', 'node_modules']
};

export default {
  entry: 'entry.js',
  plugins: [
    includePaths(includePathOptions),
    nodeResolve({
      jsnext: true,
      main: true
    }),
    commonjs({
      include: 'node_modules/**'
    }),
    babel()
  ],
  format: 'amd',
  dest: 'build/test-bundle.js',
  sourceMap: true
};

In localization es6 js:

import i18next from 'i18next';
import XHR from 'i18nextXHRBackend';
// ...

Perhaps the error is caused by rollup-plugin-commonjs? Or is it because the way I import the i18next module is not supported on the condition that I am trying to bundle UMD with ES6, and convert them into a AMD bundle? I haven't found any useful/applicable threads on SO or Github about this kind of scenario.

Would really appreciate any help or suggestion, Thanks.

fengshuo commented Mar 8, 2016

@TrySound I did try to install these packages via npm, but the error message is the same saying: 'XXX does not export default...'. Is there any plugin or rollup config missing? Below is the npm approach setting:

I installed packages via npm, here is the npm approach config:

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import includePaths from 'rollup-plugin-includepaths';
import nodeResolve from 'rollup-plugin-node-resolve';

var includePathOptions = {
  paths: ['myES6', 'node_modules']
};

export default {
  entry: 'entry.js',
  plugins: [
    includePaths(includePathOptions),
    nodeResolve({
      jsnext: true,
      main: true
    }),
    commonjs({
      include: 'node_modules/**'
    }),
    babel()
  ],
  format: 'amd',
  dest: 'build/test-bundle.js',
  sourceMap: true
};

In localization es6 js:

import i18next from 'i18next';
import XHR from 'i18nextXHRBackend';
// ...

Perhaps the error is caused by rollup-plugin-commonjs? Or is it because the way I import the i18next module is not supported on the condition that I am trying to bundle UMD with ES6, and convert them into a AMD bundle? I haven't found any useful/applicable threads on SO or Github about this kind of scenario.

Would really appreciate any help or suggestion, Thanks.

@Victorystick

This comment has been minimized.

Show comment
Hide comment
@Victorystick

Victorystick Mar 8, 2016

Member

@fengshuo I believe that the CommonJS plugin currently has some problems with UMD because of the tests in the UMD header. See rollup/rollup-plugin-commonjs#38.

Member

Victorystick commented Mar 8, 2016

@fengshuo I believe that the CommonJS plugin currently has some problems with UMD because of the tests in the UMD header. See rollup/rollup-plugin-commonjs#38.

@fengshuo

This comment has been minimized.

Show comment
Hide comment
@fengshuo

fengshuo Mar 8, 2016

@Victorystick Thanks a lot for pinpointing the problem, I'll try if there is any workaround for now. Although it would be better if there is a heads up on the plugin readme for newbies like me.

fengshuo commented Mar 8, 2016

@Victorystick Thanks a lot for pinpointing the problem, I'll try if there is any workaround for now. Although it would be better if there is a heads up on the plugin readme for newbies like me.

@TrySound

This comment has been minimized.

Show comment
Hide comment
@TrySound

TrySound Mar 8, 2016

Member

@fengshuo Try to remove node_modules from includePaths. It should be handled with node-resolve

Member

TrySound commented Mar 8, 2016

@fengshuo Try to remove node_modules from includePaths. It should be handled with node-resolve

@fengshuo

This comment has been minimized.

Show comment
Hide comment
@fengshuo

fengshuo Mar 9, 2016

Thanks for your quick responses.

I reinstalled i18next related packages on the same level of entry.js, and handle these packages as @TrySound suggested. This time rollup worked.

However, when bundled js file got loaded in browser, there was an error message from i18next-xhr-backend/lib/index.js saying: utils.defaults is not a function.

I found that var _utils = require('./utils'); is not loading utils module correctly, but it works if I change it without relative path to: var _utils = require('utils'); .

I am not sure if this is caused by the library itself, or rollup-plugin-node-resolve, or rollup-plugin-commonjs, other packages(i18next, jquery-i18next doesn't have this problem) though. I'll open an issue for i18next-xhr-bacckend as well.

Thanks for your responses, they helped a lot.

fengshuo commented Mar 9, 2016

Thanks for your quick responses.

I reinstalled i18next related packages on the same level of entry.js, and handle these packages as @TrySound suggested. This time rollup worked.

However, when bundled js file got loaded in browser, there was an error message from i18next-xhr-backend/lib/index.js saying: utils.defaults is not a function.

I found that var _utils = require('./utils'); is not loading utils module correctly, but it works if I change it without relative path to: var _utils = require('utils'); .

I am not sure if this is caused by the library itself, or rollup-plugin-node-resolve, or rollup-plugin-commonjs, other packages(i18next, jquery-i18next doesn't have this problem) though. I'll open an issue for i18next-xhr-bacckend as well.

Thanks for your responses, they helped a lot.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment