Compatibility with IE - Githubissues

manuasir commented 5 years ago

Hello team,

It has been recently reported that the Splunk app for Wazuh is not working properly on Internet Explorer browser.

Probably, it's due to incompatibilities with the native Javascript engine of the browser, which is not able to execute the last ECMAScript 6 features that the app has been developed with. Check this link for further compatibility details.

Cheers, Manu

adri9valle commented 5 years ago

Update:

I have added the next dependencies to the package.json:

  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@babel/runtime": "^7.4.4"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
  }

The .babelrc is configured:

  {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current",
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

I have done several tests, all without positive results, I achieved transpile from ES6 to ES5 avoiding some problems that I have found in the process, problems like regeneratorRuntime is not defined, ${moduleName} has not been loaded yet for contest, TypeError: Cannot read property 'module' of undefined, etc, but I have errors when executing the code yet.

pablotr9 commented 5 years ago

UPDATE I have been trying to bundle our app with Webpack: After many errors of modules that couldn't be found I successfully fixed those errors and bundled our app with the next webpack.config.js: https://github.com/wazuh/wazuh-splunk/commit/862312b8bad4fccaac6950f74d56bb4c67b67d4f#diff-11e9f7f953edc64ba14b0cc350ae7b9d

When loading the app there were found some new errors: Uncaught TypeError: t.module is not a function Fixed here: https://github.com/wazuh/wazuh-splunk/commit/438ab04f9b6a1755098d6d6808e00c0193ae5ec7

Currently facing a new problem when trying to load the app: Uncaught ReferenceError: mvc is not defined

adri9valle commented 5 years ago

Update

I've followed work on this branch 3.10-webpack.

I've done some changes to add babel to transpile the code:

.babelrc:

{
"presets": [
["@babel/preset-env", {
  "targets": {
    "node": "current",
    "browsers": ["last 2 versions", "ie >= 11"]
  }
}]
],
"plugins": ["@babel/plugin-transform-runtime"]
}

package.json:

{
  "name": "wazuh-splunk",
  "version": "3.9.1",
  "revision": "26",
  "code": "26-0",
  "description": "Splunk app for Wazuh",
  "main": "index.js",
  "keywords": [
    "splunk",
    "wazuh",
    "ossec"
  ],
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@babel/runtime": "^7.4.4"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "chai": "^4.2.0",
    "chai-match": "^1.1.1",
    "eslint": "^5.6.1",
    "eslint-plugin-async-await": "0.0.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-requirejs": "^3.2.0",
    "esprima": "^4.0.1",
    "exports-loader": "^0.7.0",
    "mocha": "^5.2.0",
    "needle": "^2.2.4",
    "prettier": "^1.14.3",
    "webpack": "^4.32.2",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "pretty": "prettier --single-quote --semi=false --write SplunkAppForWazuh/**/*.js !SplunkAppForWazuh/appserver/static/js/libs/** !SplunkAppForWazuh/appserver/static/js/utils/codemirror/**",
    "lint": "eslint . --ext .js -c .eslintrc.json",
    "test": "mocha tests/manager.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/wazuh/wazuh-splunk.git"
  },
  "author": "Wazuh, Inc",
  "license": "GPL-2.0",
  "bugs": {
    "url": "https://github.com/wazuh/wazuh-splunk/issues"
  },
  "homepage": "https://github.com/wazuh/wazuh-splunk#readme"
}

webpack.config.js:

Some changes:

