Browsersync and the files don't work/load

[arjendevos]

This is my functions.php:

// Require the composer autoload for getting conflict-free access to enqueue
require_once __DIR__ . '/vendor/autoload.php';

// Instantiate the Enque Class to load the compiled assets
global $enq;
$enq = new \WPackio\Enqueue( 'saron', 'dist', '1.0.0', 'theme', __FILE__ );

//Scrips for the frontend
function engueueScripts(){
    global $enq;
    $res = $enq->enqueue( 'theme', 'main', ['jquery'] );
}
//Scripts for the style
function engueueStyle(){
    global $enq;
    $res = $enq->enqueue( 'theme', 'style',[] );
}
//Scripts and Styles for the Backend 
function engueueAdminScripts(){
    global $enq;
    $res = $enq->enqueue( 'theme', 'admin',[] );
}

add_action( 'wp_enqueue_scripts','engueueScripts' );
add_action( 'wp_enqueue_scripts','engueueStyle' );
add_action( 'admin_enqueue_scripts','engueueAdminScripts' );

This is my wpackio.project.js:

const pkg = require('./package.json');

module.exports = {
	// Project Identity
	appName: 'saron', // Unique name of your project
	type: 'theme', // Plugin or theme
	slug: 'saron', // Plugin or Theme slug, basically the directory name under `wp-content/<themes|plugins>`
	// Used to generate banners on top of compiled stuff
	bannerConfig: {
		name: 'saron',
		author: '',
		license: 'UNLICENSED',
		link: 'UNLICENSED',
		version: pkg.version,
		copyrightText:
			'This software is released under the UNLICENSED License\nhttps://opensource.org/licenses/UNLICENSED',
		credit: true,
	},
	// Files we need to compile, and where to put
	files: [
		// If this has length === 1, then single compiler
		{
			name: 'theme',
			entry: {
				// mention each non-interdependent files as entry points
		     // The keys of the object will be used to generate filenames
		     // The values can be string or Array of strings (string|string[])
		     // But unlike webpack itself, it can not be anything else
		     // <https://webpack.js.org/concepts/#entry>
		     // You do not need to worry about file-size, because we would do
		     // code splitting automatically. When using ES6 modules, forget
		     // global namespace pollutions 😉
				main: './js/main.js', // Could be a string
				style: './sass/style.scss', // Or an array of string (string[])
				admin: './sass/admin/admin.scss'
			},
			// Extra webpack config to be passed directly
			webpackConfig: undefined,
		},
		// If has more length, then multi-compiler
	],
	// Output path relative to the context directory
	// We need relative path here, else, we can not map to publicPath
	outputPath: 'dist',
	// Project specific config
	// Needs react(jsx)?
	hasReact: false,
	// Disable react refresh
	disableReactRefresh: false,
	// Needs sass?
	hasSass: true,
	// Needs less?
	hasLess: false,
	// Needs flowtype?
	hasFlow: false,
	// Externals
	// <https://webpack.js.org/configuration/externals/>
	externals: {
		jquery: 'jQuery',
	},
	// Webpack Aliases
	// <https://webpack.js.org/configuration/resolve/#resolve-alias>
	alias: undefined,
	// Show overlay on development
	errorOverlay: true,
	// Auto optimization by webpack
	// Split all common chunks with default config
	// <https://webpack.js.org/plugins/split-chunks-plugin/#optimization-splitchunks>
	// Won't hurt because we use PHP to automate loading
	optimizeSplitChunks: true,
	// Usually PHP and other files to watch and reload when changed
	watch: './**/*.php',
	// Files that you want to copy to your ultimate theme/plugin package
	// Supports glob matching from minimatch
	// @link <https://github.com/isaacs/minimatch#usage>
	packageFiles: [
		'inc/**',
		'vendor/**',
		'dist/**',
		'*.php',
		'*.md',
		'readme.txt',
		'languages/**',
		'layouts/**',
		'LICENSE',
		'*.css',
	],
	// Path to package directory, relative to the root
	packageDirPath: 'package',
};

When I go to the browser, the js file doesn't load. (I have a console.log in the main file). Also when I make changes, the browser doesn't load.

[iboutsikas]

I am seeing similar results with a similar config. BrowserSync reports as connect at the beginning (I changed that in the config) but then does nothing. It's like nothing related to javascript coming from webpack works.

So some more context, after debugging this a bit. In functions.php I am getAssets (instead of hardcoding) just to ensure I am getting everything. Using xdebug this yields the expected results with all the js and css files that I expected to see plus a runtime.js (I am assuming this is coming from wpack.io itself?)

By inspecting the page source however, I can see that only the .css files have been injected. All js files are missing.