Error import tailwindcss scss with react-scripts@5.0.0

[lorenzo-bonatti]

index.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "~@syncfusion/ej2-base/styles/tailwind";
@import "~@syncfusion/ej2-react-inputs/styles/tailwind";

Console error

ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/index.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: Cannot read property 'type' of undefined

.env

SASS_PATH=./node_modules/@syncfusion

Package.json

{
  "name": "hello-wrold",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@syncfusion/ej2-react-inputs": "^19.3.53",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.0.3",
    "@types/node": "^16.11.15",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.11",
    "node-sass": "^7.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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.4.0",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.7"
  }
}

[GOKUL3897]

Hi @lorenzo3ds,

We are unable to reproduce the reported issue. It seems that you have not included the SCSS file correctly in your project. We suggest you follow the below documentation steps to run the working project. For your reference, we have created a small project in the button component along with the tailwind theme.

Documentation: https://www.syncfusion.com/kb/12383/how-to-use-scss-in-syncfusion-react-component

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ej2-react-grid1322336517

Please get back to us if you have any concerns.

Regards,
Gokul

[lorenzo-bonatti]

Hi and thanks for the reply.

Unfortunately, the example does not match the reported bug.
In fact, the Tailwind library has not been included, but only the scss have been included. This is a simple css import ...
The problem occurs when I include the tailwind scss of your packages with the tailwind installed
Install Tailwind CSS with Create React App

The scss files have been included as documentation and everything is visible as reported in the bug.
I tried again with a new project and the problem remained.

I am waiting for a reply
Thank you

Regards,
Lorenzo

[GOKUL3897]

Hi @lorenzo3ds,

Sorry for the delay caused,

We have used the online Google Roboto font link for our material theme. In order to download the Google Roboto was not available in the System. In the tailwind plugin, the online font was processed which causes an issue. So, we are suggesting you use the below utility to resolve the reported issue at our end. Please follow the below steps to add our utility.

Step 1: Create a new js file and name it as remove-robto.js. Then add the following scripts to that file.

varfs = require('fs');

varcontent = fs.readFileSync('./node_modules/@syncfusion/ej2-base/styles/material.css','utf-8');
content = content.replace('@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);','');
fs.writeFileSync('./node_modules/@syncfusion/ej2-base/styles/material.css',content);
console.log('Roboto online reference removed');

Step 2: The following commands should be added to the scripts in the package.json file.

"postinstall": "node remove-robto.js"

Step 3: Now run the “npm install” command to install the dependent package.

Step 4: Run the “npm run dev” command to run the application in the browser.

Every time while installing the packages the Google Roboto font link will be removed automatically from the CSS file. So, we can see there is no issue occurring in it. And please find the following sample for more information.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/updated-203045787

Please let us know if you need further assistance.

Regards,
Gokul

[syncsiva]

This issue has been resolved and has not had any activity for 2 weeks. Closing for housekeeping purposes.