Roots Discourse

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.

Hey,

I have the same problem. simple console.log not working.
The only Error in console is:

Uncaught TypeError: __webpack_require__.nmd is not a function
at eval (punycode.js:1)

is there a easy solution, should I just clone a new install? Or is there even a update workflow to the codebase/theme?

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?

switched them with the ones from the official repo, now it’s __webpack_require__.O is not a function
I guess I have to start over

Also ensure a recent enough node LTS release is used.

not sure what did it :confused:
but “start” is working now. deleted lockfiles and tried npm install several times after replacing composer.json and package.json.

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).