Topic: Error: Loading PostCSS Plugin failed: Cannot find module 'autoprefixer'
Simon Myles asked 3 years 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)?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: MDB4 6.7.2
- Device: Docker
- Browser: Chrome
- OS: Alpine
- Provided sample code: No
- Provided link: No
Mikołaj Smoleński staff commented 3 years ago
How do you install pro package? Via gitlab link or from a .tgz file?
These are very strange issues because we don't have dependencies of the mentioned libraries. We only use them for development, but they are no longer in the production package. Here is the proof: https://git.mdbootstrap.com/mdb/vue/vu-pro/-/blob/master/package.json
Keep coding, Mikołaj from MDB
Simon Myles commented 3 years ago
Ok, heres the deal.
I download the .tgz that was in the downloads section after ordering. After checking now, I see this appears to be exactly the same as the repo https://git.mdbootstrap.com/mdb/vue/mdb4/mdb4-vue-ui-kit-pro-advanced
Cloing the repo direct I get exactly the same errors I had in the download when using the environment as specified above.
However, if I clone https://git.mdbootstrap.com/mdb/vue/mdbvue-admin-pro this works without a hitch in the same environment, so this will keep me for now.
Thank you for your help!