[Bug?]: Tailwind Setup Breaking Generators on Windows

[BBurnworth]

What's not working?

Adding tailwind with yarn rw setup ui tailwind breaks any yarn rw g command with this error:

Cannot create property 'context' on string 'Error: Cannot find module '~\Code\testTail\webconfig ailwind.config.js'

Other cli commands still work.

Looking at the error, the forward slashes are gone from web\config\ and the 't' is gone and replaced by a space (or tab). Perhaps it is a escape character issue - '\t' is escaped as a tab.

Error output at terminal:

$ yarn rw g component Test
Cannot create property 'context' on string 'Error: Cannot find module '~\Code\testTail\webconfig    ailwind.config.js'
Require stack:
- ~\Code\testTail\node_modules\prettier\noop.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at i (~\Code\testTail\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:1582)
    at Yb (~\Code\testTail\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:1694)
    at Td.exports (~\Code\testTail\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:1717)
    at nx.exports (~\Code\testTail\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:2426)
    at Object.parse (~\Code\testTail\node_modules\prettier-plugin-tailwindcss\dist\index.js:146:4138)
    at Object.parse (~\Code\testTail\node_modules\prettier\index.js:7334:23)
    at coreFormat (~\Code\testTail\node_modules\prettier\index.js:8645:18)
    at formatWithCursor2 (~\Code\testTail\node_modules\prettier\index.js:8837:18)
    at ~\Code\testTail\node_modules\prettier\index.js:37229:12'

How do we reproduce the bug?

1. Create new redwood app
2. run yarn rw setup ui tailwind
3. run yarn rw g component test

What's your environment? (If it applies)

System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.15.1 - C:\Users\BBURNW~1\AppData\Local\Temp\xfs-6fc7c87e\node.CMD
    Yarn: 3.2.1 - C:\Users\BBURNW~1\AppData\Local\Temp\xfs-6fc7c87e\yarn.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.47)
  npmPackages:
    @redwoodjs/core: 2.2.0 => 2.2.0

Are you interested in working on this?

• [ ] I'm interested in working on this

[BBurnworth]

Update: I tested the other ui setup commands and this problem does not occur with them.

[BBurnworth]

Modifying prettier.config.js line 18:

from: tailwindConfig: './web\config\tailwind.config.js',

to: tailwindConfig: './web/config/tailwind.config.js',

corrected the issue.

[BBurnworth]

https://github.com/redwoodjs/redwood/blob/06df62391959cdc67db6ce1907998c13080a8d9d/packages/cli/src/commands/setup/ui/libraries/tailwindcss.js#L228

I wonder if path.join(rwPaths.web.config, 'tailwind.config.js') is running into the same issue that @cannikin hit with baremetal path deploy: https://github.com/redwoodjs/redwood/issues/6124

Baremetal uses path.join() when building up the deploy path, but path.join() is running on the deploy machine, not the host machine: https://github.com/redwoodjs/redwood/blob/main/packages/cli/src/commands/deploy/baremetal.js#L212

So if you're trying to deploy from Windows then it will create the path with backslashes, even though you may be deploying to a *nix machine which uses forward slashes.

[noire-munich]

Thanks @BBurnworth for taking the time to report & investigate this.

Would you be up for a PR?

[pantheredeye]

I will test it out with the replace fix that Rob uses.

FWIW, I looked for a more elegant fix using node modules to correct the issue and found this topic which touches on the issue of using '.\' with require in Windows.

The answer was given that when using commonjs modules with require, the module paths are required to be / format. However, using node's built in path.join() method on windows normalizes paths to use \. Even though node's path methods help to normalize cross-platform development, the module loading path requirement seems to be slightly at odds with this idea.

Note: the last comment is:

@wmcmurray Requiring using .\some\relative\path\file seems to be working now. I tested it with Node.js 14.15.4 on Windows 10. Does it work for you as well?

I tested this in the prettier.config.js and it does work:

  ],
  // eslint-disable-next-line prettier/prettier
  tailwindConfig: '.\\web\\config\\tailwind.config.js',

Back to the top: yes, I will submit a PR using the replace method that Rob used, and it should fix everything. This sort of issue is probably going to crop up in the future though. What sort of check could be put in place to identify this issue as code comes in?

[pantheredeye]

#6203

appended the .Replace to the end of the tailwind string. Also, the node path module can be forced to render linux or window using the convention:

path.win32.join()
path.posix.join()

I attempted it here, but the .join function is wrapped in a .relative function and using .posix on the relative function returned the full path. So, I went with .replace.

[Gresliebear]

I am getting the same issue on windows

PS E:\SweepaLandingPage\sweepa-app> yarn rw g page home /
Cannot create property 'context' on string 'Error: Cannot find module 'E:\SweepaLandingPage\sweepa-app\webconfig       ailwind.config.js'
Require stack:
- E:\SweepaLandingPage\sweepa-app\node_modules\prettier\noop.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at i (E:\SweepaLandingPage\sweepa-app\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:1582)
    at Yb (E:\SweepaLandingPage\sweepa-app\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:1694)
    at Td.exports (E:\SweepaLandingPage\sweepa-app\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:1717)
    at nx.exports (E:\SweepaLandingPage\sweepa-app\node_modules\prettier-plugin-tailwindcss\dist\index.js:134:2426)
    at Object.parse (E:\SweepaLandingPage\sweepa-app\node_modules\prettier-plugin-tailwindcss\dist\index.js:146:4138)
    at Object.parse (E:\SweepaLandingPage\sweepa-app\node_modules\prettier\index.js:7334:23)
    at coreFormat (E:\SweepaLandingPage\sweepa-app\node_modules\prettier\index.js:8645:18)
    at formatWithCursor2 (E:\SweepaLandingPage\sweepa-app\node_modules\prettier\index.js:8837:18)      
    at E:\SweepaLandingPage\sweepa-app\node_modules\prettier\index.js:37229:12'

the solution fix it will this be in the next release?

from: tailwindConfig: './web\config\tailwind.config.js',

to: tailwindConfig: './web/config/tailwind.config.js',

[jtoar]

@Gresliebear yes we'll try to get a patch out soon, before v3. The fix is here https://github.com/redwoodjs/redwood/pull/6203

[Gresliebear]

@jtoar thanks you!

[jtoar]

@Gresliebear the patch with the fix just went out: https://github.com/redwoodjs/redwood/releases/tag/v2.2.4

[Gresliebear]

@Gresliebear the patch with the fix just went out: https://github.com/redwoodjs/redwood/releases/tag/v2.2.4

Thanks!