Autoprefixer encountered a TypeError while executing the npm script: Patterns must be specified as a string or an array of strings

Upon executing npm run prefix:css, the following error message is displayed:

Error: Patterns must be a string or an array of strings

{
  "name": "natours",
  "version": "1.0.0",
  "description": "A project for natours",
  "main": "index.js",
  "scripts": {
    "watch:sass": "node-sass sass/main.scss css/style.css -w",
    "compile:sass": "node-sass sass/main.scss css/style.comp.css",
    "concat:css": "concat -o css/style.concat.css css/icon-font.css 
                   css/style.comp.css",
    "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' 
                   css/style.concat.css -o css/style.prefix.css"
   },
   "author": "Rahmat",
   "license": "ISC",
   "devDependencies": {
      "autoprefixer": "^9.6.1",
      "concat": "^1.0.3",
      "node-sass": "^4.12.0",
      "postcss-cli": "^6.1.3"
    }
   }

This file is my packge.json.

Here is a snapshot of the error: https://i.sstatic.net/sd2e3.png

Any suggestions on how to resolve this issue?

cssnpmsass

Answer №1

"prefix:css": "postcss --use autoprefixer -b \"last 10 versions\" css/style.comp.css -o css/style.prefix.css",

It appears that utilizing a string may be necessary in this situation. I recommend giving it a try using the following approach...

Answer №2

Give this a shot:

"prefix:css": "postcss --use autoprefixer -b 'last versions' 
               css/style.concat.css -o css/style.prefix.css"

Simply omit the 10, it should function properly.

Answer №3

In order to resolve the issue at hand, carefully review your manifest.json file. Ensure that there are no empty arrays or blank code snippets present before taking any action.

By following these steps, you should be able to successfully address the problem at hand.

Lesson learned:

"web_accessible_resources": [
    {
      "use_dynamic_url": true,
      "resources": [""]
    }
  ],

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

Combining divs with identical values in Angular

I am working on creating my very own custom Calendar. Take a look at the full example of my component here I need help figuring out how to combine week divs that share the same value {{day.weekNumber}} so that there is only one div for each shared value, ...

htmlcssangular

What steps can I take to ensure a JavaScript loading image is displayed until the entire page has finished loading?

Looking to implement a JavaScript loading image that displays until the page has fully loaded? I'm currently developing an online antivirus scanner and in need of help. I am trying to set up JavaScript to show a loading image while a file is being up ...

javascriptphphtmlcss

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

I am looking to open all content within a specific <div> in a new tab (target="_blank"). I am open to any solution, whether it involves JS, CSS, HTML, classes, IDs, etc. I experimented with using <base target="_blank">, but it affect ...

javascripthtmlcsstarget

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

csshtml

What seems to be the issue with installing @mikro-orm/mariadb?

Seeking assistance with installing mikroorm into adminjs. I followed the instructions provided at After executing the command npm install @mikro-orm/mariadb as per the guide, I encountered the following error message: npm ERR! @mikro-orm/mariadb@" ...

expressnpmmariadbmikro-ormadminjs

Unauthorized installation of npm modules

Upon inspection of the \AppData\Roaming\npm-cache directory on my Windows7 machine, I discovered numerous node modules that had been installed without my knowledge (I was unaware of their presence on my computer). Is there a way to generate ...

node.jsmodulenpm

JQuery hover effect for dynamically added elements

Currently, I am working on a webpage that will trigger an ajax call upon loading. The response data in JSON format will be processed and the elements will then be added to the DOM as shown below: $.ajax({ type: 'POST', url: "http://mysite.de ...

javascriptjquerycssajax

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 ...

cssruby-on-railssass

How to perfectly center an absolute positioned icon on a 767px screen

The icons positioned absolutely in the two columns must remain center aligned across all screen resolutions. The media query below attempted to align the icon on mobile devices, but it is inaccurate for any resolution. How can I correct the CSS? @media scr ...

htmlcssfrontend

Proper positioning of popover ensures it does not exceed the boundaries of its parent

In my ngprime table, the header row contains a column field with a popover set to display at the top. However, it is covering the actual field instead of appearing above it. This issue arises because the popover cannot display outside of its parent div, ca ...

cssangularprimeng

Steps to trigger a Bootstrap modal when the user clicks anywhere on the webpage

I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...

javascriptjquerycsstwitter-bootstrap-3modal-dialog

Adjusting the size of an image based on the size of the window

I'm currently working on my first website project. I have successfully implemented a large image banner, however, I am facing an issue with setting its height. Whenever I try to adjust the height using percentage values, the banner disappears. My goal ...

htmlcssimage

What is the best way to eliminate the alert message "autoprefixer: Greetings, time traveler. We are now in the era of CSS without prefixes" in Angular 11?

I am currently working with Angular version 11 and I have encountered a warning message that states: Module Warning (from ./node_modules/postcss-loader/dist/cjs.js): Warning "autoprefixer: Greetings, time traveler. We are now in the era of prefix-le ...

javascriptcssangularautoprefixer

What is the best way to link an image in a React Component NPM module?

I have developed a date picker component in React and I'm currently working on uploading it to NPM. The component utilizes an external SVG file, but I am encountering issues with referencing that SVG file properly. Here's the structure of my fil ...

javascriptnode.jsreactjsnpm

Animation failing to be queued properly

Here is a snippet of code that moves a heading icon back and forth when you hover over the heading: jQuery('h1.heading').hover( function(){ $icon = jQuery('.heading-icon', this); if( ! $icon.is(':animated') ){ ...

javascriptjquerycssanimationjquery-animate

Node.js encountering installation error with Express.js

Encountered an issue while attempting to install express.js using the command "npm install -g express" in the Windows command prompt, resulting in the following error: module.js:340 throw err; ^ Error: Cannot find module 'express' ...

node.jsexpressnpm

What method sits snugly between prepend() and append()?

Just a quick question I have. I am attempting to align an element with my target. Usually, we use prepend (before the target) and append (after the target). Is there something similar that allows us to position that element directly on top of what we are ...

javascripthtmljquerycssprepend

Updating files in a Next.js project and automatically refreshing the page without the need to rerun 'npm run'

For a while now, I've been developing websites using a traditional LAMP stack with javascript (including jQuery) for the frontend. Recently, I decided to explore using javascript for the backend as well and started learning next.js. In the older meth ...

javascriptnode.jsreactjsnpmnext.js

Customizing the CSS for individual posts in WordPress based on their post

I am interested in establishing a unique look for each individual post on my wordpress.org blog. Is there a way to customize the CSS code of individual posts without changing the design of other posts? I have tried using categories to create a new PHP fi ...

phpcsswordpresspost

I'd like to share with you the steps to begin a yarn script using pm2 on a

I am working on a project using yarn and I want to run one of the scripts in the package.json file with pm2 using the following command: pm2 start "yarn start" When I try this command, I get the following error message: [PM2] Applying action restartProces ...

node.jswindowsnpmyarnpkgpm2