// Imports: Dependencies
require('babel-polyfill');
...
...
    rules: [
      // JavaScript/JSX Files
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
...
...

But when the bundle.js is created and the Wazuh App for Splunk is initialized there is an error with AngularJs:

This comes from module.js:

define(['angular'], function(ng) {
  'use strict'
  return ng.module('app.services', [])
})

pablotr9 commented 5 years ago

UPDATE I have been trying to fix these previous errors with no success. The error in the last comment (ng.module is not a function) have been fixed but when the app was loaded it shows a blank page.

I have also tried to use other tools instead of webpacks, Rollup JS to bundle and transpile our code, but again with no success.

pablotr9 commented 5 years ago

Update I've been trying to use babel on the project using presets=@babel/env plugins=@babel/transform-runtime Obtained the following error: Screenshot from 2019-06-12 14-32-08

pablotr9 commented 5 years ago

Update This updated webpack.config.js still causing some errors when trying to import externals splunk modules:

var path = require('path');
const webpack = require('webpack');
//const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
//var requirejsPlugin = require('requirejs-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: './SplunkAppForWazuh/appserver/static/js/app.js',
    output: {
        path: path.resolve(__dirname, './SplunkAppForWazuh/appserver/static/js/dist'),
        filename: 'test.bundle.js',
        //libraryTarget: 'amd-require'
    },
    resolve: {
        alias: {
            FileSaver: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/file-saver/file-saver.js'),
            JqueryUI: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/jquery-ui.js'),
            angular: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/angular.js'),
            'angular-chart': path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/angular-chart.js'),
            angularChart: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/angular-chart.js'),
            chart: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/chart.js'),
            domToImg: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/required-dom-to-image/src/dom-to-image.js'),
            js2xmlparser: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/json2xml/jsontoxml.js'),
            ngAnimate: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/animate.js'),
            ngAria: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/aria.js'),
            ngMessages: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/messages.js'),
            ngMaterial: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/material.js'),
            ngRoute: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/router.js'),
            moment: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/moment.js'),
        },
    },
    externals: [
        '_',
        'jquery',
        'splunkjs',
        'mvc',
        'splunkjs/mvc',
        'splunkjs/mvc/utils',
        'splunkjs/mvc/utils',
        'splunkjs/mvc/searchmanager',
        'splunkjs/mvc/simplexml/searcheventhandler',
        'splunkjs/mvc/layoutview',
        'splunkjs/mvc/simplexml',
        'splunkjs/mvc/simpleform/formutils',
        'splunkjs/mvc/simpleform/input/dropdown',
        'splunkjs/mvc/simplexml/urltokenmodel',
        'splunkjs/mvc/simplexml/element/chart',
        'splunkjs/mvc/simplexml/element/map',
        'splunkjs/mvc/simpleform/input/timerange',
        'splunkjs/mvc/simplexml/element/table',
        'splunkjs/mvc/simplexml/element/single'
    ],
    module: {
        rules: [
          { test: /angular/, loader: 'exports-loader?angular' },
          { test: /ngAnimate/, loader: 'exports-loader?ngAnimate!imports-loader?angular' },
          { test: /ngAria/, loader: 'exports-loader?ngAria!imports-loader?angular' },
          { test: /ngMaterial/, loader: 'exports-loader?ngMaterial!imports-loader?angular' },
          { test: /ngRoute/, loader: 'exports-loader?ngRoute!imports-loader?angular' },
          { test: /chart/, loader: 'exports-loader?ngRoute!imports-loader?angular' },
          { test: /angularChart/, loader: 'exports-loader?angularChart!imports-loader?angular,chart' },
        ]
      },
};

Error: Screenshot from 2019-06-13 12-51-24

adri9valle commented 5 years ago

Update

I've tried to create a simple bundle without babel in order to make the first step and if it works then try to transpile to ES2015 with babel, but I haven't succeeded. The webpack.conf.js is:

// Imports: Dependencies
const path = require('path');

// Webpack Configuration
const config = {
  // Entry
  entry: './SplunkAppForWazuh/appserver/static/js/app.js',
  // Output
  output: {
    path: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/dist'),
    filename: 'bundle.js',
  },
  resolve: {
    alias: {
      FileSaver: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/file-saver/file-saver.js'),
      JqueryUI: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/jquery-ui.js'),
      angular: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/angular.js'),
      'angular-chart': path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/angular-chart.js'),
      angularChart: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/angular-chart.js'),
      chart: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/chart.js'),
      domToImg: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/required-dom-to-image/src/dom-to-image.js'),
      js2xmlparser: path.resolve(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/json2xml/jsontoxml.js'),
      ngAnimate: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/animate.js'),
      ngAria: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/aria.js'),
      ngMessages: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/messages.js'),
      ngMaterial: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/material.js'),
      ngRoute: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/router.js'),
      moment: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/moment.js'),
      moment$: path.join(__dirname, 'SplunkAppForWazuh/appserver/static/js/libs/moment.js'),
    }
  },
  externals: [
    '_',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/utils',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/searcheventhandler',
    'splunkjs/mvc/layoutview',
    'splunkjs/mvc/simplexml',
    'splunkjs/mvc/simpleform/formutils',
    'splunkjs/mvc/simpleform/input/dropdown',
    'splunkjs/mvc/simplexml/urltokenmodel',
    'splunkjs/mvc/simplexml/element/chart',
    'splunkjs/mvc/simplexml/element/map',
    'splunkjs/mvc/simpleform/input/timerange',
    'splunkjs/mvc/simplexml/element/table',
    'js/app'
  ],
  // Loaders
  module: {
    rules: [
      // JavaScript/JSX Files
      // CSS Files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  },
  plugins: [],

  // OPTIONAL
  // Reload On File Change
  watch: true,
  // Development Tools (Map Errors To Source File)
  devtool: 'source-map',
};
// Exports
module.exports = config;

After creating successfully the bundle and start the App I get the following error:

I've read several articles and the official documentation about Splunk, RequireJS, and Webpack.

The problem seems to be that both RequireJS and Webpack are modules loaders, and Splunk requires RequireJS to create Web apps. Webpack cannot replace completely RequireJS and it seems that RequireJS provokes several problems if you try to implement within Webpack.

This problem also affects this issue https://github.com/wazuh/wazuh-splunk/issues/628 because to implement the Elastic UI framework it is recommended to use Webpack. Then this issue https://github.com/wazuh/wazuh-splunk/issues/726 is affected too because the Eui components cannot be used.

NOTE: ReactJS can be loaded and we could create components, but the way to create these components is a bit different and we should create them from scratch without the help of Elastic UI.

NOTE 2: @pablotr9 and I are trying to create a bundle of a eui component in order to use in Splunk without Webpack.

adri9valle commented 5 years ago

Update

Trying to create a bundle of the eui components a receive a lot of errors all of them with parse errors, it seems to be something related with the Webpack loaders.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I'm reading about it and trying to solve these errors.

NOTE: It seems to be related with JSX.

adri9valle commented 5 years ago

Update

I tried to execute babel without Webpack, the code has been transpired but when the App is executed I receive several errors like the following:

These errors come from RequireJS, MODULE NAME ... HAS NOT BEEN LOADED YET FOR CONTEXT: ...

It seems that the necessary modules are not loaded yet, here have an explication: https://requirejs.org/docs/errors.html#notloaded.

I'm working to solve this.

My .babelrc:

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current",
        "browsers": ["last 2 versions", "ie >= 11"]
      }
    }]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

