dont working building js in resourses folder to js

[tashenoff]

hi there, I can’t understand why from the resources folder, js is not compiled into the js folder

[maxleistner]

@tashenoff can't confirm this error. Just clean installed everything. Which version of tailpress & node are you using? Does your watch task go trough or does it show any errors?

[tashenoff]

@tashenoff can't confirm this error. Just clean installed everything. Which version of tailpress & node are you using? Does your watch task go trough or does it show any errors?

my version 3.0 bellow this messages, me added my package.js im use command "npm run dev", "npm run production", but nothing addes in js, but i added in resources folder, app.js my scripts....

{ "name": "tailpress", "version": "3.0.0", "description": "Boilerplate WordPress theme with Tailwind CSS.", "author": "Jeffrey van Rossum", "repository": { "type": "git", "url": "https://github.com/jeffreyvr/tailpress" }, "theme_uri": "https://github.com/jeffreyvr/tailpress", "author_uri": "https://vanrossum.dev", "text_domain": "tailpress", "license": "MIT", "scripts": { "production:css-app": "tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --minify", "production:css-editor": "tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --minify", "production:js": "./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --minify", "dev:css-app": "tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss", "dev:css-editor": "tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss", "dev:js": "./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js", "watch:css-app": "tailwindcss -i ./resources/css/app.css -o ./css/app.css --postcss --watch", "watch:css-editor": "tailwindcss -i ./resources/css/editor-style.css -o ./css/editor-style.css --postcss --watch", "watch:js": "./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --watch", "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:js\"", "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-editor\" \"npm run dev:js\"", "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:js\"", "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"", "watch-sync": "concurrently \"npm run browser-sync\" \"npm run watch\"" }, "devDependencies": { "@jeffreyvr/tailwindcss-tailpress": "^0.1.0", "autoprefixer": "^10.4.0", "browser-sync": "^2.26.14", "concurrently": "^6.2.1", "cross-env": "^6.0.3", "esbuild": "^0.12.24", "postcss": "^8.4.4", "postcss-import": "^14.0.0", "postcss-nested": "^5.0.3", "postcss-nested-ancestors": "^2.0.0", "resolve-url-loader": "^3.1.2", "tailwindcss": "^3.0.0" }, "dependencies": { "swiper": "^8.0.7" } }

[maxleistner]

What happens if you run npm run watch and make changes to the resources/js/app.js file. Does it compile to /js/app.js ?

And what NODE version are you using?

[tashenoff]

What happens if you run npm run watch and make changes to the resources/js/app.js file. Does it compile to /js/app.js ?

And what NODE version are you using? my node js version 16.14.0 if im using npm run watch, then nothing happens, everything works as usual, but js is not built. maybe I'll upload it to my repo and drop the link?

[maxleistner]

@tashenoff sure, if it's public. Otherwise send it to mail@maxleistner.de

[tashenoff]

@tashenoff sure, if it's public. Otherwise send it to mail@maxleistner.de

a sent you a email, thx

[maxleistner]

@tashenoff got the mail. It is working fine. Try the following (no custom data will be deleted) within the theme directory:

rm -rf node_modules (deletes all node_modules) npm install --force (skip the cache)

change the resources/js/app.js file

npm run dev

See if it works now. Otherwise i'm really clueless and it must be a problem within your local setup. Please also check if during install of node_modules any error occure.

[tashenoff]

npm run dev

