luckyframework / lucky

A full-featured Crystal web framework that catches bugs for you, runs incredibly fast, and helps you write code that lasts.
https://luckyframework.org
MIT License
2.57k stars 156 forks source link

two postcss plugins are required by laravel-mix, but not installed #1660

Closed djuber closed 2 years ago

djuber commented 2 years ago

Describe the bug

When starting a new project using the skeleton app (lucky init), script/setup fails with a mix compile error.

On lucky master (reports v0.29) When I create a new project (full) via lucky init And I run script/setup After yarn install completes, yarn run mix fails with an error:

▸ Compiling assets
  yarn run v1.22.17
  $ yarn run mix
  $ /path/to/project/node_modules/.bin/mix
  ℹ Compiling Mix
  ✔ Mix: Compiled with some errors in 643.79ms
  ERROR in ./src/css/app.scss
  Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
  ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
  Loading PostCSS "postcss-smart-import" plugin failed: Cannot find module 'postcss-smart-import'
  Require stack:
  - /path/to/project/node_modules/postcss-loader/dist/utils.js
  - /path/to/project/node_modules/postcss-loader/dist/index.js
  - /path/to/project/node_modules/postcss-loader/dist/cjs.js
  - /path/to/project/node_modules/webpack/lib/ProgressPlugin.js
  - /path/to/project/node_modules/webpack/lib/index.js
  - /path/to/project/node_modules/webpack-cli/lib/webpack-cli.js
  - /path/to/project/node_modules/webpack-cli/lib/bootstrap.js
  - /path/to/project/node_modules/webpack-cli/bin/cli.js
  - /path/to/project/node_modules/webpack/bin/webpack.js

  (@/path/to/project/node_modules/modern-normalize/modern-normalize.css)
  at Object.emitError (/path/to/project/node_modules/webpack/lib/NormalModule.js:603:6)
  at getPostcssOptions (/path/to/project/node_modules/postcss-loader/dist/utils.js:225:19)
  at Object.loader (/path/to/project/node_modules/postcss-loader/dist/index.js:65:42)

To Reproduce Steps to reproduce the behavior:

Following the guide at https://luckyframework.org/guides/getting-started/starting-project#start-the-server

lucky init
# choose full and a project name
cd project_name
script/setup

Expected behavior

Successful compilation of assets

yarn run v1.22.17
$ yarn run mix
$ /path/to/project/node_modules/.bin/mix

✔ Mix
  Compiled successfully in 775.48ms

   Laravel Mix v6.0.41   

✔ Compiled Successfully in 744ms

Screenshots/code If applicable, add screenshots/code samples to help explain your problem.

Versions (please complete the following information):

Additional context

As a work-around, I was able to get this to load successfully by specifying the two needed libraries in the devDependencies section of package.json and re-running yarn install, yarn dev. Perhaps one of the required node libraries used to bundle these files, but stopped listing them as dependencies?

  "devDependencies": {
    "@babel/compat-data": "^7.9.0",
    "browser-sync": "^2.26.7",
    "compression-webpack-plugin": "^7.0.0",
    "laravel-mix": "^6.0.0",
    "postcss": "^8.1.0",
    "postcss-smart-import": "",
    "postcss-preset-env": "",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2"
  }

Should we add those two (they resolved to 0.7.6 and 7.3.0 for me) to the skeleton app?


Possibly an issue with mix's default settings for postcss

This issue happens also if I try to run mix in a fresh location after creating (an empty) src/css/app.scss file and copying the webpack.mix.js file from the generated project (this is probably an issue with laravel-mix and its default invocation of postcss, only showing in lucky because of the tooling).

// webpack.mix.js test case
let mix = require("laravel-mix");
let plugins = [];

mix
  // Set public path so manifest gets output here
  .setPublicPath("public")
  // SASS entry file. Uses autoprefixer automatically.
  .sass("src/css/app.scss", "css")

Same or similar error output from yarn mix (non-lucky directory) pointing at a missing plugin:

ERROR in ./src/css/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
Loading PostCSS "postcss-smart-import" plugin failed: Cannot find module 'postcss-smart-import'

Contents of package.json for this test (after installing laravel mix, yarn init; yarn add laravel-mix, accepting all defaults for yarn)

{
  "name": "pktest",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "laravel-mix": "^6.0.41"
  },
  "devDependencies": {
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.49.0",
    "sass-loader": "^12.1.0"
  }
}

I don't see anything obvious on the laravel-mix issues about this, but it does seem that either the default plugins for postcss itself, or the default postcss plugins for mix's use, are getting required (but had not been installed by yarn).

postcss-smart-import gives a deprecation warning when installing it directly:

warning postcss-smart-import@0.7.6: This project is not maintained anymore. Please use postcss-import instead.
warning postcss-smart-import > babel-runtime > core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

Putting postcss-import into the package.json in place of postcss-smart-import didn't work.

djuber commented 2 years ago

it occurs to me I should have opened this against lucky_cli (where the template is) rather than lucky.

Closing