Redwood: tailwind generator fails on Windows 10

Created on 25 Sep 2020 · 20Comments · Source: redwoodjs/redwood

With a new installation of Redwood 0.19.1 yarn rw g util tailwind fails to execute on Windows 10 using PowerShell. Also tested with same result using Git Bash.

Output

PS C:\Users\nerdstep\webdev\shipu> yarn rw g util tailwind
yarn run v1.22.5
$ C:\Users\nerdstep\webdev\shipu\node_modules\.bin\rw g util tailwind
rw g util <util>

Quality of life utilities

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Also see the Redwood CLI Reference
(https://redwoodjs.com/reference/command-line-interface)

Not enough non-option arguments: got 0, need at least 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

System info

System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 12.18.4 - ~\AppData\Local\Temp\yarn--1601065079101-0.9007915850264594\node.CMD
    Yarn: 1.22.5 - ~\AppData\Local\Temp\yarn--1601065079101-0.9007915850264594\yarn.CMD 
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.63)
  npmPackages:
    @redwoodjs/core: ^0.19.1 => 0.19.1

bu2-confirmed hacktoberfest cli

Source

nerdstep

👍1

All 20 comments

My best guess is a path issue. Not sure if this will carry over to the new setup command usage in the next release.

thedavidprice on 25 Sep 2020

We've actually deprecated the yarn redwood generate util tailwind command and use the setup one now instead, maybe we should just remove the command? Or make it so that yarn rw g util tailwind invokes yarn rw setup tailwind instead?

peterp on 30 Sep 2020

Or make it so that yarn rw g util tailwind invokes yarn rw setup tailwind instead?
^^ this is the new behavior. Code is currently in main and will be live in v0.20.0

@Tobbe or @RobertBroersma if either of you have a chance to upgrade to the latest canary release and run yarn rw setup tailwind, it would be great to know if it's now working on Windows. No pressure of course.

thedavidprice on 5 Oct 2020

I have a project that's still on 0.15.4-canary.6 that I was just about to lift. Might as well go all the way to latest canary 🐦

Will report back later

Tobbe on 5 Oct 2020

👍1

@Tobbe You might want to aim for v0.19.2 and confirm all's well, and _then_ go for latest canary. There are a couple issues in main right now. E.g.:

thedavidprice on 5 Oct 2020

I created a new RW project and immediately ran yarn rw upgrade --tag=canary
Everything is executed in my GitBash environment

$ yarn rw info
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw info

  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 14.4.0 - ~\AppData\Local\Temp\yarn--1601881398515-0.2279522644423968\node.CMD
    Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1601881398515-0.2279522644423968\yarn.CMD
  Browsers:
    Chrome: 85.0.4183.121
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.68)
  npmPackages:
    @redwoodjs/core: ^0.19.2-canary.40 => 0.19.2-canary.40+06d65906

Done in 2.77s.

Then I tried to setup tailwind, which failed 😉

$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw setup tailwind
rw <command>

Commands:
  rw build [side..]         Build for production
  rw check                  Get structural diagnostics for a Redwood project
                            (experimental)                [aliases: diagnostics]
  rw dataMigrate <command>  Migrate the data in your database      [aliases: dm]
  rw db <command>           Database tools                   [aliases: database]
  rw deploy <command>       Deploy your Redwood project.
  rw destroy <type>         Rollback changes made by the generate command
                                                                    [aliases: d]
  rw dev [side..]           Start development servers for api, db, and web
  rw generate <type>        Save time by generating boilerplate code[aliases: g]
  rw info                   Print your system environment information
  rw lint                   Lint your files
  rw open                   Open your project in your browser
  rw storybook              Launch Storybook, an isolated component development
                            environment                            [aliases: sb]
  rw test [side..]          Run Jest tests. Defaults to watch mode
  rw upgrade                Upgrade all @redwoodjs packages via interactive CLI

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Examples:
  yarn rw g page home /  "Create a page component named 'Home' at path '/'"

Unknown arguments: setup, tailwind
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

After that I tried yarn rw g util tailwind and can confirm @nerdstep's findings still hold true for the latest canary release

$ yarn rw g util tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw g util tailwind
rw g util <util>

