"SyntaxError: Unexpected token ." in webpack script

[codie3611]

Hello, I have the following configuration:

node 10.16.0 electron 3.0.2 webpack 4.20.2 webpack-node-externals 1.7.2

When adding the line externals: [nodeExternals()], in my webpack script I get the error:

vm.js:74 Uncaught SyntaxError: Unexpected token .
    at new Script (vm.js:74)
    at createScript (vm.js:246)
    at Object.runInThisContext (vm.js:298)
    at Module._compile (internal/modules/cjs/loader.js:678)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:722)
    at Module.load (internal/modules/cjs/loader.js:620)
    at tryModuleLoad (internal/modules/cjs/loader.js:559)
    at Function.Module._load (internal/modules/cjs/loader.js:551)
    at Module.require (internal/modules/cjs/loader.js:658)
    at require (internal/modules/cjs/helpers.js:20)

I tracked down the code segment to:

   try {
      super(code,
            filename,
            lineOffset,
            columnOffset,
            cachedData,
            produceCachedData,
            parsingContext);
    } catch (e) {
      throw e; /* node-do-not-add-exception-line */
    }

So I assume the loaded code is having a syntax error. I looked into the code fragment and for an unknown reason it pulls in a css file and wraps it in js code for whatever reason:

(function (exports, require, module, __filename, __dirname, process, global, Buffer) { 
    return function (exports, require, module, __filename, __dirname) { 
        .srd-diagram{position:relative;flex-grow:1;display:flex;cursor:move;overflow:hidden}
        .srd-diagram__selector{position:absolute;background-color:rgba(0,192,255,0.2);
        border:solid 2px #00c0ff}
        ...
}

I thought that the issue might be in my webpack.config.js but it runs without the external module command.

var path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var nodeExternals = require('webpack-node-externals');

module.exports = {
  watch: true,
  // target: "electron-renderer",
  target:"node",
  entry: "./app/src/renderer_process.jsx",
  output: {
    path: path.resolve(path.join(__dirname,"app","build")),
    publicPath: "build/",
    filename: "bundle.js"
  },
  // externals: ['grpc'],
  externals: [nodeExternals()],
  node: {
    __dirname:  true,
    __filename: false
  },
  module: {
    rules: [{
        test: /\.jsx?$/,
        // loader: "babel-loader",
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["babel-preset-env"]
          }
        }
      },
      {
        test: /\.css$/,
        use: [{
          loader: "style-loader/url"
        }, {
          loader: "file-loader"
        }]
      },
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: "file-loader",
        query: {
          name: "[name].[ext]?[hash]"
        }
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin({
      filename: "bundle.css",
      disable: false,
      allChunks: true
    })
  ],

  resolve: {
    extensions: [".js", ".jsx", ".json"]
  }
};

Any ideas?

[jancama2]

https://www.npmjs.com/package/webpack-node-externals#how-can-i-bundle-required-assets-ie-css-files-from-node_modules