search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.35k stars 1.27k forks source link

npm build fails with Tailwindcss 2.1.2 + daisyui 0.27.2 + postCSS 8 #43

Closed ajatib closed 3 years ago

ajatib commented 3 years ago

I'm having this error trying to build a React app to deploy:

image

Using this package.json:

{
  "name": "app_mobile",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@headlessui/react": "^0.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "daisyui": "^0.27.2",

    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.5",

    "react": "^17.0.2",
    "react-dom": "^17.0.2",

    "react-scripts": "^2.0.5",

    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "run-p watch:css start:react",
    "start:react": "react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css",
    "watch:css": "postcss -w src/assets/css/tailwind.css -o src/assets/css/main.css"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "eslint-plugin-react": "^7.21.5",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.2.15",
    "postcss-cli": "^8.3.1",
    "redux-devtools-extension": "^2.13.8",
    "tailwindcss": "^2.1.2"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

My project was working perfectly before I add Daisyui and postcss 8 Any idea?

saadeghi commented 3 years ago

@ajatib This looks like a problem with your PostCSS config.
Please make sure you have required plugins in your postcss.config.js file. Your postcss.config.js config must look something like this:

module.exports = {
  plugins: [
      require('postcss-import'),
      require('postcss-nested'),
      require('tailwindcss'),
  ]
}

Also, I'm not sure why you installed postcss as a dev dependency, but the plugins are normal dependencies.

ajatib commented 3 years ago

Thanks for your quick response @saadeghi.

postcss is there becouse tailwindcss npm install -D tailwindcss@latest postcss@latest autoprefixer@latest but I can change it.

My postcss.config.js is the following:

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        require('postcss-import'),
        tailwindcss('./tailwind.config.js'),
        require('postcss-nested'), // or require('postcss-nesting')
        require('autoprefixer'),        
    ],
};

I will test reordering the plugins

ajatib commented 3 years ago

Same results:

Creating an optimized production build...
Failed to compile.

./src/assets/css/main.css
ParserError: Syntax Error at line: 1, column 19

(full package.json)

{
  "name": "app_mobile",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@headlessui/react": "^0.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "daisyui": "^0.27.2",
    "date-fns": "^2.16.1",
    "date-fns-tz": "^1.1.3",
    "downshift": "^6.1.0",
    "final-form": "^4.20.1",
    "final-form-arrays": "^3.0.2",
    "final-form-calculate": "^1.3.2",
    "final-form-set-field-data": "^1.0.2",
    "geonames.js": "^3.0.3",
    "i18next": "^19.8.5",
    "i18next-browser-languagedetector": "^6.0.1",
    "i18next-http-backend": "^1.1.0",
    "match-sorter": "^6.1.0",
    "postcss-import": "^14.0.2",
    "postcss-nested": "^5.0.5",
    "postcss": "^8.2.15",
    "postcss-cli": "^8.3.1",
    "public-ip": "^4.0.3",
    "react": "^17.0.2",
    "react-device-detect": "^1.15.0",
    "react-dom": "^17.0.2",
    "react-final-form": "^6.5.2",
    "react-final-form-arrays": "^3.1.3",
    "react-final-form-listeners": "^1.0.3",
    "react-i18next": "^11.8.5",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^2.0.5",
    "react-simple-pull-to-refresh": "^1.2.3",
    "react-social-login": "^3.4.13",
    "react-toastify": "^6.1.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "sweetalert2": "^10.15.5",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "run-p watch:css start:react",
    "start:react": "react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css",
    "watch:css": "postcss -w src/assets/css/tailwind.css -o src/assets/css/main.css"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "eslint-plugin-react": "^7.21.5",
    "npm-run-all": "^4.1.5",
    "redux-devtools-extension": "^2.13.8",
    "tailwindcss": "^2.1.2"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

postcss.config.js

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        require('postcss-import'),
        tailwindcss('./tailwind.config.js'),
        require('postcss-nested')({
            "bubble": [
              "screen"
            ]
        }),
        require('autoprefixer'),        
    ],
};

tailwind.css 

@tailwind base;
@tailwind components;

