Dashboards & Visualizations

Splunk JS importing external modules (React components)

derekf
Explorer

I have a very basic external project written in TypeScript. It simply exports a jsx.element. I use webpack and babel to create a bundle, but whenever I try to require it in Splunk web, the object is undefined.

What am I doing wrong?

HelloReact.tsx

import React from 'react';
export let z = <div>Hello world!</div>;

.babelrc

{
    "presets": [
        "@babel/env",
        "@babel/typescript",
        "@babel/react"
    ],
    "plugins": [
        "@babel/proposal-class-properties",
        "@babel/proposal-object-rest-spread"
    ]
}

package.json

{
  "name": "babeltest",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.1.0",
    "babel-loader": "^8.0.4",
    "typescript": "^3.1.3",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "react": "^16.5.2",
    "react-dom": "^16.5.2"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "jsx": "react",
    "declaration": true,
    "outDir": "lib",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

webpack.config.js

var path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/HelloReact',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json']
    },
    module: {
        rules: [{
            test: /\.(tsx?)|(js)$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }],
    } };

Splunk file that is using the above

require([
    "/static/app/<appname>/bundle.js",
], function(thing) {
    console.log(thing) // this always prints 'undefined'
});
0 Karma
1 Solution

derekf
Explorer

For anyone else running into something similar. The following should be added to the output of the webpack config

library: 'HelloReact',
libraryTarget: 'umd'

https://webpack.js.org/configuration/output/#output-librarytarget

View solution in original post

0 Karma

derekf
Explorer

For anyone else running into something similar. The following should be added to the output of the webpack config

library: 'HelloReact',
libraryTarget: 'umd'

https://webpack.js.org/configuration/output/#output-librarytarget

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...