Open manuasir opened 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.
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
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"
}
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', [])
})
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.
Update
I've been trying to use babel on the project using
presets=@babel/env
plugins=@babel/transform-runtime
Obtained the following error:
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:
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.
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.
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",
...
...
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:
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.
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:
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:
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.
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.
npm install --save-dev @babel/plugin-external-helpers
./node_modules/.bin/babel-external-helpers -t var > babel-helpers.js
@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' ]
}
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.
Update
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-destructuringconst
with var
, a different way to fix it should be applied.Currently doing some research and working on it
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?
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