The deployment process encountered an error: "bin/yarn: Permission denied"

Experiencing a deployment failure in production, it appears that yarn lacks the necessary permissions to read the file.

How can I manage permission rights for yarn during deployment? Thank you

Rails 6.1.3.1 // Node v15.5.1 // Tailwindcss: 2.1.1

Production Logs

   Using sassc-rails 2.1.2
 Bundled gems are installed into `./vendor/bundle`
 Running rake goals
 Run rake assets:precompile
 I,  INFO -- : Writing /home/bas/app/public/assets/BlackswanLostintheswell4-600x320-0d7f660ace7096482a4523c9ffe8a9f8908628a6b07f84919a5a7c9bc4fd5693.jpg
 I,  INFO -- : Writing /home/bas/app/public/assets/surf-de-nuit-bc6077c7ea2f8e710dd8263b861b5919ef8f1a17c6124f4bb57d70a9c2d7296f.jpg
 sh: line 1: /home/bas/app/bin/yarn: Permission denied
 sh: line 1: /home/bas/app/bin/yarn: Permission denied
 I,  INFO -- : Writing /home/bas/app/public/assets/application-1a626ce625d708fd518476b336900a049f858135a41f621a0d478a2fe04c738a.css
 I,  INFO -- : Writing /home/bas/app/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js
 I,  INFO -- : Writing /home/bas/app/public/assets/manifest-b4bf6e57a53c2bdb55b8998cc94cd00883793c1c37c5e5aea3ef6749b4f6d92b.js.gz
 I,  INFO -- : Writing /home/bas/app/public/assets/8J0A9786-1-600x330-f70182bc6c594c2f565eb91f855afc917598392be56e5167b6f97cab5e9d0214.jpg
 I,  INFO -- : Writing /home/bas/app/public/assets/8J0A9786-9f645e58550403181de9430ffc80e1a838a606e5114f9f8828768911806f7bff.jpg
 I,  INFO -- : Writing /home/bas/app/public/assets/application-1a626ce625d708fd518476b336900a049f858135a41f621a0d478a2fe04c738a.css.gz
 I,  INFO -- : Writing /home/bas/app/public/assets/pages-1a626ce625d708fd518476b336900a049f858135a41f621a0d478a2fe04c738a.css
 I,  INFO -- : Writing /home/bas/app/public/assets/pages-1a626ce625d708fd518476b336900a049f858135a41f621a0d478a2fe04c738a.css.gz
 Compiling...
 Compilation failed:
 yarn run v1.22.10  
 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
 error Command "webpack" not found.
 Build failed. Please check the logs above
 Deploy failed

Package.json

{
  "name": "name",
  "private": true,
  "dependencies": {
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "rails/webpacker#b6c2180",
    "@tailwindcss/aspect-ratio": "^0.2.0",
    "@tailwindcss/forms": "^0.3.2",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^10.2.5",
    "node": "^16.0.0",
    "postcss": "^8.2.10",
    "tailwindcss": "^2.1.1",
    "tailwindcss-debug-screens": "^2.0.0",
    "turbolinks": "^5.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.11.2"
  }
}

bin/yarn

#!/usr/bin/env ruby
APP_ROOT = File.expand_path('..', __dir__)
Dir.chdir(APP_ROOT) do
  yarn = ENV["PATH"].split(File::PATH_SEPARATOR).
    select { |dir| File.expand_path(dir) != __dir__ }.
    product(["yarn", "yarn.cmd", "yarn.ps1"]).
    map { |dir, file| File.expand_path(file, dir) }.
    find { |file| File.executable?(file) }

  if yarn
    exec yarn, *ARGV
  else
    $stderr.puts "Yarn executable was not detected in the system."
    $stderr.puts "Download Yarn at https://yarnpkg.com/en/docs/install"
    exit 1
  end
end

https://github.com/yarnpkg/yarn/issues/1806 I gave rights to the local file but it did not work

(Local)/bin

-rwxrwxrwx 1 root root 2945 Apr 15 12:09 bundle
-rwxrwxrwx 1 root root  141 Apr 15 12:09 rails
-rwxrwxrwx 1 root root   90 Apr 15 12:09 rake
-rwxrwxrwx 1 root root 1068 Apr 15 12:09 setup
-rwxrwxrwx 1 root root  414 Apr 15 12:09 webpack
-rwxrwxrwx 1 root root  419 Apr 15 12:09 webpack-dev-server
-rwxrwxrwx 1 root root  533 Apr 15 12:09 yarn

sh: 1: node: Permission denied I attempted:

yarn config set user 0
yarn config set unsafe-perm true

Answer №1

The primary issue arose from the yarn installation within the current working directory.

  1. To address this, the yarn package was removed using:

    sudo apt-get remove yarn && sudo apt-get purge yarn

