Typo in functions.php? - "No such file or directory"

[leoauri]

Upon activating the theme and visiting the site I get the following:

<b>Fatal error</b>:  Uncaught UnexpectedValueException: DirectoryIterator::__construct(/var/www/html/wp-content/themes/vuewp/dist/js/): failed to open dir: No such file or directory in /var/www/html/wp-content/themes/vuewp/functions.php:140
Stack trace:
#0 /var/www/html/wp-content/themes/vuewp/functions.php(140): DirectoryIterator-&gt;__construct('/var/www/html/w...')
#1 /var/www/html/wp-includes/class-wp-hook.php(286): vuewp_scripts('')
#2 /var/www/html/wp-includes/class-wp-hook.php(310): WP_Hook-&gt;apply_filters('', Array)
#3 /var/www/html/wp-includes/plugin.php(453): WP_Hook-&gt;do_action(Array)
#4 /var/www/html/wp-includes/script-loader.php(1447): do_action('wp_enqueue_scri...')
#5 /var/www/html/wp-includes/class-wp-hook.php(286): wp_enqueue_scripts('')
#6 /var/www/html/wp-includes/class-wp-hook.php(310): WP_Hook-&gt;apply_filters(NULL, Array)
#7 /var/www/html/wp-includes/plugin.php(453): WP_Hook-&gt;do_action(Array)
#8 /var/www/html/wp-includes/general-template.php(2614): do_action('wp_head')
#9 /var/www/html/wp-content/themes/vuewp/heade in <b>/var/www/html/wp-content/themes/vuewp/functions.php</b> on line <b>140</b><br />

Line 9: wp-content/themes/vuewp/heade looks suspicious...

[leoauri]

Is it because npm was expected to install into dist/js?
Mine installed into {repo root}/node_modules (I had to downgrade to Node v8 as detailed in #9 )
If I manually move everything from node_modules into wp-content/themes/vuewp/dist/js, I get blank page with Wordpress header instead

( It's got <div id="app"></div> in it...)

[leoauri]

I didn't have gulp installed (instructions here)

Once I ran npm run dev once, no error and Vue loads. No idea if this is the correct way though. Would be nice if this were also covered in the setup guide!

[lyzs90]

@leoauri quite right, when you first clone the project, there wouldnt be any dist folder

the development server npm run dev should be used while working. the dist folder would only be populated when you want to build for production using npm run prod

agree that the instructions could be clearer 😅

[leoauri]

npm run dev does seem to populate dist though, at least in my environment.

So the instruction that's missing would be something like
"If you plan to use as WordPress theme, run gulp once."
Is that right?

[lyzs90]

npm run dev does seem to populate dist though

ah yes right again. apologies its been a while since ive looked at this codebase. they both populate dist, the former with unminified/uglified assets and the latter with minified/uglified assets

"If you plan to use as WordPress theme, run gulp once."

would suggest to run npm run dev / npm run prod. they both use gulp under the hood if you take a look at the package.json file

[leoauri]

Okay, and I guess a note to the effect of "have node and gulp installed" and a link to instructions?

[lyzs90]

gulp will be installed when you do npm install. but yes, we should definitely pin the Node version