starting fails

[ulutomaz]

Some things are deprecated, and should be updated I guess. Such an awesome project, should be kept alive.

Environment

• Kitto version: 0.9.1

• Elixir / Hex version (mix hex.info):
  Hex: 0.15.0
  Elixir: 1.8.1
  OTP: 21.2.7

       Built with: Elixir 1.3.4 and OTP 18.3.4.4
  

• Node / NPM version (node -v) (npm -v):

➜ app1 node -v
v11.11.0
➜ app1 npm -v
6.7.0

• Operating system:
  mac os

Current behavior

Generated app1 app
11:56:20.033 [info] Starting Kitto server, listening on 127.0.0.1:4000
11:56:20.071 [warn] Setting Ranch options together with socket options is deprecated. Please use the new map syntax that allows specifying socket options separately from other options.

/Users/tomaz/razvoj/elixir/dashboards-Kitto/app1/node_modules/webpack-cli/bin/convert-argv.js:138
const webpackConfigurationValidationErrors = validateSchema(webpackConfigurationSchema, options);
^

TypeError: validateSchema is not a function
at processConfiguredOptions (/Users/tomaz/razvoj/elixir/dashboards-Kitto/app1/node_modules/webpack-cli/bin/convert-argv.js:138:48)
at module.exports (/Users/tomaz/razvoj/elixir/dashboards-Kitto/app1/node_modules/webpack-cli/bin/convert-argv.js:132:10)
at Object. (/Users/tomaz/razvoj/elixir/dashboards-Kitto/app1/node_modules/webpack-dev-server/bin/webpack-dev-server.js:92:55)
at Module._compile (internal/modules/cjs/loader.js:799:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10)
at Module.load (internal/modules/cjs/loader.js:666:32)
at tryModuleLoad (internal/modules/cjs/loader.js:606:12)
at Function.Module._load (internal/modules/cjs/loader.js:598:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:862:12)
at internal/main/run_main_module.js:21:11

Expected behavior

server is listening, but nothing is shown.... exept few black dots on top left corner ul -> li without content.

Is there any fast fix for this? or project is more or less unmaintained?

Best,
Tomaz

[zorbash]

Hi @ulutomaz thanks for opening this issue.

For the deprecation warning there is a quick fix and I'll push it in the following days.
Now for the Webpack error it's hard to estimate it at the moment. A solution could be to use an older version of node / npm. Unfortunately it's not easy to keep up with the pace of node releases to ensure compatibility.

Is there any fast fix for this? or project is more or less unmaintained?

I don't understand the use of or in the above sentence. It is maintained in the sense that I do my best to provide security updates and respond to critical issues.

[mileszs]

This probably warrants more investigation than the little that I did. However, here is what worked for me (where "worked" is a very bare minimum of "I could view the sample"):

From perusing Stack Overflow posts, and comparing them to my output and code spelunking, it seemed a webpack, webpack-cli, webpack-dev-server version mismatch issue of some sort. I borrowed a solution from this SO post, resulting in my fixing a few versions in my package.json to specific versions, removing node_modules/, and running npm install again.

  "devDependencies": {
    "webpack-dev-server": "2.9.7",
    "webpack-cli": "2.0.10"
  },
  "dependencies": {
    "kitto": "file:deps/kitto",
    "webpack": "3.10.0",
    // ...
  }

Then I had some webpack config issues.

First, on line 24 of webpack.config.js, I changed the empty string to '*'. This was a stab in the dark, though a slightly, maybe halfway, kinda educated guess sorta stab in the dark. It moved me on to the next issue.

On line 25, I changed modulesDirectories to modules.

Then, in the loaders section, I added the suffix -loader to every one. Every. One.

    loaders: [
      { test: /\.css$/, loaders: ['style-loader', 'css-loader'] },
      { test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] },
      { test: /\.jsx?$/, loaders: ['babel-loader?cacheDirectory'] },
      {
        test: /\.(svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'url-loader?limit=1000&name=images/[name].[ext]'
      },
      {
        test: /\.(eot|woff|woff2|ttf)(\?\S*)?$/,
        loader: 'url-loader?limit=1000&name=fonts/[name].[ext]'
      },
      {
        test: require.resolve('jquery-knob'),
        loader: "imports-loader?require=>false,define=>false,this=>window"
      },
      {
        test: PATHS.d3,
        loader: "script-loader"
      },
      {
        test: require.resolve('rickshaw'),
        loader: "scriptuloader"
      }
    ]

Now mix kitto.server runs, and I can view the sample dashboard. Hooray!

Hopefully this is helpful to someone else. I think there's a better solution with regards to locking webpack, et al versions. This is working for me for now, though.

[zorbash]

Thank you very much @mileszs for your investigation. I'll spend some time to ensure the mix generator always produces a package.json and webpack config which works out of the box.

[mileszs]

@zorbash No sweat, man. Keeping up with all that stuff is almost impossible unless you're managing a front-end codebase on a daily basis. Actually, technically I'm involved in a webpack-based React app on a daily basis and I still mostly just used Stack Overflow to get a half-solution here. Haha. Hopefully it's still at least half-useful. :-)

[zorbash]

@mileszs Finally someone who gets me 😅
I have a branch where I'm making attempts to have it working with the latest version of webpack, but I'm not there yet. I'm even having thoughts of ditching webpack completely, or starting over the FE part from part using the most recent guides.