My dependencies in the package.json:

  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@babel/runtime": "^7.4.4"
  },
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.4",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    ...
    ...

adri9valle commented 5 years ago

Update

I've replaced all require calls to load modules that throw the error {module} has not been loaded yet for context: _. Use require([]) in order to prevent this error, but some of these errors still appear.

Example:

require("@babel/runtime/helpers/getPrototypeOf")

By:

require(["@babel/runtime/helpers/getPrototypeOf"], function(getPrototypeOf){})

Also, I received new errors like:

adri9valle commented 5 years ago

Update

I've used the transform-es2015-modules-amd babel plugin to load the AMD modules properly, it seems that works because the way to load the modules with RequireJs once the files have been transpired is different but now I get the following error:

I'm reading about it in https://requirejs.org/docs/errors.html#mismatch to try to fix it.

pablotr9 commented 5 years ago

Update As mentioned in previous messages, using @babel/plugin-transform-runtime generated these require() statements

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

These type of require() is not supported in our RequireJS app and leads to the following errors: Screenshot from 2019-06-17 11-09-57

Trying to make it work, found these 2 plugins (@babel/plugin-transform-async-to-generator and @babel/plugin-proposal-async-generator-functions) The transpiled code instead of some require() statements it now includes inline functions so the previous problem with incompatible require() statements may be solved and indeed it is working as expected in Chrome, but in IE11 we are now getting this error: Screenshot from 2019-06-17 13-06-10 As the new plugin used name suggests, @babel/plugin-transform-async-to-generator async/await functions are transformed to generator functions (function*) hence it's incompatible with IE11.

pablotr9 commented 5 years ago

Update I finally achieved to use the plugin @babel/plugin-transform-runtime as we were having trouble to make it work in our requireJs environment.

Install plugin external helpers npm install --save-dev @babel/plugin-external-helpers
Generate a script with babel helpers ./node_modules/.bin/babel-external-helpers -t var > babel-helpers.js
Add @babel/external-helpers to our .babelrc This new plugin will replace (e.g) var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); with: babelHelpers.inherits This way we avoid using undesired require()

Problem: babelHelpers is undefined Solution: Add it to our main.js


require.config({
....
  paths : {
    babelHelpers: 'path/to/babel-helpers',
    ...
  }
  shim: {
      babelHelpers: {
        exports: 'babelHelpers'
     },
  deps : [..., 'babelHelpers' ]
}

pablotr9 commented 5 years ago

Update I finally achieved to transpile the app and make it compatible with IE11, The following plugins have been used in order to achieve the compatibility: @babel/plugin-transform-classes @babel/plugin-transform-arrow-functions @babel/external-helpers babel-plugin-transform-async-to-promises babel-plugin-transform-es2015-shorthand-properties @babel/plugin-transform-for-of @babel/plugin-transform-spread

Some errors have been found due to styling errors(logos,visualizations):

Now we are working on testing the app in IE11 and fix these errors.

pablotr9 commented 5 years ago

Update

It has been updated to transpile current v3.10.0 app.
Destructuring assignments var [x,y] = [0,1] were causing some problems as its not compatible with IE, a new plugin has been added to support these kind of assignments: @babel/plugin-transform-destructuring
Some variables are being declared as const multiple times, so it causes this error: It can be manually fixed changing const with var, a different way to fix it should be applied.
Many views are working fine but some of the styles must be updated to work with IE: Some views with wrong styling:

Currently doing some research and working on it

Dmitri-Sintsov commented 4 years ago

Which script is used to polyfill missing calls of babel output in IE11? Do you include core-js 3 or something else? Is there a cdn link or the IE11 polyfill is generated with babel?

wazuh / wazuh-splunk

Compatibility with IE #443