TypeError: Cannot read properties of undefined (reading 'replace')

[Ronneback]

I got this error message when running the script - why is that?

tailwindui-crawler-master % npm start

tailwindui-crawler@4.0.1 start node index.mjs

file:///Users/name/Downloads/tailwindui-crawler-master/index.mjs:71 const regexEmail = new RegExp(process.env.EMAIL.replace(/[.@]/g, '\$&'), 'g') ^

TypeError: Cannot read properties of undefined (reading 'replace') at file:///Users/name/Downloads/tailwindui-crawler-master/index.mjs:71:49 at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Node.js v19.1.0

[kiliman]

Did you follow the instructions in the README? Make sure you create a .env file your email and password.

[Ronneback]

yes, of course. I created a output.env with my credentials to Tailwind UI and OUTPUT=./output Why is the problem still there?

[kiliman]

Is the file named output.env?

It should just be .env

I need to add some validation to make sure it's properly configured.

[kiliman]

Sorry, but what is shuffle.dev? This tool only crawls the tailwindui.com site to get the component files.

[DannyAllegrezza]

Sorry, but what is shuffle.dev? This tool only crawls the tailwindui.com site to get the component files.

Hey @kiliman 👋 (I'm also in the Remix discord),

First, thanks for maintaining this project! I'm not sure if my comment will help, but hopefully provides some info based on your question. Not sure where the comment mentioning shuffle.dev went, but https://shuffle.dev/ is a SaaS that offers an online editor/component builder where you can drag/drop/customize components their team has already curated and styled with Tailwind.

Not sure if you knew this, but they have a feature that allows users to import the Tailwind UI components into Shuffle to use as a component library. It references this project 👀

Maybe they are having trouble importing the files into Shuffle? I have a Shuffle lifetime membership (got in early for a fixed rate) so I could test the theory out tonight. Regardless, I don't think this issue is with this project.

[kiliman]

@DannyAllegrezza I see. Thanks for the clarification. Yeah, I'm not familiar with that tool. I'm not sure what the OP was trying to do. Based on your screenshot, it did say to use the config file provided. Perhaps they expect things in a certain way. Anyway, if you could try it and let me know if you have any issues, that would be great. Be sure to post the config file as well. Thanks!

[KrunalDatascience]

Sorry, but what is shuffle.dev? This tool only crawls the tailwindui.com site to get the component files.

Hey @kiliman 👋 (I'm also in the Remix discord),

First, thanks for maintaining this project! I'm not sure if my comment will help, but hopefully provides some info based on your question. Not sure where the comment mentioning shuffle.dev went, but https://shuffle.dev/ is a SaaS that offers an online editor/component builder where you can drag/drop/customize components their team has already curated and styled with Tailwind.

Not sure if you knew this, but they have a feature that allows users to import the Tailwind UI components into Shuffle to use as a component library. It references this project 👀

Maybe they are having trouble importing the files into Shuffle? I have a Shuffle lifetime membership (got in early for a fixed rate) so I could test the theory out tonight. Regardless, I don't think this issue is with this project.

@DannyAllegrezza : Did you get any workaround to this:`

[DannyAllegrezza]

@DannyAllegrezza I see. Thanks for the clarification. Yeah, I'm not familiar with that tool. I'm not sure what the OP was trying to do. Based on your screenshot, it did say to use the config file provided. Perhaps they expect things in a certain way. Anyway, if you could try it and let me know if you have any issues, that would be great. Be sure to post the config file as well. Thanks!

Just got around to testing this. Again, I'm not sure where the original mention of Shuffle.dev was, but regardless, the instructions on their site and the import feature still work perfectly. I followed their instructions as listed and had no issues, but I'll still list the steps just incase they help someone out:

# 1. cloned this repo
$ git clone https://github.com/kiliman/tailwindui-crawler.git
# 2. cd into directory and install deps
$ cd .\tailwindui-crawler\
$ npm install
#  create a file named `.env`
$ touch .env 

Here are the contents of what Shuffle.dev wants you to place in .env, nothing spectacular:

# Your login data to TailwindUI.com
EMAIL=
PASSWORD=

# You'll need to make a ZIP archive from ./output/html/components directory.
OUTPUT=./output

### DO NOT CHANGE ###
LANGUAGES=html
BUILDINDEX=0

So, at this point you should have installed the dependencies and created a .env file at the root of the directory. Run the crawler with npm start

Finally, you need to zip the components folder. You'll find it in /output/html. Make a .zip archive of the components directory and you'll end up with components.zip.

Visit https://shuffle.dev/dashboard#/projects and click the blue "Create new project" button. Scroll all the way down to the "Tailwind UI for Tailwind CSS" template and upload your .zip file

As soon as this is done, you can click "Start Creating" to go into your new Shuffle project. All of the components are from Tailwind UI, which is pretty slick.