:root {
  --p: 196 100% 46%;
  --pf: 196 98% 40%;
  --pc: 0 0% 100%;
  --s: 15 98% 54%;
  --sf: 15 84% 44%;
  --sc: 0 0% 100%;
  --a: 190 100% 26%;
  --af: 190 100% 17%;
  --ac: 0 0% 100%;
  --n: 210 14% 32%;
  --nf: 210 12% 21%;
  --nc: 0 0% 100%;
  --b1: 0 0% 100%;
  --b2: 210 16% 95%;
  --b3: 206 9% 84%;
  --bc: 210 14% 32%;
  --in: 196 90% 32%;
  --su: 196 100% 46%;
  --wa: 39 100% 50%;
  --er: 0 78% 63%;

  --rounded-box: 1rem; /* border-radius for cards and other big elements */
  --rounded-btn: 0.5rem; /* border-radius for buttons and similar elements */
  --rounded-badge: 9999px; /* border-radius for badge and other small elements */

  --animation-btn: 0.25s; /* bounce animation time for button */
  --animation-input: .4s; /* bounce animation time for checkbox, toggle, etc */

  --padding-card: 2rem; /* default card-body padding */

  --btn-text-case: uppercase; /* default text case for buttons */
  --navbar-padding: .5rem; /* default padding for navbar */
  --border-btn: 1px; /* default border size for button */
  --focus-ring: 2px; /* focus ring size for button and inputs */
  --focus-ring-offset: 2px; /* focus ring offset size for button and inputs */
}

h1 {
  @apply font-bold mt-0;
  font-size: 22px;
  font-family: 'Roboto Slab', serif;
}
h2 {
  @apply font-normal mt-0;
  font-size: 20px;
  font-family: 'Roboto Slab', serif;
}
h3 {
  @apply font-normal mt-0;
  font-size: 18px;
  font-family: 'Roboto Slab', serif;
}
h4 {
  @apply font-medium mt-0;
  font-size: 16px;
  font-family: 'Roboto Slab', serif;
}
h5 {
  @apply font-normal mt-0;
  font-size: 14px;
  font-family: 'Roboto Slab', serif;
}
h6 {
  @apply font-normal mt-0;
  font-size: 12px;
  font-family: 'Roboto', serif;
}

p {
  font-size: 14px;
  font-family: 'Roboto', serif;
}

.bg-primary .badge {
  color: hsl(var(--nc));
}

.header-layout-small {
  @apply flex items-center justify-between w-full p-3 h-16 bg-primary text-primary-content;
}

.downshift-options {
  @apply rounded-md input absolute z-10 left-0 right-0 top-16 shadow-lg 
}

.downshift-options-focus {
  @apply bg-gray-200
}

.downshift-options-selected {
  @apply font-bold
}

.invalid-feedback {
  @apply mt-1 text-xs text-red-500
}
.invalid-tooltip {
  @apply absolute z-10 hidden w-4 font-normal leading-normal text-white rounded p-2 bg-red-700
}
.is-invalid {
  @apply border border-red-500
}
.is-invalid:focus {
  @apply border border-red-500 ring
}

.txt {
  @apply text-base font-light leading-relaxed mt-0 mb-4
}
.txt-sm {
  @apply font-normal leading-normal mt-0 mb-4 
}
.txt-lg {
  @apply text-lg font-light leading-relaxed mt-6 mb-4
}

.card {
  @apply rounded-xl
}

.card.white {
  @apply bg-white shadow-lg
}

.scrolling-wrapper {
  @apply flex flex-nowrap   overflow-x-auto
}
  /* Hide scrollbar for IE, Edge and Firefox
  scrollbar-width: none;  /* Firefox */  

  /* Hide scrollbar for Chrome, Safari and Opera */

.scrolling-wrapper::-webkit-scrollbar {
  display: none;
}

