Webpack error when deploying to Netlify with brand new project

[luctus]

Hello everyone!

I'm new here so I'm not sure this is the right place to asj this question.

I just created a new project on my machine, it works ok, but I then tried to deploy it inmediately to Netlify, I put "yarn build" as the build command and "output" as the folder for the website.

The site gets deployed, but I can not see the styles. In the Deploy's logs, I see this:

5:41:11 PM: $ yarn build
5:41:11 PM: yarn run v1.22.10
5:41:12 PM: $ bundle exec bridgetown build
5:41:13 PM:           Starting: Bridgetown v0.21.5 (codename "Broughton Beach")
5:41:13 PM:        Environment: development
5:41:13 PM:             Source: /opt/build/repo/src
5:41:13 PM:        Destination: /opt/build/repo/output
5:41:13 PM:     Custom Plugins: /opt/build/repo/plugins
5:41:13 PM:  Incremental build: disabled. Enable with --incremental
5:41:13 PM:         Generating…
5:41:13 PM:         Pagination: disabled. Enable in site config with pagination:\n enabled: true
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:            Webpack: There was an error parsing your Webpack manifest file. Please check your Webpack manifest file for any errors.
5:41:13 PM:             Done! 🎉 Completed in less than 0.42 seconds.
5:41:13 PM:  Auto-regeneration: disabled. Use --watch to enable.
5:41:13 PM: Done in 1.83s.
5:41:13 PM: ​
5:41:13 PM: (build.command completed in 2.1s)

My local machine is:

➜  ruby -v
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [arm64-darwin21]
➜  yarn -v
1.22.17
➜  node -v
v17.0.1

I'd really appreciate some guidance here. I'll try to add tailwind as a next step.

Thanks in advance!

[ayushn21]

Hey @luctus, the command to build your frontend using webpack along with your site is yarn deploy. If you change your build command to that, it should all work fine. I see you're using v0.21; just also wanted to mention that in v1.0.0 onwards, we don't use yarn as our taskrunner and the new deploy command is bin/bridgetown deploy.

Also, if you run bundle exec bridgetown configure netlify, it will create a netlify.toml file for you which has all the config in it so you don't need to manually set it up. Also you can set up tailwind using bundle exec bridgetown configure tailwindcss (Docs: https://www.bridgetownrb.com/docs/bundled-configurations)

[luctus]

Hello @ayushn21 , it's me again...

What should I expect from the bundle exec bridgetown configure tailwindcss command?

What I see after that command:

• removed sass and sass-loader from package.json
• added postcss, postcss-flexbugs-fixes, postcss-loader and postcss-preset-env to package.json
• created a postcss.config.js file
• replaced 'sass' by 'postcss` at webpack.defaults.js

But I don't see anything related to tailwind itself... Am I missing anything else?

I'm running bridgetown 1.0.0.alpha9 now :)

[luctus]

Oh, I just run the task again but I hit "Y" instead of the enter key and now I see a lot of changes...

I always thought that in these prompts, the option in mayus would be the default if you hit enter :)

[ayushn21]

Yeah you'd need to enter Y and then press enter. You're right, the default selection should be "yes" if you just press enter without typing anything but that's not how it works at the moment.

bridgetown/bridgetown-core/lib/bridgetown-core/configurations/tailwindcss.rb

Line 15 in e13f7e4

return unless confirm.casecmp?("Y")

Probably something worth changing to avoid confusion ... I'll have a think about it, thanks :)

[luctus]

It worked! What an amateur error, sorry for that. Should I upgrade to the new Bridgetown version then? Any recommended path? Those commands seems super awesome! I’ll try them tonight. Thanks a lot!

[ayushn21]

It worked! What an amateur error, sorry for that.

No worries haha, it happens :)

Should I upgrade to the new Bridgetown version then? Any recommended
path?

Yeah I'd definitely recommend upgrading as we're aiming to keep the API fairly stable after v1. There's been quite a few changes from 0.2x to the 1.0 alphas (currently the latest is v1.0.0.alpha9).

Here's an upgrade guide from @jaredcwhite that should help you with the upgrade: https://www.bridgetownrb.com/release/era-of-bridgetown-v1#upgrading-from-v02x.

[luctus]

Amazing, thanks a lot!!

[luctus]

Hey @ayushn21, it's me again...

I'm super amateur with webpack and I struggled a lot because my base site wasn't looking good once deployed (with the purgecss plugin). I finally found that I needed to add an extra configuration to the purgecss.js file in order to make it recognize tailwind classes that contain : and . (like lg:flex or px-2.5)

My final purgecss.js file looks like this:

module.exports = {
  content: ['frontend/javascript/*.js','.output/*.html','./output/**/*.html'],
  defaultExtractor: content => content.match(/[\w-/:\.]+(?<!:)/g) || [],  // THIS IS THE NEW LINE
  output: "./output/_bridgetown/static/css"
}

Do you believe it's a good idea to make sure this line is in place when we run the tailwind configurator? I'd like to give it a try and create a pull request.

[luctus]

Fair enough. My only point is that it was so so easy and fast to install everything, but in the end it didn't work out of the box.

[jaredcwhite]

Maybe the purge setup needs to be done through Tailwind's own config? https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css

[luctus]

I honestly believe that would be the most transparent solution :)

[ayushn21]

Maybe the purge setup needs to be done through Tailwind's own config?

Yes this is what we should do. I wrote that Tailwind configuration before they had their own in built purging ... Neither Jared nor I are Tailwind users so I guess it just fell by the wayside a bit. I think @adrianvalenz got Tailwind's in built purging working in Bridgetown. I can amend our Tailwind configuration to do this, or if you'd like to take a stab at it and open a PR, that'd be great too :)

Here's where the change needs to be made:

https://github.com/bridgetownrb/bridgetown/blob/main/bridgetown-core/lib/bridgetown-core/configurations/tailwindcss.rb

[luctus]

Perfect, I'll give it a try once I manage to build my first site's verision, probably next week ;)