Yarn build, build:production, & and start invisible errors

broskees · March 16, 2018, 3:08am

I’ve been trying to figure this out for a few days. I’m experiencing some very strange behavior. Recently, I posted this thread, but it doesn’t seem to sum up my problems.

Now all three commands are behaving very strangely.

Look closely at discrepancies. the tab changes near the bottom of the render are due to the homepage.css file, which is loaded separately. This one is the closest to correct, except it’s still not loading the homepage.css file.

Output for yarn start:

yarn start         INT(-2) ↵  956  18:49:14
yarn run v1.5.1
$ webpack --hide-modules --watch --config resources/assets/build/webpack.config.js

Webpack is watching the files…



 DONE  Compiled successfully in 1178ms                                                                                                                                              6:49:22 PM

[BS] [HTML Injector] Running...
[Browsersync] Proxying: http://syracusesedationandfamilydentistry.test
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.10:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.10:3001
 -------------------------------------
[Browsersync] Watching files...


 DONE  Compiled successfully in 628ms

Associated visual:

Output for yarn build:

yarn run build             ✔  958  18:35:19
yarn run v1.5.1
$ webpack --progress --config resources/assets/build/webpack.config.js
 95% emitting

 DONE  Compiled successfully in 1448ms                                                                                                                                              6:41:23 PM

                     Asset       Size  Chunks                    Chunk Names
       styles/homepage.css  223 bytes       2  [emitted]         homepage
images/hero-background.png    1.73 MB          [emitted]  [big]
     scripts/customizer.js    3.25 kB       1  [emitted]         customizer
       scripts/homepage.js    2.71 kB       2  [emitted]         homepage
           styles/main.css     233 kB       0  [emitted]         main
           scripts/main.js     270 kB       0  [emitted]  [big]  main
       scripts/main.js.map     413 kB       0  [emitted]         main
       styles/main.css.map     417 kB       0  [emitted]         main
 scripts/customizer.js.map    3.08 kB       1  [emitted]         customizer
   scripts/homepage.js.map    2.72 kB       2  [emitted]         homepage
   styles/homepage.css.map  837 bytes       2  [emitted]         homepage
✨  Done in 4.26s.

Associated visual:

Output for yarn run build:production:

yarn run build:production  ✔  958  18:41:24
yarn run v1.5.1
$ webpack --progress -p --config resources/assets/build/webpack.config.js
 95% emitting

 DONE  Compiled successfully in 347399ms                                                                                                                                            6:47:35 PM

                              Asset       Size  Chunks                    Chunk Names
images/hero-background_fdbc37ec.png    1.01 MB          [emitted]  [big]
           scripts/main_02491255.js     104 kB       0  [emitted]         main
     scripts/customizer_02491255.js  758 bytes       1  [emitted]         customizer
       scripts/homepage_02491255.js  553 bytes       2  [emitted]         homepage
           styles/main_02491255.css     188 kB       0  [emitted]         main
       styles/homepage_02491255.css  149 bytes       2  [emitted]         homepage
                        assets.json  346 bytes          [emitted]
✨  Done in 350.76s.

After running that command, I start getting this:

So… after a vagrant halt and a vagrant up I get this:

strarsis · March 16, 2018, 5:23am

This happens only with production builds?
Have you adjusted the build config? See

broskees · March 16, 2018, 2:32pm

No, this happens for the build, build:production, and start yarn commands.

I did adjust the publicPath because I ported my theme from a VVV set up to Trellis, this error has continued to happen after this.

The publicPath is currently /app/themes/ssafd-theme/dist.

I’m running on Trellis/Bedrock.

ben · March 16, 2018, 2:46pm

I don’t understand why this thread was created when you just posted this topic and said that your problem was solved…

Have you searched the forum and looked at all the threads that are similar to this? There’s a lot.

broskees · March 16, 2018, 4:09pm

Well really they’re two different problems. It’s not just the production command, it’s all of them. And it’s not ignoring the css when building in just build:production it’s actually only in build.

It was solved. The new problem started happening when I added the homepage.css file.

I thought, considering those points, they were two different topics.

If I should’ve posted back in the other thread, sorry! I just didn’t feel they were the same topic.

I did end up figuring out the situation. Before I was only reading threads where the yarn build commands weren’t throwing any errors, but I went ahead and read all the yarn build threads.

First I read about a problem where users had to run yarn run rmdist to switch back to development builds after running a :production build. So I did that.

I then found one thread about yarn run lint:styles & yarn run lint:scripts not throwing errors due to these two lines, so I tried changing those to true. Still no error codes with yarn run lint:styles & yarn run lint:scripts, or any of the build commands.

I believe when I ran stylelint resources/assets/styles/**/*.scss --fix and then yarn run build I did get somewhere though, as its now loading this:

Which means it is loading correctly main.css and homepage.css. The only issue there is, for some reason, it’s referencing the hero’s background image as /app/themes/ssafd-/dist/dist/images/hero-background.png, so, when I try and change the publicPath to just /app/themes/ssafd-theme, and run another yarn run build, everything worked as expected, ran yarn run build:production after to see if that would work, everything worked as expected.