Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

fabiof's avatar

Error Installing Jetstream

I'm installing a fresh project with Jetstream. I'm getting the following error at 'npm run dev' and I have not been able to find any solutions to overcome it.

Node Version : 17.3 NPM Version: 8.3

Mix
  Compiled with some errors in 1.22s

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'autoprefixer'
Require stack:
- /home/x/postcss.config.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/loaders.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/ExplorerBase.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/Explorer.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/index.js
- /home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/utils.js
- /home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/index.js
- /home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/cjs.js
- /home/x/public_html/lpa-jet/node_modules/webpack/lib/ProgressPlugin.js
- /home/x/public_html/lpa-jet/node_modules/webpack/lib/index.js
- /home/x/public_html/lpa-jet/node_modules/webpack-cli/lib/webpack-cli.js
- /home/x/public_html/lpa-jet/node_modules/webpack-cli/lib/bootstrap.js
- /home/x/public_html/lpa-jet/node_modules/webpack-cli/bin/cli.js
- /home/x/public_html/lpa-jet/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/x/postcss.config.js:1:22)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at processResult (/home/x/public_html/lpa-jet/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/x/public_html/lpa-jet/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/x/public_html/lpa-jet/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/x/public_html/lpa-jet/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/x/public_html/lpa-jet/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/index.js:56:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
0 likes
23 replies
tykus's avatar

Autoprefixer should come installed with Laravel Mix. Did you npm install?

fabiof's avatar

@tykus Is it odd that the postcss.config.js is located in my user root directory instead of the project directory?

tykus's avatar

@fabiof is that package.json actually stock? Have you installed those additional dependencies?

fabiof's avatar

@tykus Yes. Stock with Jetstream additions I assume. I haven't made and changes. Here is all I'm doing.

composer create-project laravel/laravel lpa-jet
cd lpa-jet
composer require laravel/jetstream
php artisan jetstream:install livewire --teams
npm install && npm run dev
tykus's avatar

@fabiof this is the result of running those commands:

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
  },
  "devDependencies": {
    "@tailwindcss/forms": "^0.4.0",
    "@tailwindcss/typography": "^0.5.0",
    "alpinejs": "^3.0.6",
    "axios": "^0.21",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "postcss-import": "^14.0.1",
    "tailwindcss": "^3.0.0"
  }
}

You appear to have unintentionally added some other dependencies.

Replace you package.json with the JSON above; delete package-lock.json and node_modules/ and re-run npm install && npm run dev

fabiof's avatar

@tykus Ah. You're correct I tried a couple things to fix which added those, but running your version produced the same errors. I also deleted everything and started from scratch with the same result.

tykus's avatar

@fabiof a completely new project?? Really??

I also deleted everything and started from scratch with the same result.

Is it the exact same error message as before?

fabiof's avatar

@tykus Slightly different but generally the same.

✖ Mix
  Compiled with some errors in 1.37s

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
Error: Cannot find module 'autoprefixer'
Require stack:
- /home/x/postcss.config.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/loaders.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/ExplorerBase.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/Explorer.js
- /home/x/public_html/lpa-jet/node_modules/cosmiconfig/dist/index.js
- /home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/utils.js
- /home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/index.js
- /home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/cjs.js
- /home/x/public_html/lpa-jet/node_modules/webpack/lib/ProgressPlugin.js
- /home/x/public_html/lpa-jet/node_modules/webpack/lib/index.js
- /home/x/public_html/lpa-jet/node_modules/webpack-cli/lib/webpack-cli.js
- /home/x/public_html/lpa-jet/node_modules/webpack-cli/lib/bootstrap.js
- /home/x/public_html/lpa-jet/node_modules/webpack-cli/bin/cli.js
- /home/x/public_html/lpa-jet/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/x/postcss.config.js:1:22)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at processResult (/home/x/public_html/lpa-jet/node_modules/webpack/lib/NormalModule.js:751:19)
    at /home/x/public_html/lpa-jet/node_modules/webpack/lib/NormalModule.js:853:5
    at /home/x/public_html/lpa-jet/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/x/public_html/lpa-jet/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/x/public_html/lpa-jet/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/home/x/public_html/lpa-jet/node_modules/postcss-loader/dist/index.js:56:7)

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors
tykus's avatar

@fabiof there is no problem with those dependencies.

npm 8.3.0
node 17.2.0
fabiof's avatar

Still stock...

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "axios": "^0.21",
        "laravel-mix": "^6.0.39",
        "lodash": "^4.17.19",
        "postcss": "^8.4.5",
        "postcss-import": "^14.0.1"
    },
    "dependencies": {
        "autoprefixer": "^9.8.8",
        "latest-version": "^6.0.0",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
    }
}
Tray2's avatar

I just ran the exact same commands as you did without any issues what so ever.

My setup on my Mac

  • php 8.0.1
  • Laravel 8.77.1
  • Node 15.16.0
  • npm 8.3.0
fabiof's avatar

@Tray2 Using Node 15 gave a whole other set of errors.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/acorn
npm ERR!   acorn@"^7.0.0" from [email protected]
npm ERR!   node_modules/acorn-node
npm ERR!     acorn-node@"^1.6.1" from [email protected]
npm ERR!     node_modules/detective
npm ERR!       detective@"^5.2.0" from [email protected]
npm ERR!       node_modules/tailwindcss
npm ERR!         dev tailwindcss@"^3.0.0" from the root project
npm ERR!         2 more (@tailwindcss/forms, @tailwindcss/typography)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional acorn@"^8.5.0" from [email protected]
npm ERR! node_modules/terser
npm ERR!   terser@"^5.9.0" from [email protected]
npm ERR!   node_modules/laravel-mix
npm ERR!     dev laravel-mix@"^6.0.6" from the root project
npm ERR!   terser@"^5.7.2" from [email protected]
npm ERR!   node_modules/terser-webpack-plugin
npm ERR!     terser-webpack-plugin@"^5.2.4" from [email protected]
npm ERR!     node_modules/laravel-mix
npm ERR!       dev laravel-mix@"^6.0.6" from the root project
npm ERR!     1 more (webpack)
Tray2's avatar

@fabiof What OS are you running and which versions ofd php, Laravel, node and npm are you using?

Tray2's avatar

@fabiof I will try setting up a virtual machine with centos 7 and see if I get the same issue.

Tray2's avatar

@fabiof I just installed a fresh CentOS 7 virtual machine and installed php 7.4 and node 17.3.0 and followed the steps you do. It worked without any issues at all.

It seems that you have something that somewhere interferes with node.

fabiof's avatar
fabiof
OP
Best Answer
Level 1

I did some more digging this morning. Looks like I had a stray composer.json in my home directory. I deleted that and if finally ran with out error. Thank you all for your help!

adamparusel's avatar

I had the same error on my local machine. I could fix this after I installed Laravel Sail and executed the command inside the Docker container: sail npm install && sail npm run dev.

Please or to participate in this conversation.