no problems were found when installing the node module, but the js file does not change( maybe because i have windows?

[maxleistner]

There's where my expertise ends :( I'm on a Mac. I would say there should be no difference but surely there is. Is there no error message? Does CSS compiling work?

[jeffreyvr]

@maxleistner Thanks for taking a look and helping out!

@tashenoff Unfortunately, at the moment I don't have access to a Windows machine so I can't test it out. You could, not ideal maybe - not sure how far you are on your project, instead use Laravel Mix for compiling and see if that works for you. If you use the TailPress installer (video), you can add the --compiler="mix" flag.

[maxleistner]

Or you can use Laravel HOMESTEAD to run a local Linux Machine and run the command within the machine. https://medium.com/@eaimanshoshi/i-am-going-to-write-down-step-by-step-procedure-to-setup-homestead-for-laravel-5-2-17491a423aa

[wbq3510]

Are are sure you do not have any error like " '.' is not recognized as an internal or external command," ? Try npm run watch:js for sure

[ekleinert]

I've got same problem. Win 10, Node 16.14.0. Fresh install of TailPress using Composer (regular git clone method gives same error).

But I do have error @wbq3510 mentions: [2] > tailpress@3.0.0 dev:js [2] > ./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js [2] [2] '.' is not recognized as an internal or external command, [2] operable program or batch file. [2] npm run dev:js exited with code 1

Edit: Changed compiler to 'mix' and it's working great!

[wbq3510]

@iTuiTam Great. npm config set script-shell powershell in my case fix this problem (for windows powershell)

[Adr1ann]

In my case, I changed it package.json:

old: "watch:js": "./node_modules/.bin/esbuild ./resources/js/app.js --bundle --outfile=./js/app.js --watch" new: "watch:js": ".\\node_modules\\.bin\\esbuild .\\resources\\js\\app.js --bundle --outfile=.\\js\\app.js --watch"

[jeffreyvr]

@Adr1ann Seems to be an escaping issue looking out your fix. If it works for me too, I will implement the fix so that it's that way out of the box. Thanks for sharing!

[dayo116]

@Adr1ann thank you sooooo much for this!!

[jeffreyvr]

I added escaping the escaping now to the package.json scripts. Can someone with Windows test if it works?

[jeffreyvr]

Closing this for now.

[WilliamPatin]

I added escaping the escaping now to the package.json scripts. Can someone with Windows test if it works?

No, it doesn't. It only works with escaped backslashes.

[ineptian]

I am getting this same error when I try and npm run production. watch seems to work fine though.

[2] '.' is not recognized as an internal or external command,
[2] operable program or batch file.
[2] npm run production:js exited with code 1

Any ideas?

[arixwap]

I am getting this same error when I try and npm run production. watch seems to work fine though.

[2] '.' is not recognized as an internal or external command,
[2] operable program or batch file.
[2] npm run production:js exited with code 1

Any ideas?

Are you using windows? I also get this error while using default windows terminal. You should using WSL I am using WSL version 1 and using Ubuntu, and all seems fine.

Here the guide : https://docs.microsoft.com/en-us/windows/wsl/install

[ineptian]

Are you using windows? I also get this error while using default windows terminal. You should using WSL I am using WSL version 1 and using Ubuntu, and all seems fine.

Here the guide : https://docs.microsoft.com/en-us/windows/wsl/install

I am using windows. Thanks for the tip. Wonder if there is any way to fix this without WSL?

[arixwap]

Are you using windows? I also get this error while using default windows terminal. You should using WSL I am using WSL version 1 and using Ubuntu, and all seems fine. Here the guide : https://docs.microsoft.com/en-us/windows/wsl/install

I am using windows. Thanks for the tip. Wonder if there is any way to fix this without WSL?

Well, I'm still research about it. But still there no other way, except you change using linux / macos 👯

[jeffreyvr]

Can someone with Windows test if it works when the scripts in package.json are set like this?:

"scripts": {
    "production:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --minify",
    "production:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --minify",
    "production:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --minify",
    "dev:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss",
    "dev:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss",
    "dev:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\"",
    "watch:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --watch",
    "watch:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --watch",
    "watch:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --watch",
    "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:js\"",
    "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-editor\" \"npm run dev:js\"",
    "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:js\"",
    "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"",
    "watch-sync": "concurrently \"npm run browser-sync\" \"npm run watch\""
}

[arixwap]

Can someone with Windows test if it works when the scripts in package.json are set like this?:

"scripts": {
  "production:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --minify",
  "production:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --minify",
  "production:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --minify",
  "dev:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss",
  "dev:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss",
  "dev:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\"",
  "watch:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --watch",
  "watch:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --watch",
  "watch:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --watch",
  "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:js\"",
  "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-editor\" \"npm run dev:js\"",
  "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:js\"",
  "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"",
  "watch-sync": "concurrently \"npm run browser-sync\" \"npm run watch\""
}

It's doesn't work Jeff

[ineptian]

Can someone with Windows test if it works when the scripts in package.json are set like this?:

"scripts": {
  "production:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --minify",
  "production:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --minify",
  "production:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --minify",
  "dev:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss",
  "dev:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss",
  "dev:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\"",
  "watch:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --watch",
  "watch:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --watch",
  "watch:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --watch",
  "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:js\"",
  "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-editor\" \"npm run dev:js\"",
  "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:js\"",
  "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"",
  "watch-sync": "concurrently \"npm run browser-sync\" \"npm run watch\""
}

When i update my scripts, I get the same error as before. But not the error the user above me has.

My error:

'.' is not recognized as an internal or external command,

[jarednthomas]

Can someone with Windows test if it works when the scripts in package.json are set like this?:

"scripts": {
  "production:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --minify",
  "production:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --minify",
  "production:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --minify",
  "dev:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss",
  "dev:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss",
  "dev:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\"",
  "watch:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --watch",
  "watch:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --watch",
  "watch:js": "\"./node_modules/.bin/esbuild\" \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --watch",
  "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:js\"",
  "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-editor\" \"npm run dev:js\"",
  "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:js\"",
  "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"",
  "watch-sync": "concurrently \"npm run browser-sync\" \"npm run watch\""
}

Can confirm; replacing the three esbuild js script paths with escaped backslashes fixes the paths:

"scripts": {
        "production:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --minify",
        "production:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --minify",
        "production:js": ".\\node_modules\\.bin\\esbuild \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --minify",
        "dev:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss",
        "dev:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss",
        "dev:js": ".\\node_modules\\.bin\\esbuild \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\"",
        "watch:css-app": "tailwindcss -i \"./resources/css/app.css\" -o \"./css/app.css\" --postcss --watch",
        "watch:css-editor": "tailwindcss -i \"./resources/css/editor-style.css\" -o \"./css/editor-style.css\" --postcss --watch",
        "watch:js": ".\\node_modules\\.bin\\esbuild \"./resources/js/app.js\" --bundle --outfile=\"./js/app.js\" --watch",
        "production": "cross-env NODE_ENV=production concurrently \"npm run production:css-app\" \"npm run production:css-editor\" \"npm run production:js\"",
        "dev": "cross-env NODE_ENV=development concurrently \"npm run dev:css-app\" \"npm run dev:css-editor\" \"npm run dev:js\"",
        "watch": "cross-env NODE_ENV=development concurrently \"npm run watch:css-app\" \"npm run watch:css-editor\" \"npm run watch:js\"",
        "browser-sync": "cross-env NODE_ENV=development browser-sync start --proxy \"tailpress.test\" --host=\"tailpress.test\" --no-inject-changes --files=\"./\"",
        "watch-sync": "concurrently \"npm run browser-sync\" \"npm run watch\""
    },

[jeffreyvr]

Thanks for sharing @jarednthomas! Unfortunately, that would make them not working on macOS.

However, I did manage to get it working on both macOS and Windows (tested with Parallels) by adding cross-env to the remaining scripts where I thought it wasn't necessary (😅). Just committed the change.