Additionally, /node_modules, yarn.lock, and /bin/yarn were deleted.

  1. Switching from Yarn to Npm can be achieved through webpacker by following these steps:

  1. Deploy the changes

  2. If needed, install yarn in the root folder.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Hey there, I'm working on a div that contains a map. My goal is to have the width of the div change from 80% to 50% when a user hovers over it. This will create space on the right side for an image to appear. I've been looking up examples of jqu ...

Next.js - Anticipated that the server HTML would include a corresponding <div> within <div> tag

For a live demonstration, please click here In my current project, I am experimenting with creating a simple layout that adjusts based on the user's screen size. Specifically, on mobile devices, only the latest posts should be displayed. On desktops, ...

Toggle css comment line using gulp

Is it possible to temporarily deactivate a particular CSS comment on a specific line using Gulp and then reactivate it after completing a build task? As an illustration, I am interested in deactivating the @import 'compass/reset'; statement loca ...

Align an element to the center and then align a second element to the right using Tailwind CSS

Here is a visual representation of my goal: the dashed line indicates the center of the container. My objective is to horizontally center one div element and then right-align a second div within the same row, all while keeping both elements centered. htt ...

What is the best approach to styling a sub-child element within the first child using TailwindCSS?

Currently working with React (Next.js) and TailwindCSS. <ul> <li> <h1 className="bg-red-400">first</h1> </li> <li> <h1 className="bg-green-400">second</h1> </li> &l ...

Trouble with placing an absolutely positioned element using Tailwindcss

I am currently working on a project using TailwindCSS in which I have a logo positioned to the left and navigation to the right. Both elements are centered, but because the logo has a position of absolute, it appears in front of the navigation. I would lik ...

Integrating foundation-sites with webpack, unable to apply styles

Delving into the world of webpack for the first time has been quite a daunting experience! I'm attempting to set up the foundation for sites, but I feel completely lost when it comes to configuring it properly. Here is my Webpack configuration: var ...

Is it possible to modify the CSS styling of the file_field?

I am looking to customize the appearance of the file_field in CSS. Rather than displaying the default browse button, I would like to use a simpler upload button for file submission. What steps can I take to modify the CSS of the file_field and replace it ...

I'm currently experiencing a challenge with a project I'm tackling that specifically deals with chart.js

In my recent coding project, I created a script to gather user input and then present it in various chart formats. However, upon executing the code, the selected chart fails to display after inputting values and clicking on the "generate chart" button. Her ...

CSS background property does not function properly if the URL contains brackets

Here is the URL for an image I am working with: URL: Currently, I am having an issue in my CSS: background: url(http://www.andrearosseti.cl/image/cache/data/New%20Coleccion/Planas/SWEET-5-TAUPE-(1)-340x340.jpg) The problem arises due to the presence of ...

Unusual Display of Mantine Radio Button

I am currently using Mantine v7.0.0 in combination with Next.js v13.5.2 and Tailwind v3.3.3. In my setup, when I create <Radio /> elements, the svg of the element is appearing separately from the radio button instead of replacing it. This issue can b ...

Every time Tailwind compiles, it seems to generate a glitchy class

There was a time when I accidentally wrote 2 classes without a space max-w-[412px]mb-[36px]. This caused an error, so I added a space between the classes. However, the error persisted even after making this correction. In a last attempt to resolve the issu ...

Using JQuery to trigger CSS3 animations on one element when clicking on another

My Rails app has a feature similar to reddit where users can upvote or downvote content. I'm currently working on creating a CSS3 animation that triggers when a user clicks the downvote button. Here's how I'm using JQuery: <div class="a ...

Cover the entire section with an image

I'm aiming to achieve a similar layout like this (using tailwind) : https://i.stack.imgur.com/G0oti.png Here's the current setup: <section class="bg-juli-white pt-24"> <div class="max-w-6xl mx-auto flex flex-col" ...

What could be preventing my state from changing to false when I click the close button on the menu?

Despite initializing my state to false, the problem arises when I open and close my menu. The state never actually becomes false, causing the closing animation of the NavBar to not run as expected. The component: import CloseButton from "./CloseButto ...

What is the best way to vertically align the second row in a carousel using Tailwind CSS?

Currently, I am working on developing an up-and-down carousel with Tailwind CSS. However, I am encountering a challenge in aligning the elements in the second row of my grid. My main objective is to have these elements centered vertically within the grid. ...

What are the steps for distributing a styled React component?

My goal is to release a UI library using React, but I am struggling with how to handle styles. When I write code in a project, I typically use webpack and babel to build my code, resulting in the creation of a *.css file. import React from 'react&ap ...

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

Setting the color for the :hover and :active states on a react JSX component: A step-by-step guide

<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...