Hidden and non-JS files in /src/components or /src/docs/examples cause "Cannot read property length of undefined" error

[EdmundsEcho]

When I create a new component directory (with or without the accompanying docs directory), I generate an error after restarting the server.
I expect that after restarting the server, to see the new component listed in the docs page.
Instead I receive the following error.

I can restore the page by removing the new directory and restarting the server. I'm using the configuration files "as is" from this repo.

[coryhouse]

Correct, that's as designed. If you create a component folder without placing a component with the same name inside, then it will throw an error. I say it's by design because that's the way the project is intended to be used (though in retrospect, I could certainly have provided this helpful explanation when this issue occurs...)

[EdmundsEcho]

Thank you for the prompt reply. I'm getting an error in the config/componentData.js... "Error: No suitable component definition found."

I included a file with the same name...

and here are samples of the files with the new/matching class names that successfully compile.

index.js
export {default} from './ProgressBarE.js';

ProgressBarE.js

import React from 'react';

class ProgressBarE extends React.Component {

  // a component with a render statement that depends on
  // two functions...

  getColor = (percent) => {
   ...
  }

  getWidthAsPercentOfTotalWidth = () => {
    return parseInt(this.props.width * (this.props.percent / 100), 10);
  }

  render() {
    ...
  }
}

export default ProgressBarE;

[coryhouse]

Can you share a fork of this repo that exhibits the issue? I can't reproduce this.

[EdmundsEcho]

Here you go: https://[email protected]:EdmundsEcho/ps-react.git

Update: I figured it out. I had hidden files in the new directories that caused the generateComponentData.js script to fail. Using the following modified getFiles function with the extra .filter seems to do the job.

function getFiles(filepath) {
  return fs.readdirSync(filepath)
    .filter(function(file) {
    return fs.statSync(path.join(filepath, file)).isFile();
  })
    .filter(function(file) {
    return ( !(/(^|\/)\.[^\/\.]/g).test(file))
  })
  ;
}

[coryhouse]

Interesting, thanks for sharing the solution. Out of curiosity, what were the hidden files? Just wondering if what happened to you could be a common issue...

[EdmundsEcho]

.tern-port - This is part of my auto-completion set-up for vim/neovim. (PS: I'm greatly appreciating the quality and caliber of your thinking in the ps-react course).

[ultrox]

@EdmundsEcho @coryhouse The same thing happened to me yesterday, it took me some time debugging, and even tho I rejected idea of file .tern file causing the problem I was successfully recreated situation. Go in both folders component and examples and create the invisible file, or any file for that matter, and see it fail.

It was very hard to find, as I wasn't sure what caused it because .tern wasn't creating its file when it wasn't triggered, and it needed to be in both directories.

Anyway, after long hours debugging it's working now 👯, and as usual it one line of code.

[coryhouse]

To clarify, this issue is caused by placing any non-js files in /src/components or /src/docs/examples. PR #21 resolves this issue. I'm not going to merge the PR until I patch the course, so leaving this note here to help others in the meantime.