Error loading postcss plugin failed cannot find module autoprefixer

// packages info

webpack@2.2.1
autoprefixer@6.7.7
postcss-loader@1.3.3

Why the postcss-loader can not find the autoprefixer package?

// webpack config

// loaders
 { test: /.scss$/, include: /(app/styles|src/lib)/, loader: cssExtractTextPlugin.extract({
	fallback: 'style-loader',
	use: 'css-loader?sourceMap!postcss-loader!sass-loader?outputStyle=expanded&sourceMap'
}) },

{ test: /.scss$/, exclude: /(app/styles|src/lib)/, loader: cssExtractTextPlugin.extract({
	fallback: 'style-loader',
	use: [
		{ loader: 'css-loader', options: { modules: true, camelCase: true, importLoaders: 2, sourceMap: true, localIdentName: '[local]___[hash:base64:5]' } },
		{ loader: 'postcss-loader' },
		{ loader: 'sass-loader', options: { outputStyle: 'expanded', sourceMap: true} }
	],
}) },

// ...
        resolve: {
		modules: [
			'node_modules',
			'src',
		],
		extensions: ['.json', '.js'],
		alias: {
			vue: 'vue/dist/vue.js'
		}
	},
/ ...

// postcss.config.js

console.log('----------------------');

var autoprefixier = require('autoprefixier');

console.log('===================')

module.exports = {
	plugins: [
		autoprefixier({ browsers: 'last 10 version' }),
	]
}

// outputs
----------------------
----------------------
----------------------
----------------------
----------------------
----------------------
----------------------
----------------------
----------------------
----------------------
./~/css-loader?{"modules":true,"camelCase":true,"importLoaders":2,"sourceMap":true,"localIdentName":"[local]___[hash:base64:5]"}!./~/postcss-loader!./~/sass-loader?{"outputStyle":"expanded","sourceMap":true}!./src/app/ui/Message/Message.scss
Module build failed: Error: Cannot find module 'autoprefixier'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function._module2.default._resolveFilename (/Users/towry/Projects/abc/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:423:34)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/towry/Projects/abc/postcss.config.js:5:21)
    at Module._compile (module.js:570:32)
    at requireFromString (/Users/towry/Projects/abc/node_modules/require-from-string/index.js:27:4)
    at /Users/towry/Projects/abc/node_modules/cosmiconfig/lib/loadJs.js:11:15
 @ ./src/app/ui/Message/Message.scss 4:14-201 13:2-17:4 14:20-207

Under windows 10 and npm version 6.9.0, I cannot get the following script to work:

"build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"  

I’m always getting same error in the Windows console as follows:

Plugin Error: Cannot find module 'autoprefixer'

I’ve tried changing the syntax to the following one with no results:

"build:css": "postcss --use autoprefixer -b "last 10 versions" ./static/css/main.css -o ./static/css/main-prefixed.css"

Can anyone tell me whats the problem in here? Honestly, I’m quite new to this npm script.

My package.json looks like this:

{
  "name": "test-automate-npm",
  "version": "1.0.0",
  "description": "test",
  "main": "index.html",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "scss": "echo 'Compiling SCSS' && node-sass --watch scss -o ./static/css",
    "build": "npm run scss && npm run build:css",
    "build:css": "postcss --use autoprefixer -b 'last 2 versions' < ./static/css/main.css"   
  },
  "keywords": [
    "keywords",
    "here"
  ],
  "author": "Barleby",
  "license": "ISC",
  "dependencies": {
    "node-sass": "^4.12.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "postcss": "^5.0.16",
    "postcss-cli": "^2.5.0"
  }
}

Thank you in advance!

Edit:

I’ve also tried defining the npm script named build:css in package.json as follows:

"build:css": "postcss ./static/css/main.css autoprefixer -b "last 10 versions" -o ./static/css/main-prefixed.css"

and this results in the following error printed to the console:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on postcss.parts and use them in postcss.config.js.

Error: Cannot find module ‘autoprefixer’ #177

After cloning the repository and runing npm install and then npm run dev I get the following:

The text was updated successfully, but these errors were encountered:

@jonjamz Sorry I was just notified of this minutes ago as well.

I think it might have occured in #172 when I was trying to rebase some of the changes. I’ll try to get a fix out during lunch, sit tight!

Really sorry about this one

@jonjamz
If you’re in a rush to get this working, try working from this commit.