.scrolling-wrapper .card {
  justify-content: center;
  flex: 0 0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.slots-times {
  height: calc(100vh - 348px);
}

@tailwind utilities;
saadeghi commented 3 years ago

Can I see this file please? because this is the file that is reported for syntax error:

./src/assets/css/main.css

I'm closing this issue because it's not a problem with DaisyUI, but I'd be happy to help about this if I can.
Also, here are some repos with similar packages that might help:
https://github.com/saadeghi/daisyui-starter https://github.com/saadeghi/nextjs-daisyui-headlessui

ajatib commented 3 years ago

It's a big file now main.txt

Thanks for any help!

saadeghi commented 3 years ago

well, this CSS looks fine. There isn't even an error in this file which means PostCSS is working fine.
I'm not sure... maybe a css loader (webpack, babel, etc...) is causing the issue. Maybe some dependencies are not compatible with each other.

I tried to install the packages from your package.json and it wasn't successful:

npm install ``` npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! Found: @babel/core@7.2.2 npm ERR! node_modules/@babel/core npm ERR! @babel/core@"7.2.2" from react-scripts@2.1.8 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"^2.0.5" from the root project npm ERR! @babel/core@"^7.1.6" from @svgr/webpack@4.1.0 npm ERR! node_modules/@svgr/webpack npm ERR! @svgr/webpack@"4.1.0" from react-scripts@2.1.8 npm ERR! node_modules/react-scripts npm ERR! react-scripts@"^2.0.5" from the root project npm ERR! 8 more (babel-core, babel-loader, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer @babel/core@"^7.13.0" from @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.13.12 npm ERR! node_modules/@babel/preset-env/node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining npm ERR! @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@"^7.13.12" from @babel/preset-env@7.14.2 npm ERR! node_modules/@babel/preset-env npm ERR! @babel/preset-env@"^7.1.6" from @svgr/webpack@4.1.0 npm ERR! node_modules/@svgr/webpack npm ERR! @svgr/webpack@"4.1.0" from react-scripts@2.1.8 npm ERR! node_modules/react-scripts npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! ```
npm install --legacy-peer-deps ``` npm WARN deprecated fsevents@1.2.4: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated har-validator@5.1.5: this library is no longer supported npm WARN deprecated hoek@4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated topo@2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated joi@11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial). npm WARN deprecated core-js@2.6.12: core-js@<3.3 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. npm WARN deprecated kleur@2.0.2: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit for migration path(s). npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142 npm WARN deprecated left-pad@1.3.0: use String.prototype.padStart() npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor. npm WARN deprecated html-webpack-plugin@4.0.0-alpha.2: please switch to a stable version npm WARN deprecated core-js@2.6.4: core-js@<3.3 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. npm WARN deprecated babel-eslint@9.0.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates. npm WARN deprecated eslint-loader@2.1.1: This loader has been deprecated. Please use eslint-webpack-plugin npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning ERR_SOCKET_TIMEOUT: request to https://registry.npmjs.org/rc failed, reason: Socket timeout npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation. npm ERR! cb() never called! npm ERR! This is an error with npm itself. Please report this error at: npm ERR! ```
ajatib commented 3 years ago

Ufff, it's a much deeper error than I was thinking. Thanks for your help!

ajatib commented 3 years ago

I could solve the issue starting with a fresh new project, installing Tailwind & Daisy (always checking if it can be build), adding my code and so... possitive side effect: I'm getting a smaller build package! Thanks @saadeghi for your help and congrat for Daisyui, it's a great tool !

saadeghi commented 3 years ago

@ajatib Good to hear 👍
Thanks!

sbrannstrom commented 3 years ago

We're having the same issue with Angular 12 + Angular Material Design + Ionic Framework + Tailwind (added through ng add ngx-tailwind).

We get almost the same error:

[ng] ModuleBuildError: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/postcss-loader/dist/cjs.js):
[ng] ParserError: Syntax Error at line: 1, column 26

although there's an error higher up:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.3.5, but postcss-preset-env uses 7.0.36. Perhaps this is the source of the error below.

The problem is that @angular-devkit/build-angular depends on PostCSS version 8.3.5 and postcss-preset-env 7.0.36 which seems to cause the issue.

We don't have any postcss.config.js file since we're on Angular 12 and it shouldn't be needed (Tailwind CSS works fine without Daisyui).

Anyone knows how to fix this?