Unable to import soap-npm module with webpack 4 and babel 7

Question

I've updated Webpack (v4.34.0) and Babel (v7.4.5) in an old Framework7 (v4.4.3) / Vue.js (v2.6.10) project.

I need to use node-soap library as a soap client in my browser, but when run the code compiled by webpack, this library it's value is undefined

import soap from 'soap'
console.log('Soap Library Imported: ', soap)
Soap Library Imported: undefined

All works fine with axios library.

import axios from 'axios'
console.log('Axios Library Imported: ', axios)
Axios Library Imported: ƒ wrap() {...}

I think I'm having a module import trouble with babel, but I'm figuring out where the problem could be.

Thank for your help.

---

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "modules": "auto",
      "targets": {
        "browsers": [
          "Android >= 5",
          "IOS >= 9.3",
          "Edge >= 15",
          "Safari >= 9.1",
          "Chrome >= 49",
          "Firefox >= 31",
          "Samsung >= 5",
        ],
      },
    }],
  ],
  "plugins": [
    "transform-vue-jsx",
    // "@babel/plugin-transform-runtime",
    "@babel/plugin-syntax-dynamic-import",
  ],
}

webpack.config.js (extract)

module.exports = {
  mode: env,
  node: {
    setImmediate: false,
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty', 
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        include: [
          resolvePath('src'),
          resolvePath('node_modules/framework7'),
          resolvePath('node_modules/framework7-vue'),
          resolvePath('node_modules/template7'),
          resolvePath('node_modules/dom7'),
          resolvePath('node_modules/ssr-window'),
          resolvePath('node_modules/soap'),
        ],
      },
   },
}

Answer 1

Probably what is happening is node-soap doesn't have a default export (see soap.js) and you are not importing any of its named exports, so they get dropped during compilation by webpack's tree shaking and all you get is an empty chunk (you could confirm this by inspecting the bundle generated by webpack).

Try importing the node-soap methods directly as named exports, e.g. createClient:

import { createClient } from 'soap'