Sage 9 + webpack

I keep the comment at the top of my scripts. Since that’s what wordpress pass to the javascript, a global, it makes sense to inform the linter.

publicPath thingie should definitely go in the docs for Sage on Github (just pulled latest Sage and since it was webpack now rather than Gulp I just went with it).

Documentation was ok up until the publicPath thingie that made me scratch my head for a while

Hi Guys,
How can insert a dropdown menu on these version? I try navwalker but no luck

@a2013 Sage should spit out an unordered list of menu items to help you build your own menu system how ever you want it. There’s a ton of dropdown menu scripts out there, here’s one example: http://slicknav.com/

If you have to use the bootstrap navwalker take a look at https://github.com/twittem/wp-bootstrap-navwalker but it’s for BS 3.0 and its more work to rip out the existing stuff.

You guys that have used Sage 9 for a while, would you consider running it in production or is it better to hold off?

I’m currently trialling it on a dev server to launch a prod site in a couple of week’s time. Haven’t had any showstopper issues so far, the webpack build process works great. Reading the docs carefully goes a long way. But it comes down to what your tolerance levels are for dealing with bugs and unforseen problems that come with the territory of using bleeding edge code.

As far as BS4 goes, that’s still in alpha. But it’s had the “alpha” label for a solid year now. Anecdotally people are saying it’s working just fine on prod sites. Just stay on top of the Bootstrap Blog so you know what changes / modifications occur between releases.

1 Like

What is the proper way of installing external resources?

Trying to install https://github.com/Selz/plyr

I ran npm install plyr and then proceeded to run npm i -S plyr.

In my Home.js route I then added import plyr from 'plyr/src/js/plyr'; and also added plyr.setup(); to the finalize part. But that doesn’t seem to have done the trick as the player is not initialized. What am I missing?

Also, adding console.log(plyr) throws warning Unexpected console statement no-console is this normal?

Oh, simply const plyr = require('plyr'); in Home.js works fine!
It does not include the css though, so something is still off. Halp plz?

Is this the intended method of adding stuff or am I just lucky I got it seamingly working?

Also, it’s still complaining about console.log in Home.js which I find a bit weird. Do I need to disable no-console everytime I use it?

Hey again guys, I get that you’re all busy coding away on your great little apps, but I’d be eternally grateful if someone could just point me in the right direction here. Where can I read up on including external dependencies in my project – the right way!

That should normally work? Did you exit and re-run npm run watch after that?[quote=“intelligence, post:92, topic:6066”]
Also, adding console.log(plyr) throws warning Unexpected console statement no-console is this normal?
[/quote]

It’s normal, it’s just a warning. I think you can disable the warnings if you want: no-console - ESLint - Pluggable JavaScript Linter

I think this is default behaviour too, you should import the styles in your main.scss:
@import "~plyr/src/scss/plyr.scss";

1 Like

I didn’t get it to work at all at first, but when I exited, and ran npm run build followed by npm start it started working. So probably was something I messed up with there.

Thank you for clarifying about the scss part. Both good and bad that Sage 8 has been fairly automated regarding how external dependencies are added, you forget how you do it manually, hehe.

Btw like I said I get a warning from using console.log in Home.js, and I don’t get any output in the console. I.e. console.log('hey'); produces

[HMR] bundle rebuilt in 6678ms
(index):1176 [HMR] bundle has warnings:
(index):1176 [HMR] ./assets/scripts/routes/Home.js

/Users/xxx.xxx/site/web/app/themes/theme/assets/scripts/routes/Home.js
  8:5  warning  Unexpected console statement  no-console

✖ 1 problem (0 errors, 1 warning)

 @ ./assets/scripts/main.js 8:0-33
 @ multi main
(index):1893 [HMR] Checking for updates on the server...
(index):1893 [HMR] Updated modules:
(index):1893 [HMR]  - ./assets/scripts/routes/Home.js
(index):1893 [HMR] App is up to date.

Doesn’t matter if I put it in init or finalize, same result. If I put it outside export default { }; I do however get output in the console. What’s up with that?

Had renamed theme from sage into something else, when I named it sage again, console.log started working just fine.

How can I rename and have it working? I realized that something could be fishy as publicPath was pointing towards /sage/, but when I changed publicPath into /mytheme/ it failed on finding my custom font instead.

I have errors and fails tom complete build when i use npm run build:production. It seems to be having issues with the fonts path?

ERROR in ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss
    Module not found: Error: Can't resolve './fonts/323800_0_0.eot' in '/Users/jynk/Projects/612 AMPC/website/ampc-wordpress-master/wp-content/themes/ampc-sage-9-theme/assets/styles'
     @ ../~/css-loader?-sourceMap!../~/postcss-loader!../~/resolve-url-loader?-sourceMap!../~/sass-loader?-sourceMap!./styles/main.scss 6:161673-161706 6:161724-161757

npm run build runs fine and the fonts are in dist/fonts/ as expected.

Your error references a file path which can’t be resolved, how have you added the font? Is that the correct path to the font in question?

1 Like

ha - thanks i needed …/fonts/ but i had ./fonts/.

Couldn’t see the details for the sheer amount of errors!

@intelligence Have you been able to resolve this? I also get this error when trying to console.log() anything

I figured it out. I needed to add the following setting to .eslintrc: "no-console": 0,

Any idea why console logging is disabled by default?

Full rule code:

"rules": {
    "no-console": 0,
    "comma-dangle": [
      "error",
      {
        "arrays": "always-multiline",
        "objects": "always-multiline",
        "imports": "always-multiline",
        "exports": "always-multiline",
        "functions": "ignore"
      }
    ]
  }

@patrickv Can I use watch mode on my site url “devUrl” ?

Related: