ERROR in Path must be a string. Received undefined

[chasm]

I'm getting the above error when I try to build the composable cycle.js example. I've searched and can't figure out where it is getting undefined. Maybe something to do with the html-webpack-plugin? The js and css files build, but the above error is the only line in the dist/index.html file.

Ideas?

> @ build /component-check/examples/composable-components/cyclejs
> webpack

Hash: c1ca58a22ffca5f7e81c
Version: webpack 1.13.1
Time: 3046ms
     Asset      Size  Chunks             Chunk Names
    app.js   1.54 MB       0  [emitted]  main
styles.css   1.37 kB       0  [emitted]  main
index.html  52 bytes          [emitted]
    + 73 hidden modules

ERROR in Path must be a string. Received undefined
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

/dist/index.html:

TypeError: Path must be a string. Received undefined

[donaldpipowitch]

Sorry, I don't know why you get this error. It works fine for me :(

$ node -v
v4.4.4
$ npm -v
3.9.2
$ cd ~/component-check/examples/composable-components/cyclejs
$ npm i
$ npm run build

> @ build /component-check/examples/composable-components/cyclejs
> webpack

Hash: 6d93be99cbdc34eaceb7
Version: webpack 1.13.1
Time: 3407ms
     Asset       Size  Chunks             Chunk Names
    app.js    1.54 MB       0  [emitted]  main
styles.css    1.37 kB       0  [emitted]  main
index.html  280 bytes          [emitted]
    + 73 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules

I can see that you have Hash: c1ca58a22ffca5f7e81c and I have Hash: 6d93be99cbdc34eaceb7, but I really don't know enough about webpack to know how this can help us with debugging your problem. I'm sorry :(

[chasm]

I don't know enough about webpack either. But that's not the problem. Now that I know what version of node you're using, I backed up to it and everything worked fine. So it's some change in node between v 4.4.4 and v 6.2.1.

I upgraded the modules to this:

{
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --inline",
    "build": "webpack"
  },
  "dependencies": {
    "@cycle/core": "^6.0.3",
    "@cycle/dom": "^9.4.0",
    "@cycle/isolate": "^1.3.2",
    "rx": "^4.1.0",
    "rx-combine-latest-obj": "^1.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-jsx": "^6.8.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.9.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.19.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

And it runs, but now it outputs some of the template code:

Maybe missing a peer dependency?

[chasm]

OK, I installed html-webpack-template, deleted the index.html file, and updated webpack.config.js to this:

var HtmlWebpackPlugin = require("html-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./src/app.js",
  output: {
    path: "./dist",
    filename: "app.js"
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel"
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]")
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: require('html-webpack-template'),
      appMountId: 'example-app'
    }),
    new ExtractTextPlugin("styles.css")
  ],
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist"
  }
};

The new package.json looks like this:

{
  "private": true,
  "scripts": {
    "start": "webpack-dev-server --inline",
    "build": "webpack"
  },
  "dependencies": {
    "@cycle/core": "^6.0.3",
    "@cycle/dom": "^9.4.0",
    "@cycle/isolate": "^1.3.2",
    "rx": "^4.1.0",
    "rx-combine-latest-obj": "^1.0.2"
  },
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-jsx": "^6.8.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.9.0",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "html-webpack-plugin": "^2.19.0",
    "html-webpack-template": "^5.0.0",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

This works with node v6.2.1. Maybe it gives up some kind of file chunking, but is that relevant to the example really? This seems simpler.

Too lazy to fork and make a PR, but if you want to update it you have everything you need here, I think.

[donaldpipowitch]

Thanks. I probably will just point out in the article which versions I use. I heard Node 7 is just around the corner. Who knows what breaks there. It's just too hard to keep everything up to date in tutorials like these. They are more snapshots of certain points in time to introduce the basic concepts.