Can't build with my Webpack/Babel bundled React app

My React app fails to build whenever I import mssql. It’s important that I do this on the client side, since I won’t be running on an Node/Express server. It seems that executing in Webpack browser bundle requires additional configuration. Some kind of Polyfill maybe? I can’t find any help on this anywhere – I could really use some advice.

The build errors and warning are:

    WARNING in ./~/mssql/lib/tds-fix.js
    Module not found: Error: Cannot resolve module 'tds/package.json' in /Users/hills/upload-covers/node_modules/mssql/lib
     @ ./~/mssql/lib/tds-fix.js 6:8-35

    WARNING in ./~/mssql/lib/tds-fix.js
    Module not found: Error: Cannot resolve module 'tds/lib/tds-constants.js' in /Users/hills/upload-covers/node_modules/mssql/lib
     @ ./~/mssql/lib/tds-fix.js 13:4-39

    WARNING in ./~/mssql/lib/tds-fix.js
    Module not found: Error: Cannot resolve module 'tds' in /Users/hills/upload-covers/node_modules/mssql/lib
     @ ./~/mssql/lib/tds-fix.js 14:4-18

    ERROR in ./~/mssql/lib/msnodesql.js
    Module not found: Error: Cannot resolve module 'msnodesql' in /Users/hills/upload-covers/node_modules/mssql/lib
     @ ./~/mssql/lib/msnodesql.js 9:14-34

    ERROR in ./~/mssql/lib/msnodesqlv8.js
    Module not found: Error: Cannot resolve module 'msnodesqlv8' in /Users/hills/upload-covers/node_modules/mssql/lib
     @ ./~/mssql/lib/msnodesqlv8.js 9:14-36

    ERROR in ./~/mssql/lib/tds.js
    Module not found: Error: Cannot resolve module 'tds' in /Users/hills/upload-covers/node_modules/mssql/lib
     @ ./~/mssql/lib/tds.js 9:8-22

    ERROR in ./~/tedious/lib/connection.js
    Module not found: Error: Cannot resolve module 'net' in /Users/hills/upload-covers/node_modules/tedious/lib
     @ ./~/tedious/lib/connection.js 25:13-27

    ERROR in ./~/tedious/lib/instance-lookup.js
    Module not found: Error: Cannot resolve module 'dgram' in /Users/hills/upload-covers/node_modules/tedious/lib
     @ ./~/tedious/lib/instance-lookup.js 3:12-28

    ERROR in ./~/tedious/lib/message-io.js
    Module not found: Error: Cannot resolve module 'tls' in /Users/hills/upload-covers/node_modules/tedious/lib
     @ ./~/tedious/lib/message-io.js 11:10-24

Here is my webpack config:

    var path = require('path');
    var webpack = require('webpack');
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
      devtool: 'eval-source-map',
      entry: [
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'app/main.js')
      ],
      output: {
        path: path.join(__dirname, '/dist/'),
        filename: '[name].js',
        publicPath: '/'
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: 'app/index.tpl.html',
          inject: 'body',
          filename: 'index.html'
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('development')
        })
      ],
      module: {
        loaders: [{
          test: /\.js?$/,
          exclude: /node_modules/,
          loader: 'babel',
          query: {
            "presets": ["react", "es2015", "stage-0", "react-hmre"]
          }
        }, {
          test: /\.json?$/,
          loader: 'json'
        }, {
          test: /\.css$/,
          loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
        }]
      }
    };

Thanks.

[kczx3]

I’m having trouble with figuring this out to work with webpack still. You mention to use const sql = require('mssql/msnodesqlv8') instead of const sql = require('mssql') but I still get an error during bundling. Are we required to use this driver instead of Tedious?

> webpack && electron .

Hash: 1693f2f917bb683de147
Version: webpack 2.6.1
Time: 2227ms
      Asset     Size  Chunks                    Chunk Names
renderer.js  1.01 MB       0  [emitted]  [big]  main
   [0] ./~/process/browser.js 5.42 kB {0} [built]
   [4] ./~/object-assign/index.js 2.11 kB {0} [built]
  [10] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [16] ./~/react/lib/ReactElement.js 11.2 kB {0} [built]
  [18] ./~/react-dom/lib/ReactReconciler.js 6.21 kB {0} [built]
  [19] ./~/react/lib/React.js 5.08 kB {0} [built]
  [52] ./~/react/react.js 56 bytes {0} [built]
  [94] ./~/react-dom/index.js 59 bytes {0} [built]
  [95] ./renderer.js 2.54 kB {0} [built]
 [137] ./~/mssql/msnodesqlv8.js 49 bytes {0} [built]
 [156] ./~/react-dom/lib/ReactDOM.js 5.17 kB {0} [built]
 [163] ./~/react-dom/lib/ReactDOMInvalidARIAHook.js 3.14 kB {0} [built]
 [164] ./~/react-dom/lib/ReactDOMNullInputValuePropHook.js 1.37 kB {0} [built]
 [170] ./~/react-dom/lib/ReactDOMUnknownPropertyHook.js 4.32 kB {0} [built]
 [173] ./~/react-dom/lib/ReactDefaultInjection.js 3.5 kB {0} [built]
    + 215 hidden modules

ERROR in ./~/mssql/lib/msnodesqlv8.js
Module not found: Error: Can't resolve 'msnodesqlv8' in 'C:\Users\Chris\projects\electron\sysinfo\node_modules\mssql\lib'
 @ ./~/mssql/lib/msnodesqlv8.js 3:18-40
 @ ./~/mssql/msnodesqlv8.js
 @ ./components/App.js
 @ ./renderer.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! sysinfo@1.0.0 start: `webpack && electron .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the sysinfo@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Chris\AppData\Roaming\npm-cache\_logs\2017-06-16T15_35_32_947Z-debug.log

[patriksimek]

Implemented in v4 alpha. Drivers are no longer loaded dynamically so the library is now compatible with Webpack. To use msnodesqlv8 driver, use const sql = require('mssql/msnodesqlv8') syntax.