Browserify and jQuery DataTables Extensions

Question

i have this browserify shim config:

  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "datatables": "./node_modules/datatables/media/js/jquery.dataTables.js",
    "dt-bootstrap": "./source/vendors/js/dataTables.bootstrap.js",
    "dt-select": "./source/vendors/js/dataTables.select.js"
   },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "$",
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
     },
    "datatables": {
      "exports": "DataTable",
      "depends": [
        "jquery:$"
      ]
     },
    "dt-bootstrap": {
      "depends": ["jquery:$", "datatables:DataTable"]
    },
    "dt-select": {
      "depends": ["jquery:jquery", "datatables:DataTable"]
    }
  },

And when i try to:

import dtBootstrap from 'dt-bootstrap'

After browserify it gives error in to browser that:

Uncaught Error: Cannot find module 'jquery'

This error will be only when i try to:

import $ from 'jquery'
import bootstrap from 'bootstrap'
import DataTable from 'datatables'

// Include any of this modules gives error.
import dtBootstrap from 'dt-bootstrap'
import dtSelect from 'dt-select'

When i don't use them and use only this, all will be ok:

import $ from 'jquery'
import bootstrap from 'bootstrap'
import DataTable from 'datatables'

// No include no error.
//import dtBootstrap from 'dt-bootstrap'
//import dtSelect from 'dt-select'

They using factory pattern from DataTables lib.

Any one have ideas what i doing wrong? I try many configurations for including DataTables Extensions dependencies.

Answer 1

I have generated from datatables site external datatables.js file and include it in to vendor. Then use it in my browserify-shim configuration. And all work!

  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "datatables": "./source/vendors/js/datatables.js"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
 "browserify-shim": {
   "jquery": "$",
   "bootstrap": {
     "depends": [
     "jquery:jQuery"
   ]
  },
 "datatables": {
   "exports": "DataTable",
   "depends": [
     "jquery:$"
   ]
 }
},