Giters

luckyframework / lucky_cli

A Crystal command-line tool for generating new Lucky Web Applications.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

two postcss plugins are required but not installed

djuber opened this issue · comments

commented

Copy from luckyframework/lucky#1660 - which should have come here (since it's an issue with the skeleton app)

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):

  • Lucky version (check in shard.lock): v0.29
  • Crystal version (crystal --version): 1.3.2
  • OS: linux
  • node v16.13.1 (tested on v14.18.1 also, with same result).
  • yarn v1.22.17

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.

commented

Hey @djuber thanks so much for the detailed report, and sending in a PR. Sorry it's taken so long to review.

I'm actually unable to recreate the issue on either linux and mac. Using all the same versions. I was looking at the packages you mention in the PR, but the first one https://yarnpkg.com/package/postcss-smart-import shows as deprecated and no longer maintained. Is there another option for that package?

I also tried outside of Lucky using this:

// package.json
{
  "name": "pktest",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "yarn run mix"
  },
  "dependencies": {
    "modern-normalize": "^1.1.0"
  },
  "devDependencies": {
    "laravel-mix": "^6.0.0",
    "postcss": "^8.1.0",
    "resolve-url-loader": "^3.1.1",
    "sass": "^1.26.10",
    "sass-loader": "^10.0.2"
  }
}
// webpack.mix.js
let mix = require("laravel-mix");

mix.sass("app.scss", "css")
// app.scss
@import 'modern-normalize/modern-normalize.css';
body { color: red; }

Then I just ran yarn && yarn dev

✔ Compiled Successfully in 373ms
┌───────────────────────────────────────────────────────────────────────────────────────────────────┬──────────┐
│                                                                                              File │ Size     │
├───────────────────────────────────────────────────────────────────────────────────────────────────┼──────────┤
│                                                                                       css/app.css │ 4.68 KiB │
└───────────────────────────────────────────────────────────────────────────────────────────────────┴──────────┘
webpack compiled successfully
Done in 1.11s.

I asked in the community discord too to see if anyone else is able to recreate this issue. I wonder if you have something else installed on your local machine that may be causing a conflict here.

I'm actually not even seeing the smart-import as a dependency of anything. 🤔

~/Sites/yarn_test is 📦 v1.0.0 via  v16.5.0 
❯ ack "postcss-smart-import" node_modules/ | wc -l
0

I'll keep digging around and see if I can figure out why you're running in to that, and I don't. In the meantime, if you have any suggestions for an alternate way around this without included an unmaintained package, that'd be cool.

commented

I couldn't reproduce this error on mac:

script/setup

▸ Running System Check
  ✔ Done

▸ Installing node dependencies
  yarn install v1.22.17
  info No lockfile found.
  [1/4] Resolving packages...
warning browser-sync > socket.io > debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning browser-sync > socket.io > socket.io-parser > debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning browser-sync > socket.io > engine.io > debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
warning laravel-mix > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning resolve-url-loader > rework > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning resolve-url-loader > rework > css > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning resolve-url-loader > rework > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning resolve-url-loader > rework > css > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning resolve-url-loader > rework > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
  [2/4] Fetching packages...
  [3/4] Linking dependencies...
warning " > compression-webpack-plugin@7.1.2" has unmet peer dependency "webpack@^5.1.0".
warning " > laravel-mix@6.0.42" has unmet peer dependency "@babel/core@^7.15.8".
warning " > laravel-mix@6.0.42" has unmet peer dependency "@babel/plugin-proposal-object-rest-spread@^7.15.6".
warning " > laravel-mix@6.0.42" has unmet peer dependency "@babel/plugin-syntax-dynamic-import@^7.8.3".
warning " > laravel-mix@6.0.42" has unmet peer dependency "@babel/plugin-transform-runtime@^7.15.8".
warning " > laravel-mix@6.0.42" has unmet peer dependency "@babel/preset-env@^7.15.8".
warning " > laravel-mix@6.0.42" has unmet peer dependency "webpack@^5.60.0".
warning " > laravel-mix@6.0.42" has unmet peer dependency "webpack-cli@^4.9.1".
warning " > sass-loader@10.2.1" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
  [4/4] Building fresh packages...
  success Saved lockfile.
  Done in 15.98s.

▸ Compiling assets
  yarn run v1.22.17
  $ yarn run mix
  $ /Users/foo/test/node_modules/.bin/mix
  ℹ Compiling Mix


  Laravel Mix v6.0.42


  ✔ Compiled Successfully in 365ms
  ┌───────────────────────────────────┬──────────┐
  │                              File │ Size     │
  ├───────────────────────────────────┼──────────┤
  │                        /js/app.js │ 73.6 KiB │
  │                       css/app.css │ 5.37 KiB │
  └───────────────────────────────────┴──────────┘
  ✔ Mix: Compiled successfully in 386.53ms
  Done in 1.52s.
  ✔ Done

lucky dev
[OKAY] Loaded ENV .env File as KEY=VALUE Format
7:32:41 p.m. assets.1     |  yarn run v1.22.17
7:32:41 p.m. assets.1     |  $ yarn run mix watch
7:32:41 p.m. web.1        |  Beginning to watch your project
7:32:41 p.m. web.1        |  Compiling...
7:32:42 p.m. assets.1     |  $ /Users/foo/test/node_modules/.bin/mix watch
7:32:42 p.m. assets.1     |  ℹ Compiling Mix
7:32:43 p.m. assets.1     |     Laravel Mix v6.0.42
7:32:43 p.m. assets.1     |  ✔ Compiled Successfully in 389ms
7:32:43 p.m. assets.1     |  ┌───────────────────────────────────┬──────────┐
7:32:43 p.m. assets.1     |  │                              File │ Size     │
7:32:43 p.m. assets.1     |  ├───────────────────────────────────┼──────────┤
7:32:43 p.m. assets.1     |  │                        /js/app.js │ 73.6 KiB │
7:32:43 p.m. assets.1     |  │                       css/app.css │ 5.37 KiB │
7:32:43 p.m. assets.1     |  └───────────────────────────────────┴──────────┘
7:32:43 p.m. assets.1     |  ✔ Mix: Compiled successfully in 410.52ms
7:32:46 p.m. web.1        |  Done compiling
7:32:46 p.m. web.1        |  yarn run v1.22.17
commented

Thanks for the second set of eyes @jwoertink and @snadon.

Looks like it is something on my end (not sure what yet, but I was running yarn installed via nvm and it might have been interacting with existing postcss plugins?)

I created a new user, and installed yarn on the system (from the apt repository detailed here), and this issue goes away.

I'll close this (the issue is clearly with my setup, not lucky's template project) and the associated PR.

commented

Ok, sounds good! If you do happen to find a fix, feel free to update this in case anyone else comes across the same issue.