Using uibuilder with WebPack

Hi all,

Just letting you know that I have finally got round to testing uibuilder with webpack.

I've put together a quick outline of the best way I've come up with so far and added that to the WIKI.

I know that some folk have had some issues with uibuilder and webpack which is why I've been investigating. I can now say confidently that uibuilder does work just fine, at least with webpack v4.29+. If you are having issues, please try out the WIKI page first so that we can work out where the issue lies. The basics definitely work fine.


Hi Julian, i just following step to using webpack but i have errror in package.json.. can help me ? thanks

Hi, looks like you have mismatched quote types on the "build" script line?

But i just copy and paste it.. and following step by step

Pada tanggal Sab, 11 Mei 2019 21:01, Julian Knight via Node-RED Forum menulis:

Ah, OK. That is only a snippet from what should be a complete package.json file I'm afraid.

Assuming that nothing else is in the file other than the snippet you pasted from the WIKI, I would delete it and then, from a command line, change to the correct folder and issue the command npm init -y. This will create a new package.json file.

Then you can amend the script section of the resulting file adding the "build" line only. But pay attention to comma's. It is safest to use a decent code editor such as VScode if you aren't familiar with JSON files as they have to be exactly correct.

Here is an example from one of my test instances:

  "name": "uib-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config",
    "test": "echo \"Error: no test specified\" && exit 1"
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap-vue": "^2.0.0-rc.11",
    "vue": "^2.5.22",
    "vue-router": "^3.0.2"
  "devDependencies": {
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "*",
    "node-red-contrib-uibuilder": "^1.0.12",
    "vue-loader": "^15.6.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"

And for completeness, here is the matching webpack config file


'use strict'

const { VueLoaderPlugin } = require('vue-loader')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: [
    module: {
        rules: [
                test: /\.vue$/,
                use: 'vue-loader'
            }, {
                test: /\.css$/,
                use: [
    // @see
    plugins: [
        new VueLoaderPlugin(),
        // Copies from wherever to the dist folder
        new CopyWebpackPlugin([
            {from: './src/index.html'},
            {from: './src/index.css'},
            {from: './src/manifest.json'},

i miss node_modules file,i has installed it in uibuilder not in instance-url, i was fixed it, and that work. thanks for your help Julian.

1 Like


This will get a lot easier with v2.

You will be able to edit your package.json file from within the admin ui and run a defined build script from there as well.

The idea with v2 is that you shouldn't need to have access to the command line of the server.

I just need to find time to finish it off! And to stop adding changes to it :woozy_face: