Run Build Not Working in Flynt 2.0.1

[purchasingtoolpak]

When I run NPM run build - no files are added the dist folder - it remains empty.

When I run NPM run start - dist folder shows a subfolder named "hot" - in the folder is the domain as https://localhost:5173. I am using Local for WordPress on my desktop.

The stylesheet files in the WordPress header show up like this:

<link rel='stylesheet' id='Flynt/assets/main-css' href='http://localhost:5173/assets/main.scss' media='all' />
--
<link rel='stylesheet' id='Flynt/assets/print-css' href='http://localhost:5173/assets/print.scss' media='print' />

When you click on the main.scss file it shows the files that should be compiled:

@import
  'styles/reset',
  'styles/variables',
  'styles/fonts',
  'styles/base',
  'styles/columns';

// stylelint-disable-next-line scss/at-import-no-partial-leading-underscore, scss/at-import-partial-extension-blacklist
@import '../Components/**/_style.scss';

The vite.config file seems to have the proper entries to build the "dist" folder and files.

The issue is that I am not able to deploy the website using wp-vivid. I never had this issue in Flynt 1.0.

Any debugging help would be appreciated.

Regards,

Dave

[purchasingtoolpak]

I created a second website using Flynt 2.01. It has the same issues:

1. Run Build does not compile sass files to main.css in dist folder.
2. Stylesheet does not have correct domain name in the WordPress header. Domain shown as localhost:1234 versus http://domain-name.local.

Thanks in advance for any assistance.

Regards,

Dave

[timohubois]

@purchasingtoolpak

1. Run Build does not compile sass files to main.css in dist folder.

Please take a look on the 1st section of #527 (comment).

2. Stylesheet does not have correct domain name in the WordPress header. Domain shown as localhost:1234 versus http://domain-name.local/.

If the dist folder contains a file with the name hot the domain should be localhost and if not it should be the domain of the WordPress instance. Please also take a look at the 2nd section of #527 (comment).

[timohubois]

Hey @purchasingtoolpak,

do you use Windows, macOS or Linux?

We have some other open issues in relation to Windows and I planned in to dive deeper into them today.

[purchasingtoolpak]

Windows 11.

[timohubois]

@purchasingtoolpak

When I run NPM run build - no files are added the dist folder - it remains empty.

I found some time and installed Local and Node.js on a fresh machine running Windows 11. After that I opened the command prompt (CMD), navigated to the theme folder and did the install.

Then I ran npm start (inside the theme folder). At first it didn't work because Node.js was running in production and devDependencies were not installed during the initial installation.

After setting Node.js to development by running set NODE_ENV=development inside the command prompt (CMD), I had to do an npm i again to complete the installation including the required devDependencies.

npm start worked now 💪 and then I tested HMR – it didn't work out-of-the-box. But I was able to fix this by running npm start in a new command prompt (CMD) started as administrator.

The next step was to test npm run build, which worked fine and the dist folder contains the required files.

---

When I run NPM run start - dist folder shows a subfolder named "hot" - in the folder is the domain as https://localhost:5173. I am using Local for WordPress on my desktop.

The hot file is a placeholder and needed for HMR. When it exists styles and scripts are loaded in a different way and they don’t get the domain from the const wordpressHost inside the vite.config.js file.

---

The issue is that I am not able to deploy the website using wp-vivid. I never had this issue in Flynt 1.0.

Unfortunately I have no experience with wp-vivid and I don’t understand what exactly does not work with wp-vivid here and if this is related to flynt itself?

[purchasingtoolpak]

wp-vivid is not important - I was trying to say without the build css files I can't deploy the website. Which you already understood.

[purchasingtoolpak]

Thanks for the quick response.
I ran CMD as administrator and changed to NODE_ENV to development, then ran npm i - unfortunately on 2 different sites they did not build the required CSS files. I'm just get the "hot" folder.

Maybe I missed something, but nor working here.

[timohubois]

@purchasingtoolpak do you use the same setup as I did? And have you tested it exactly the way as described before?

