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!

Welcome to the Future of Data Search & Exploration

You have more data coming at you than ever before. Over the next five years, the total amount of digital data ...

What’s new on Splunk Lantern in August

This month’s Splunk Lantern update gives you the low-down on all of the articles we’ve published over the past ...

This Week's Community Digest - Splunk Community Happenings [8.3.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...