Difficulty running example code locally

[raffian]

trafficstars

This library is amazing. We've been looking for something in d3 for illustrating bidirectional upstream and downstream software dependencies. Your implementation is not only perfect but sleek and smooth - it's really beautiful, so kudos to your efforts,

Now the bad news. I spent several hours trying to get the example code working from the README. I'm no frontend expert, but I've built websites in the past (years ago) and definitely not a stranger to HTML and JS, even tinkered with NodeJS but nothing serious. I created index.html from this snippet in Quickstart, added a simple index.js to serve up static content, then ran with node index.js and immediately got NOT FOUND errors for dependentree.js and royal.js. Troubleshooted and hacked together a solution for loading script resources but it still doesn't load properly.

My suspicion is I'm running the code incorrectly. Should I be using webpack? If so, that's fine, I'll figure it out but I just want to make sure it's the right path.

[raffian]

I took my own advice and switched to webpack.

Project structure

/dist
/src
   index.html
   index.js
webpack.config.js
package.json

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      title: 'Webpack Example App',
      header: 'Webpack Example Title',
      metaDesc: 'Webpack Example Description',
      template: './src/index.html',
      filename: 'index.html',
      inject: 'body'
    })
  ],
  mode: 'development',
  output: {
    clean: true
  },
  devServer: {
    static: './dist',
    open: true
  },
  "entry":'./src/index.js'
};

package.json

{
  "name": "webpack2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve --mode development",
    "prod": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@square/dependentree": "^1.0.2",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.77.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

For src/index.html I used snippet from Form Example , as-is. The only thing I have in src/index.js is this:

import DependenTree from '@square/dependentree';

Build to /dist, run with npm run dev, no errors on startup, but browser having issues resolving resources. Out of curiosity I placed copied of dependentree.js and royals.js in the /dist folder which eliminated all the errors, but that was a hack and cannot be the correct solution, and the tree still failed to load so my hack sorcery was moot anyway. Any ideas on what I'm missing?

$ npm run dev

> [email protected] dev
> webpack serve --mode development

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.207:8080/
<i> [webpack-dev-server] Content not from webpack is served from './dist' directory
<i> [webpack-dev-middleware] wait until bundle finished: /
asset main.js 261 KiB [emitted] (name: main)
asset index.html 4.08 KiB [emitted]
orphan modules 629 KiB [orphan] 570 modules
runtime modules 27.3 KiB 12 modules
cacheable modules 173 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 68.9 KiB 16 modules
  modules by path ./node_modules/webpack/hot/*.js 4.59 KiB
    ./node_modules/webpack/hot/dev-server.js 1.88 KiB [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
    + 2 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
    ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
    + 2 modules
  ./src/index.js 48 bytes [built] [code generated]
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 14.5 KiB [built] [code generated]
webpack 5.77.0 compiled successfully in 910 ms

[raffian]

UPDATE

Yeah, it's finally working after my colleague and I spent a hour troubleshooting issues from my last post.

To fix 404 errors for dependentree.js and royals.js , we added royals.js to src/ folder, then updated src/index.js as follows:

import DependenTree from '@square/dependentree';
import royals from './royals.js';
window.DependenTree = DependenTree;
window.royals = royals;

Swapped content in index.html for the long snippet from Form Example, tried loading the page but got a few errors regarding symbols already defined so we commented out erroneous definitions for currentEntity and direction ...

    //let currentEntity = 'Elizabeth II';
    //let direction = 'downstream';
    t.setTree(currentEntity, direction);
  </script>
</html>

Next, updated <script> tags from this:

  <script type="text/javascript" src="dependentree.js"></script>
  <script type="text/javascript" src="royals.js"></script>

...to this:

  <script type="text/javascript" src="main.js"></script>
  <!-- script type="text/javascript" src="royals.js"></script -->
  <script>

Lastly, the browser kept saying clone() was undefined - couldn't figure out why so we removed it.

    // Adds data
    t.addEntities(clone(testData.royals));      //---> changed to tree.addEntities(royals);

We're not sure if this is the correct way of using dependentree but it's how we got it working.

[DevMukhtarr]

Hello, i tried the adjustments you made but in react, just getting a blank page