[purchasingtoolpak]

Setup: Windows 11, Local, Node.js, Flynt 2.0.1, CMD terminal as Admin, template directory
Testing: set NODE_ENV=development, npm i, npm start, npm run build

Npm start works but runs off of the hot folder. The flynt page stylesheet header looks like this:

<link rel='stylesheet' id='Flynt/assets/main-css' href='http://atliberty.local/wp-content/themes/flynt2/assets/main.scss' media='all' />
<link rel='stylesheet' id='Flynt/assets/print-css' href='http://atliberty.local/wp-content/themes/flynt2/assets/print.scss' media='print' />

Not sure what I am missing.

[timohubois]

@purchasingtoolpak thanks for your update.

Npm start works but runs off of the hot folder.

Does this mean that while you do a npm start the dist folder keeps empty and does not get a hot file inside it?

---

The flynt page stylesheet header looks like this:

<link rel='stylesheet' id='Flynt/assets/main-css' href='http://atliberty.local/wp-content/themes/flynt2/assets/main.scss' media='all' />
<link rel='stylesheet' id='Flynt/assets/print-css' href='http://atliberty.local/wp-content/themes/flynt2/assets/print.scss' media='print' />

This output is the case when no hot file nor a mainfest file can be found inside the dist folder (Assets.php).

---

In total it sounds like a really strange behavior and I can’t reproduce it at the moment. Have you tried to do a build:production by running npm run build:production only? Will this create files inside the dist folder? If not, can you post what the output of the cmd is showing after executing this command?

[purchasingtoolpak]

Thanks for that tip - run build:production - all the files are generated in the dist. folder. However, as soon as I run "npm run start" - the folder is emptied and only shows the "hot" folder.

I tried to deploy the site and had issues with the stylesheet header. I am going to try again on Monday.

[purchasingtoolpak]

I read your above note in more detail. Here is the terminal output after "run build" command.

flynt@2.0.1 build
run-s --silent checkVersion lint build:production

node: 20.10.0
standard: Use JavaScript Standard Style (https://standardjs.com)
standard: Run standard --fix to automatically fix some problems.
C:\Users\djmak\Projects\Starter Site\WordPress\app\public\wp-content\themes\flynt2\Components\HeroSlider\script.js:11:1: Expected indentation of 4 spaces but found 2. (indent)
C:\Users\djmak\Projects\Starter Site\WordPress\app\public\wp-content\themes\flynt2\Components\HeroSlider\script.js:11:31: Arrow function should not return assignment. (no-return-assign)
PS C:\Users\djmak\Projects\Starter Site\WordPress\app\public\wp-content\themes\flynt2>

I will also run the build manually as you suggest.

[timohubois]

Hi @purchasingtoolpak the issue is related to the linting in combination with the Premium Component “HeroSlider” and its current release – an update of the PremiumComponents will be published soon (it includes also some other minor changes of other components).

Technically the component should work as aspected and in this case it's just the syntax of the script.js file of the component “HeroSlider”.

C:\Users\djmak\Projects\Starter Site\WordPress\app\public\wp-content\themes\flynt2\Components\HeroSlider\script.js:11:1: Expected indentation of 4 spaces but found 2. (indent)

Please make sure that line 11 has an indentation of 4 spaces instead of 2. Executing npm run lintFix:scripts should do this. If not please fix it manually.

---

C:\Users\djmak\Projects\Starter Site\WordPress\app\public\wp-content\themes\flynt2\Components\HeroSlider\script.js:11:31: Arrow function should not return assignment. (no-return-assign)

Replace in line 11: initSlider(refs, data).then(x => swiper = x) with initSlider(refs, data).then((x) => { swiper = x }).

---

If you do not want use linting you can also remove lint from the build script run-s --silent checkVersion lint build:production > run-s --silent checkVersion build:production.

Let me know if this works for you?

[timohubois]

@purchasingtoolpak did you got it working?

[purchasingtoolpak]

I upgraded to 2.1 and am having no issues with run build using Windows 11.