Sage 10 - Javascript not in build/production

I have installed Sage10 from github and everything is running, except that I’m not able to use javascript.

The webpack.mix.js has not been altered.

When I execute yarn build:production the app.js/customizer.js/editor.js are processed and copied to the specified folder public/scripts/.
But they are not ‘automatcically’ included in the index.php.
Also, when in development with yarn start Javascript is also not executed.
A simple console.log(’…’) is not putting out anything.

I assumed that everything is setup, so that JS is working out of the box. Searching for this issue wasn’t successfull, either.

I don’t know laravel mix, but I’m using webpack for years.
From what I have read about mix the setup should be Ok. Unfortunately it isn’t working.
I have invested already a lot of time to find a solution but was not successfull.

Has anybody else solved this issue?
Is there an additional step to be done?

How are you deploying the site and theme? Trellis?

I have to do it by FTP, which is working.

But already when developing the theme, I’m not able to add for example scrollspy or a carousel.

Alright, so the theme main style/script is not enqueued/loaded correctly.
Can you see HTTP errors in the console for these files?
Have you configured BrowserSync correctly in the webpack mix configuration?

Hi strarsis,
thanks for taking time to help!

I have just created a new sage10 theme.
With the vanilla version the compiled javascript is loaded and executed. So a console.log() works and I was able to successfully add scrollspy.

I have compared the webpack.mix.js content and they are identically.

I’ll see if I can find the reason why it broke.

So when the webpack mix configuratrion is still the same as a blank Sage 10 theme,
my first guess would be that something with the npm package has changed, e.g. the versions or the lockfile. Have you reset those, too and tried to build?

Also ensure a recent enough node LTS release is used.

Some tips:

  • Lock the node version in, using a node version manager like nvm.
    This also ensures that the same node version is used among teams.
  • When using npm for installing packages, self-update npm after having a node version installed. Often the npm shipped with it is outdated or becomes outdated.
  • When using yarn, update it regularly (depending on how you installed it, e.g. npm global package).