Quality of life utilities

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Also see the Redwood CLI Reference
(https://redwoodjs.com/reference/command-line-interface)

Not enough non-option arguments: got 0, need at least 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Tobbe on 5 Oct 2020

Building the latest RW from main locally atm. I'll try to do some debugging

Tobbe on 5 Oct 2020

With my own build at least I get the setup command

$ yarn rw setup
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw setup
rw setup <option>

Initialize project config and install packages

Commands:
  rw setup i18n      Setup i18n
  rw setup tailwind  Setup tailwindcss and PostCSS

Options:
  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

Also see the Redwood CLI Reference
(https://redwoodjs.com/reference/command-line-interface#setup)

Not enough non-option arguments: got 0, need at least 1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Still no luck installing tailwind though, but a new error at least 🙂

$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  × Configuring PostCSS...
    → ENOENT: no such file or directory, open 'C:\Users\tobbe\dev\redwood\rw20\node_modules\@redwoodjs\cli\dist\commands\setup\tailwind\templates\postcss.config.js.template'
    Initializing Tailwind CSS...
    Adding imports to index.css...
    One more thing...
ENOENT: no such file or directory, open 'C:\Users\tobbe\dev\redwood\rw20\node_modules\@redwoodjs\cli\dist\commands\setup\tailwind\templates\postcss.config.js.template'
Done in 29.49s.

Tobbe on 5 Oct 2020

As we saw in a previous comment of mine, installing 0.19.2-canary.40 doesn't give me the setup command at all.
Doing a build locally and copying that over (yarn rwt copy) does give me setup.

But running yarn rw setup tailwind fails with a message of a missing file, and I couldn't figure out why.
I run yarn rwt copy and the file is there. I run yarn rw setup tailwind and the file is not there 🤔

I finally figured out the file disappears because yarn rw setup tailwind does yarn workspace web add ... and that overwrites (removes) the stuff that yarn rwt copy copied to the node_modules folder. le sigh

So. This works:

$ yarn rwt copy
$ yarn workspace web add -D [email protected] tailwindcss [email protected]
$ cp -r ../redwood/packages/cli/dist/commands/setu* node_modules/\@redwoodjs/cli/dist/commands/
$ vim node_modules/\@redwoodjs/cli/dist/commands/setup/tailwind/tailwind.js
      //await (0, _execa.default)('yarn', ['workspace', 'web', 'add', '-D', '[email protected]', 'tailwindcss', '[email protected]']);
$ yarn rw setup tailwind

Tobbe on 5 Oct 2020

👍1

And maybe provide some typescript to guide developers through editing remote setup instructions, typescript which could include the set of available commands. Is it something we'd want to do, or save for a later version?

Le sigh indeed. Always. Something. Nuanced. And Painful. smh

Confirming Error Messsage

To be clear, this is an accurate error message. Indicating something is most likely incorrect with the path handling for the file templates\postcss.config.js.template

Yes?

$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  × Configuring PostCSS...
    → ENOENT: no such file or directory, open 'C:\Users\tobbe\dev\redwood\rw20\node_modules\@redwoodjs\cli\dist\commands\setup\tailwind\templates\postcss.config.js.template'
    Initializing Tailwind CSS...
    Adding imports to index.css...
    One more thing...
ENOENT: no such file or directory, open 'C:\Users\tobbe\dev\redwood\rw20\node_modules\@redwoodjs\cli\dist\commands\setup\tailwind\templates\postcss.config.js.template'
Done in 29.49s.

thedavidprice on 5 Oct 2020

To be clear, this is an accurate error message. Indicating something is most likely incorrect with the path handling for the file templates\postcss.config.js.template
Yes?

No 😉

The problem is that the step before (√ Installing packages...) removed the file. Seems that when I run (a command that runs) yarn workspace web add ... the files copied over by yarn rwt copy are removed.

I'm pretty sure it would work if you made another canary release. One that includes setup so that I don't have to build RW myself to get it.

Tobbe on 5 Oct 2020

Hmm, every PR merge has a new canary release. There's a new one as of an hour ago. The Setup PR was merged days ago.

🤔

thedavidprice on 5 Oct 2020

Just upgraded again

$ yarn rw info
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw info

  System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 14.4.0 - ~\AppData\Local\Temp\yarn--1601918838663-0.2609037406685093\node.CMD
    Yarn: 1.22.4 - ~\AppData\Local\Temp\yarn--1601918838663-0.2609037406685093\yarn.CMD
  Browsers:
    Chrome: 85.0.4183.121
    Edge: Spartan (44.19041.423.0), Chromium (85.0.564.68)
  npmPackages:
    @redwoodjs/core: ^0.19.2-canary.42 => 0.19.2-canary.42+578e036c

Done in 3.02s.

These are all the commands I have

$ la node_modules/\@redwoodjs/cli/dist/commands/
total 85
drwxr-xr-x 1 tobbe 197609    0 Oct  5 19:13 .
drwxr-xr-x 1 tobbe 197609    0 Oct  5 10:47 ..
-rw-r--r-- 1 tobbe 197609 3941 Oct  5 08:45 build.js
-rw-r--r-- 1 tobbe 197609 1461 Oct  5 08:45 check.js
drwxr-xr-x 1 tobbe 197609    0 Oct  5 10:47 dataMigrate
-rw-r--r-- 1 tobbe 197609  894 Oct  5 08:45 dataMigrate.js
-rw-r--r-- 1 tobbe 197609  862 Oct  5 08:45 db.js
drwxr-xr-x 1 tobbe 197609    0 Oct  5 10:47 dbCommands
drwxr-xr-x 1 tobbe 197609    0 Oct  5 09:33 deploy
-rw-r--r-- 1 tobbe 197609  826 Oct  5 08:45 deploy.js
drwxr-xr-x 1 tobbe 197609    0 Oct  5 10:47 destroy
-rw-r--r-- 1 tobbe 197609  598 Oct  5 08:45 destroy.js
-rw-r--r-- 1 tobbe 197609 4146 Oct  5 08:45 dev.js
drwxr-xr-x 1 tobbe 197609    0 Oct  5 10:47 generate
-rw-r--r-- 1 tobbe 197609 1514 Oct  5 08:45 generate.js
-rw-r--r-- 1 tobbe 197609 1467 Oct  5 08:45 info.js
-rw-r--r-- 1 tobbe 197609 1346 Oct  5 08:45 lint.js
-rw-r--r-- 1 tobbe 197609 1053 Oct  5 08:45 open.js
-rw-r--r-- 1 tobbe 197609 1485 Oct  5 08:45 storybook.js
-rw-r--r-- 1 tobbe 197609 4627 Oct  5 08:45 test.js
-rw-r--r-- 1 tobbe 197609 5093 Oct  5 08:45 upgrade.js

For some reason setup isn't being bundled

Tobbe on 5 Oct 2020

So, apparently, Setup hasn't been, ahem, setup?

This helps. Will dig deeper a bit later

thedavidprice on 5 Oct 2020

😄1

Update: I've been able to replicate this locally using the "Local Package Registry Emulation" with Verdaccio. Hoping for a fix and canary release soon.

thedavidprice on 6 Oct 2020

Well, there are a couple of things going on here.

It's possible I resolved the issue with Setup via #1282
I've found an issue with the canary release + upgrade process that's not installing canaries correctly for all packages. See https://github.com/redwoodjs/redwood/issues/1286

@Tobbe Could you please test the latest CLI package in canary:

run yarn rw upgrade -t canary.
- this will upgrade _most_ of the packages to the latest canary versions, but not all. And, importantly, not CLI
then run yarn add -W @redwoodjs/[email protected] (or replace 45 with whatever the latest is based on step 1)
- You can confirm the correct version of CLI is installed if you run yarn rw help and see "setup". You can also look at the package.json version in node_modules/@redwoodjs/cli/package.json
run yarn rw setup tailwind --> 🤞

thedavidprice on 6 Oct 2020

First try was a half success 😏 Got a new version of CLI! But didn't get all the way through the tailwind setup.

/cli/package.json
"version": "0.19.2-canary.45+f354b564"

$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  √ Configuring PostCSS...
  × Initializing Tailwind CSS...
    → info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    Adding imports to index.css...
    One more thing...
Command failed with exit code 1: yarn tailwindcss init
error Command "tailwindcss" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Done in 25.85s.

I'll try again with a new, fresh, RW setup.
Just have to get out of this video meeting first, need the bandwidth for video, not for installing npm packages 😛

Tobbe on 6 Oct 2020

🎉

$ yarn rw setup tailwind
yarn run v1.22.4
$ C:\Users\tobbe\dev\redwood\rw20-2\node_modules\.bin\rw setup tailwind
  √ Installing packages...
  √ Configuring PostCSS...
  √ Initializing Tailwind CSS...
  √ Adding imports to index.css...
  √ One more thing...

           Tailwind configured with "upcoming change" opt-in enabled

           See this doc for info: https://tailwindcss.com/docs/upcoming-changes

Done in 24.35s.

A fresh install did it 🙂

Tobbe on 6 Oct 2020

Wanted to try and figure out why it didn't work the first time around, and now I have.

Way to reproduce:

Successfully run yarn rw setup tailwind
Remove the postcss config file rm web/config/postcss.config.js
Remove the tailwind config file rm web/tailwind.config.js
Run yarn rw setup tailwind again

Now it might seem like a strange/contrived thing to do to remove the config files. But say you're new, and screw something up with the config. You decide to delete the config files to try to start over again. It won't work.

So I think yarn rw setup tailwind should re-create any missing config files (it does for the postcss config file already).
And it could also have a --force option to recreate/override config files even if they already exist

Tobbe on 6 Oct 2020

Closing this as resolved in #1282

Moved @Tobbe issue (in case of existing packages installed or imports in index.css) to https://github.com/redwoodjs/redwood/issues/1301

thedavidprice on 8 Oct 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

Filename needed in import in tsx

Tobbe · 4Comments

New Feature Proposal: Data Migrations

cannikin · 3Comments

Firefox bug and “Something went wrong in browser”: Router regex not supported in Firefox

Ameobea · 3Comments

How to use Gatsby with Redwood in a monorepo setup?

freddydumont · 3Comments

Add option --inspect dev-server

peterp · 4Comments