I believe updating the packages / css-loader + postcss-loader might cause some weird behavior.

@jonjamz The issue is that we removed the dependency npm install autoprefixer .

That should fix it. I’ll push a hotfix when I get the chance. Thanks for raising this issue.

Yes I was able to fix the problem by running that, thanks!

+1
Running npm install autoprefixer solved the same issue for me too.

@puranik3 this should have been fixed in #178 and if you look at package.json autoprefixer is there as a dependency.

Do you have the latest code? If so, this could be a problem with npm’s lockfile. Did you recently upgrade from a previous version?

@jonjamz @puranik3 whenever you get error «Cannot find module ‘xyz’» it means the module is not in «node_modules» directory. so you should run `npm install xyz’ this will add the module in your package.json file and also in ‘node_modules» directory.

Just wanted to say that I’m here from a completely unrelated thing (setting up jekyll and tailwind from this tutorial) and i had the same problem, ran npm install autoprefixer’ and then ‘npx tailwindcss init just worked : )

Just wanted to say that I’m here from a completely unrelated thing (setting up jekyll and tailwind from this tutorial) and i had the same problem, ran npm install autoprefixer’ and then ‘npx tailwindcss init just worked : )

This method didn’t work for me 🙂

Still having an issue with running «npx tailwindcss init», even after installing autoprefixed. Please let me know how to resolve it

Still having an issue with running «npx tailwindcss init», even after installing autoprefixed. Please let me know how to resolve it

Still having an issue with running «npx tailwindcss init», even after installing autoprefixed. Please let me know how to resolve it

It doesn’t work in that way. Yet I found the solution and have fixed it.
We need to install old autofixer step and then get npx tailwindcss init once done reinstall and install the recent autofixer

@jonjamz The issue is that we removed the dependency npm install autoprefixer .

That should fix it. I’ll push a hotfix when I get the chance. Thanks for raising this issue.

+1
Running npm install autoprefixer solved the same issue for me too. 🙂

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Cannot use without Autoprefixer #83

I don’t require or use autoprefixer in anywhere but I still get this error. When I still don’t use or require autoprefixer but install it, everything works fine.

The text was updated successfully, but these errors were encountered:

Let me know what the output of this is.

Also what’s are your node and npm versions?

npm version -> 3.10.5
node version -> 5.7.0

the output of the code is

If that’s the output, autoprefixer should be working fine now.

Issue is not the autoprefixer. I use gulp-postcss plugin without autoprefixer but gulp-postcss plugin doesn’t work without autoprefixer installed.

Autoprefixer is a dependency of postcss-cssnext . If you are using postcss-cssnext , you are using autoprefixer indirectly.

Are you still getting any errors?

I don’t get any errors when I install autoprefixer manually but shouldn’t it be like a dependency inside the node module ?

It should be. I asked you to install it for debugging purposes to check if it could be installed properly. Try uninstalling it now:

and test if it works.

Also make sure to npm prune

I even re-installed nodejs but it still gives the same error. Manual installation of autoprefixer is still needed.

Platform is windows by the way.

Yea I figured. Hmm. tests seem to be passing for postcss-next . As a last resort, I would install the latest version of node 6 and npm using the windows version of nvm

fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

error with latest node(v6.3) so I reinstalled 5.7.0

Hmm its hard for me to say. I only use osx and linux so it would be hard for me to test this out. Dependency hell sure is a problem if dep authors don’t shrinkwrap. In the meantime, I would recommend manually installing and saving autoprefixer and wait until it becomes properly installable.

As mentioned earlier, autoprefixer is a dependency of postcss-cssnext plugin, so this issue is probably connected to windows environment and/or node/npm version, but not gulp-postcss, because it doesn’t have these dependencies.

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Error: Cannot find module ‘./lib/rework’ #6

I am running Ubuntu 13.04 and I have installed autoprefixer via sudo npm install —global autoprefixer.

Getting this error:

module.js:337
throw new Error(«Cannot find module ‘» + request + «‘»);
^
Error: Cannot find module ‘./lib/rework’
at Function._resolveFilename (module.js:337:11)
at Function._load (module.js:279:25)
at Module.require (module.js:359:17)
at require (module.js:375:17)
at Object. (/usr/local/lib/node_modules/autoprefixer/node_modules/rework/index.js:2:18)
at Module._compile (module.js:446:26)
at Object..js (module.js:464:10)
at Module.load (module.js:353:32)
at Function._load (module.js:311:12)
at Module.require (module.js:359:17)

The text was updated successfully, but these errors were encountered:

I try to fix it after few days (unfortunately, my laptop in repair service).

I use same Ubuntu and install autoprefixer with same command — and everything was fine.

Try to update Autoprefixer, new version contain new (maybe fixed) Rework library.

If issue will repeat, could you attach your CSS and your shell commands?

I executed ‘npm update —global’ via sudo (is this right way to upgrade autoprefixer?) but still have the issue.
I can’t get utility to work on css from tutorial:

This is terminal command that I used:

Could you try to remove /usr/local/lib/node_modules and reinstall autoprefixer?

What is your node.js and npm versions? node -v npm -v

What is dirs inside /usr/local/lib/node_modules ? Maybe if Rework installed separated, we had this problems?

Источник

2.0.0-beta.1 -> Loading PostCSS Plugin failed #1287

Describe the bug

Same error as in #1267, opening this as indicated by the discussion in that issue.

Reproduction

• start a new project with vite@2.0.0-beta.1: npm init @vitejs/app example-project —template vue-ts .
• follow the Tailwind installation instructions.
• npm run dev

System Info

• required vite version: 2.0.0-beta.1
• required Operating System: MacOS 10.15.7
• required Node version: 14.15.3
• Optional:
  • npm/yarn version: 6.14.9
  • Installed vue version (from yarn.lock or package-lock.json ): 3.0.5
  • Installed @vue/compiler-sfc version: 3.0.5

Logs (Optional if provided reproduction)

1. Run vite or vite build with the —debug flag.
2. Provide the error log here.

The text was updated successfully, but these errors were encountered:

Found a solution in postcss.config.js — instead of

using this instead works:

my solutions as below:
npm 7.10.0
vite 2.1.5

npm init @vitejs/app
Ok to proceed? (y) y
✔ Project name: · vite2.x-project
✔ Select a framework: · vue
✔ Select a variant: · TypeScript

and after exec commands:
cd vite2.x-project
npm install
npm run dev

I got the error:
[vite] Internal server error: Loading PostCSS Plugin failed: Cannot find module ‘autoprefixer’

and I create a file postcss.config.js
// cotents in postcss.coinfg.js

Tried the javascript vue3 vite starter vite project, below works

But with the same config, the Typescript Vue3 start vite project throws this error

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Installation & build problems #50

In a fresh ember-cli project, the addon currently fails to install:

After adding broccoli-autoprefixer , it installs correctly.
However, then the build fails:

After installing broccoli-sass, it fails in a different and interesting way:

And that I’m not sure how to fix.

The text was updated successfully, but these errors were encountered:

Please create a file in app/styles/app.scss, even if empty.
You can use css in that file as well.

I know it isn’t the best approach possible, but it was a good step forward in including sass in addons. It’s temporary.

@stefanpenner, can you help me here? It looks like I can’t use broccoli-sass/broccoli-autoprefixer without the consuming app installing it as well?

@miguelcobain you can in the the 0.2.0 beta

Exactly what we need! Made some progress.
Currently the styles don’t show up in the consuming app. Maybe I need to sass import the styles?

@kazimuth can you try with version 0.0.16 and follow the new installation instructions: https://github.com/miguelcobain/ember-paper#installation ?

I think I nailed it.

Still failing with Cannot find module ‘broccoli-autoprefixer’ :/

Also, when I’ve installed things, I’m now getting:

This is all of my intro.js:

I have no idea what’s going on.

then added the line @import ’ember-paper’; .

Then ember server ran fine.

Cleaned caches, everything works now. Thanks!

Any particular reason for reopening?

what if you don’t have an app.css file, but an app.less file instead? and what if you’re doing everything in less and not sass in general?

Yes, good point, but:

If you need to override sass variables, you’ll need to use sass.
The way other libraries offer support for less and sass is to have both less and sass stylesheets available. Then users just include what they need.
Seems fine to me, but a bit overkill at the moment (there are definitely other priorities).

Additionally, if we’re going to choose between sass and less, I’d rather use sass because it lets us use css syntax if desired (scss files).

@miguelcobain I was unable to get the app to compile having both less and sass pre-compilers. It seemed that having both an app.less and an app.scss was troublesome. Luckily, I’m not too invested into either of the technologies so switching my app over to sass fixed the issue but I can’t imagine that’s a good solution for everyone.

BTW — I didn’t even want access to ember-paper’s variables but I was still forced to create an app.scss 🙁

Supporting both less and sass pre-compilers in your app isn’t an ember-paper concern, I think.

However, since this PR ember-cli/ember-cli#1918 I think it should be possible.

BTW — I didn’t even want access to ember-paper’s variables but I was still forced to create an app.scss 🙁

AFAIK, there isn’t any way to add sass to an app, from an addon, without importing its stylesheets.
Example: ember-cli-bootstrap-sass requires you to import its sass styles.

Let’s keep an eye for other addons and check if they do this in a better way.

I guess what I was trying to say was that I couldn’t build my app with ember-paper unless I had an app.scss file and I couldn’t have that file because I already had an app.less . I had to convert my app to use sass instead of less which was not ideal.

Right now, you need an app.scss to import ember-paper sass styles, and I don’t think there is any other way.

However, this shouldn’t stop you from using less simultaneously in your app! You should able to have a app.scss and an app.less simultaneously. There is a PR in ember-cli that aims to address just that: ember-cli/ember-cli#1918
There may be some problem somewhere, though.

Ok, tonight I’ll try a brand new ember-cli app using less and ember-paper and see if I get the same problems.

I’m getting this issue on a brand new ember 0.2.3 CLI app.

After I npm install broccoli-autoprefixer , ember install ember-paper mostly works but at the end I get a message The ember generate command requires an entity name to be specified. For more details, use ember help

@SirZach — Im trying to integrate ember-paper into a project that already uses less and ran into this same issue. Were you able to get ember-paper working with less? I am seeing below error on build

File not found: /app/styles/app.scss
in any of the following include paths:
/Users/. /tmp/sass_compiler-input_base_path-50K8SQUz.tmp/0
Error: File not found: /app/styles/app.scss
in any of the following include paths:
/Users/. /tmp/sass_compiler-input_base_path-50K8SQUz.tmp/0
at Object.findFileSync (/Users/. /node_modules/include-path-searcher/index.js:12:9)
at SassCompiler.build (/Users/. /node_modules/ember-cli-sass/node_modules/broccoli-sass-source-maps/index.js:62:31)
at /Users/. /node_modules/ember-cli-sass/node_modules/broccoli-sass-source-maps/node_modules/broccoli-caching-writer/index.js:152:21
at lib$rsvp$$internal$$tryCatch (/Users/. /node_modules/rsvp/dist/rsvp.js:493:16)
at lib$rsvp$$internal$$invokeCallback (/Users/. /node_modules/rsvp/dist/rsvp.js:505:17)
at lib$rsvp$$internal$$publish (/Users/. /node_modules/rsvp/dist/rsvp.js:476:11)
at lib$rsvp$asap$$flush (/Users/. /node_modules/rsvp/dist/rsvp.js:1198:9)
at nextTickCallbackWith0Args (node.js:433:9)
at process._tickCallback (node.js:362:13)

I have both app.scss and app.less files under styles folder.

package.json (in the same sequence):
«ember-cli-less»: «1.3.3»,
«ember-cli-sass»: «5.2.1»,

@jaichandra #248 was where I tracked not having that app.scss file and the resolution was to remove broccoli-sass from the project. broccoli-sass was originally used by ember-paper and they migrated away from it so that’s the first thing I would check for.

@jaichandra did you ever resolve this? I’m seeing the same thing.
I don’t have broccoli-sass in my project.

Источник

Go back to /admin/article and click to edit one of the articles. View the source and search for .js. Okay, we have several JavaScript files, because Webpack is splitting them. Click to look at build/admin_article_form.js, which will probably contain all the non-vendor code from that entry point.

The top of the file contains some Webpack boootstrap stuff, then our code is below, still mixed in with some things that makes Webpack work.

Now, check this out: in the original admin_article_form.js file, we created a class called ReferenceList:

And we also use the const keyword for const $autoComplete. Back in the compiled file, search for $autoComplete. Woh! It’s not const $autoComplete, it’s var $autoComplete! And if you search for ReferenceList… and get down to the class… there’s no class syntax! It’s wrapped in some sort of a «pure» function thingy.

Surprise! Something is rewriting our code! But, who? And, why?

Hello Babel

The who is Babel: an amazing library that has the superpower of reading your JavaScript and rewriting it to older JavaScript that’s compatible with older browsers. And this is seriously important! Because if JavaScript comes out with a new feature, we do not want to wait 10 years for all of the browsers to support it! Babel solves this: you can use brand new language features and it compiles it to boring, traditional code.

But… wait. How is Babel deciding which browsers our site needs to support? Different sites need to support different browsers… and so, in theory, Babel should be able to rewrite the code differently for different sites. For example, if you need to support super old browsers, you probably need to rewrite const to var. But if all of your users are awesome… like our SymfonyCasts users… and all use new browsers, then you don’t need to rewrite this. In general, converting new code to old code makes your JavaScript larger, so avoiding unnecessary changes is a good thing.

Rewriting CSS for Older Browsers?

Let’s answer the question of «how» we can control Babel by talking about something completely different: CSS. Babel does not rewrite CSS. But, if you think about it, it would sorta make sense.

For example, if you’re using a border-radius and need to support older browsers, you need to add some vendor prefixes, like -webkit-border-radius. You can see one we added manually down here: we have box-shadow, but we also have -webkit-box-shadow to make it work in some older browsers… which we might not even need, depending on what browsers we decide we need to support:

Anyways, forgetting about Webpack and Babel for a minute, in the CSS world, you do not need to add these vendor prefixes by hand. Nope! There’s a wonderful library that can do it for you called autoprefixer. You write code correctly — like using box-shadow — tell it which browsers you need to support, and it adds the vendor prefixes for you.

Enabling PostCSS

Because that sounds amazing… let’s add it! In webpack.config.js, anywhere, but how about below .enableSassLoader(), add .enablePostCssLoader():

PostCSS is a library that allows you to run things at the «end» of your CSS being processed. And it’s the easiest way to integrate autoprefixer.

Next, because we just changed our webpack.config.js file, go restart Encore:

Hey! This is familiar! Just like when we enabled Sass, this requires us to install a few things. Copy the command, go to your open terminal and run that!

yarn add postcss-loader@^3.0.0 --dev

Ok, let’s try Encore again:

Hmm, another error! This is kinda cool: to use PostCSS, you need to create a postcss.config.js file. Encore walks you through that process and sets it up to use autoprefixer to start. Copy that, go to the root of your project, create the postcss.config.js file and paste:

Ok, hit Control + C and try that again:

Sheesh! One last error. PostCSS is probably the most involved thing to get running. This error isn’t as obvious:

loading PostCSS plugin failed: Cannot find module autoprefixer

We know what that word «module» means! It’s trying to find that library. We told PostCSS to use autoprefixer, but that doesn’t exist in our project yet. Run:

yarn add autoprefixer --dev

And now try Encore.

No errors! So… it’s probably working? Let’s see it in action next and learn how we can tell PostCSS and Babel exactly which browsers we need to support.

This tutorial works great with Symfony5!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "aws/aws-sdk-php": "^3.87", // 3.91.4
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.1
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.9.0
        "league/flysystem-aws-s3-v3": "^1.0", // 1.0.22
        "league/flysystem-cached-adapter": "^1.0", // 1.0.9
        "liip/imagine-bundle": "^2.1", // 2.1.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.1.0
        "oneup/flysystem-bundle": "^3.0", // 3.0.3
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "sensio/framework-extra-bundle": "^5.1", // v5.3.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.2.5
        "symfony/console": "^4.0", // v4.2.5
        "symfony/flex": "^1.9", // v1.17.6
        "symfony/form": "^4.0", // v4.2.5
        "symfony/framework-bundle": "^4.0", // v4.2.5
        "symfony/orm-pack": "^1.0", // v1.0.6
        "symfony/security-bundle": "^4.0", // v4.2.5
        "symfony/serializer-pack": "^1.0", // v1.0.2
        "symfony/twig-bundle": "^4.0", // v4.2.5
        "symfony/validator": "^4.0", // v4.2.5
        "symfony/web-server-bundle": "^4.0", // v4.2.5
        "symfony/webpack-encore-bundle": "^1.4", // v1.5.0
        "symfony/yaml": "^4.0", // v4.2.5
        "twig/extensions": "^1.5" // v1.5.4
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.1.0
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.2.5
        "symfony/dotenv": "^4.0", // v4.2.5
        "symfony/maker-bundle": "^1.0", // v1.11.5
        "symfony/monolog-bundle": "^3.0", // v3.3.1
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.2.5
        "symfony/profiler-pack": "^1.0", // v1.0.4
        "symfony/var-dumper": "^3.3|^4.0" // v4.2.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.27.0", // 0.27.0
        "autocomplete.js": "^0.36.0",
        "autoprefixer": "^9.5.1", // 9.5.1
        "bootstrap": "^4.3.1", // 4.3.1
        "core-js": "^3.0.0", // 3.0.1
        "dropzone": "^5.5.1", // 5.5.1
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.4.0", // 3.4.0
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0", // 3.0.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.1", // 7.3.1
        "sortablejs": "^1.8.4", // 1.8.4
        "webpack-notifier": "^1.6.0" // 1.7.0
    }
}

Simon Myles
free
asked 1 year ago

Expected behavior

I expected it to work

Actual behavior

Failed to compile.

./node_modules/mdbvue/lib/css/mdb.min.css (./node_modules/@vue/cli-service/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/@vue/cli-service/node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/mdbvue/lib/css/mdb.min.css)
Module build failed (from ./node_modules/@vue/cli-service/node_modules/postcss-loader/src/index.js):
Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Require stack:
- /app/noop.js

(@/app/node_modules/mdbvue/package.json)
    at load (/app/node_modules/@vue/cli-service/node_modules/postcss-load-config/src/plugins.js:28:11)
    at /app/node_modules/@vue/cli-service/node_modules/postcss-load-config/src/plugins.js:53:16
    at Array.map (<anonymous>)
    at plugins (/app/node_modules/@vue/cli-service/node_modules/postcss-load-config/src/plugins.js:52:8)
    at processResult (/app/node_modules/@vue/cli-service/node_modules/postcss-load-config/src/index.js:33:14)
    at /app/node_modules/@vue/cli-service/node_modules/postcss-load-config/src/index.js:94:14

Resources (screenshots, code snippets etc.)

I just bought the full pro advanced Vue version to gain advantages over the free version.

However, I have battled to get this to work out the box.

Running via docker (same setup as other projects and that I used on the free version), the docker image build as follows [and here: https://gist.github.com/MarkCenturion/325d4f86daf6e62442257d919d33be02]

# Docker image extension of node image to solve the "too many files" error in the watcher during serve development runs
# sudo docker build -t markh/npm-file-watch:latest .

FROM node:16.3.0-alpine3.13
LABEL maintainer="Mark Hewitt <mark.hewitt@centurionsolutions.com.au>"

# attempt to fix the Cypress 1281 error, didn't help, needed to update Vue e2e Cypress
RUN mkdir /root/.cache
RUN chmod a+rwx /root/.cache

# for MDB pro toolkit - need python2
RUN apk add --no-cache python2

RUN echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
RUN echo "fs.inotify.max_user_instances=512" >> /etc/sysctl.conf

Image is run via:

# docker-compose.yml

# allow running composer / npm from shell against a version of PHP/Node not installed on the
# host server, useful when for example dev/testing against newer PHP versions using docker
# to run the web server, but want to run composer directly from the terminal and no from inside
# the docker container itself (just a convinence feature)

# keep this file in the aplication root directory not the Docker directory

version: '3'
services:
  composer:
    image: composer:2.1.1
    environment:
      - COMPOSER_CACHE_DIR=/app/.cache/composer
    volumes:
      - .:/app
    restart: never
  npm:
    image: markh/npm-file-watch:latest
    volumes:
      - .:/app
    network_mode: host
    restart: never
    working_dir: /app
    entrypoint: npm


sudo /usr/local/bin/docker-compose run npm install
sudo /usr/local/bin/docker-compose run npm start

The install did not work well, Cypress was old (has the 1281 issue, unable to write to /root/.cache/Cypress), also node-sass (node-gyp) was outdated and build failed.

I had to (not sure if this causes the issue) update some of the packages:

...
  "devDependencies": {
...
    "@vue/cli-plugin-e2e-cypress": "^4.5.13",
...
    "node-sass": "^6.0.1",
...
  },
...

It finally installed, running npm run start however generates the error above?

Any ideas (also wondering a little why this did not install right out the box, given it was a paid for pro package, unless it is the new Node version causing issues)?