Node-mssql: Can't build with my Webpack/Babel bundled React app

[hillscottc]

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.

[psirenny]

@hillscottc were you ever able to resolve this issue? I just encountered the same problem.

[jholster]

Made a pull request: https://github.com/patriksimek/node-mssql/pull/325

[tracker1]

Umn, I'm pretty sure you still won't be able to do this, as the tds creates a direct socket connection, which a browser won't be able to do... unless this is building for something like electron?

[jholster]

Personally, I use browserify to bundle server-side code for simpler deployment.

[chathuraa]

@jholster , I use browserify, but i get 'Error: Cannot find module './tedious' when i try to connect to a database. Any pointers to fix this?

[tracker1]

Add tedious to your bundle... This module dynamically uses the specified (default to tedious) driver upon connecting...

However, as I said, I don't think it will work, as there's no such thing as a direct real socket connection in a web browser.

[chathuraa]

Thanks, @tracker1, have done that, even updated @jholster patch as well. Still, couldn't get it to work. Is there any other way I can use this package?

[tracker1]

You can't do a direct socket connection to SQL from the browser... you _could_ create an application with something like electron, or you'll need a service/proxy setup on a server separately from SQL Server.

[jstdoit]

I met the problem also, cause i'm using electron trying to connect mssql in my app.

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

[hillscottc]

Looking forward to trying this.

[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! [email protected] start: `webpack && electron .`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] 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

[aysiscore]

Same problem for me. Cannot connect to sql from browser. Using latest version of mssql and mssqlnodev8! see here: https://github.com/tediousjs/node-mssql/issues/1025

[aysiscore]

You can't do a direct socket connection to SQL from the browser... you _could_ create an application with something like electron, or you'll need a service/proxy setup on a server separately from SQL Server.

Why is this not mentioned anywhere? How would anyone come across this information? I'm finding it very difficult to understand how to learn Node development because of these type of issues

[tracker1]

@aysiscore, this module (node-mssql) is built for node.js, not for the browser. You can create a web/api server to do your SQL calls... if you need this on the client, you may want to consider electron[1] or carlo[2]

1. https://github.com/electron/electron
2. https://github.com/GoogleChromeLabs/carlo

[tracker1]

@aysiscore Normally, you build a web page/application that talks to a server... the server can be written in node, talk to sql server and return the response to your application/page. The browser doesn't talk directly to the backend.

I only mention electron and carlo, as there are times you do want something directly on a desktop/client that can do these things. There are other issues with doing these things and have their own issues that I won't get into.

If you don't understand how web API calls (fetch api) and api servers work, I would look into that. Slightly more advanced is going to be options like web-socket systems as well as binary API interfaces.

[dhensby]

@tracker1 thanks for your very clear explanation of this.

My opinion is that we can't put warnings on packages saying what they can't be used for. It's clear this is a node package and not a browser package.

I'm going to lock this issue as resolved beucase @tracker1 has been kind enough to give his time to explain this eloquently, calmly and clearly.