Styling seems to be completely missing

[JacobPotter]

Styling seems to be completely missing:

I have no styling applied in my project at this time to ensure there wasn't styling conflict. Seems no styling is loading at all

I have tried version 2.1.1 and the most current version 3.23.3

Webpack threw these warnings on the current version. 3.23.3

WARNING in ../../node_modules/hast-util-select/node_modules/nth-check/lib/esm/compile.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/jacob.potter/GitHub/TSLearningMonorepo/node_modules/hast-util-select/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/compile.ts' file: Error: ENOENT: no such file or directory, open '/Users/jacob.potter/GitHub/TSLearningMonorepo/node_modules/hast-util-select/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/compile.ts'

WARNING in ../../node_modules/hast-util-select/node_modules/nth-check/lib/esm/index.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/jacob.potter/GitHub/TSLearningMonorepo/node_modules/hast-util-select/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/jacob.potter/GitHub/TSLearningMonorepo/node_modules/hast-util-select/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/index.ts'

WARNING in ../../node_modules/hast-util-select/node_modules/nth-check/lib/esm/parse.js
Module Warning (from ../../node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/jacob.potter/GitHub/TSLearningMonorepo/node_modules/hast-util-select/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/parse.ts' file: Error: ENOENT: no such file or directory, open '/Users/jacob.potter/GitHub/TSLearningMonorepo/node_modules/hast-util-select/node_modules/nth-check/lib/esm/https:/raw.githubusercontent.com/fb55/nth-check/639fd2a4000b69f82350aad8c34cb43f77e483ba/src/parse.ts'

package.json

{
  "name": "learning",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "nx serve",
    "build": "nx build",
    "test": "nx test"
  },
  "private": true,
  "dependencies": {
    "@babel/parser": "^7.22.5",
    "@babel/traverse": "^7.22.5",
    "@craco/craco": "^6.4.5",
    "@emotion/react": "11.10.5",
    "@emotion/styled": "11.10.5",
    "@googlemaps/react-wrapper": "^1.1.35",
    "@monaco-editor/react": "4.5.1",
    "@mui/icons-material": "^5.10.3",
    "@mui/material": "^5.10.4",
    "@mui/styled-engine-sc": "^5.10.3",
    "@nestjs/common": "^9.2.1",
    "@nestjs/core": "^9.2.1",
    "@nestjs/platform-express": "^9.0.0",
    "@nestjs/typeorm": "^9.0.1",
    "@nrwl/next": "15.6.3",
    "@types/bcryptjs": "^2.4.2",
    "@types/connect-flash": "^0.0.37",
    "@types/cookie-parser": "^1.4.3",
    "@types/cookie-session": "^2.0.44",
    "@types/csurf": "^1.11.2",
    "@types/express-validator": "^3.0.0",
    "@types/jscodeshift": "0.7.2",
    "@types/jsonwebtoken": "^8.5.9",
    "@types/multer": "^1.4.7",
    "@types/pdfkit": "^0.12.8",
    "@types/prettier": "^2.7.3",
    "@types/react-redux": "^7.1.25",
    "@types/react-resizable": "3.0.2",
    "@uiw/react-markdown-editor": "^5.11.1",
    "@uiw/react-md-editor": "2.1.1",
    "axios": "0.21.1",
    "bcryptjs": "^2.4.3",
    "bulmaswatch": "^0.8.1",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "connect-flash": "^0.1.1",
    "connect-mongodb-session": "^3.1.1",
    "cookie-parser": "^1.4.6",
    "cookie-session": "^2.0.0",
    "core-js": "^3.6.5",
    "csurf": "^1.11.0",
    "esbuild-wasm": "0.8.27",
    "express": "^4.18.1",
    "express-session": "^1.17.3",
    "express-validator": "^6.14.2",
    "fetch": "^1.1.0",
    "google-maps": "^4.3.3",
    "jest-watch-typeahead": "0.6.5",
    "jscodeshift": "0.11.0",
    "jsonwebtoken": "^8.5.1",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "monaco-editor": "0.39.0",
    "monaco-jsx-highlighter": "^2.0.4",
    "mongoose": "^6.7.2",
    "mongoose-unique-validator": "^3.1.0",
    "multer": "^1.4.5-lts.1",
    "node-fetch": "^3.2.10",
    "nodemailer": "^6.8.0",
    "nodemailer-sendgrid-transport": "^0.2.0",
    "pdfkit": "^0.13.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-is": "18.2.0",
    "react-redux": "^8.1.0",
    "react-resizable": "3.0.4",
    "react-router-dom": "6.4.3",
    "react-scripts": "^4.0.0",
    "react-transition-group": "^4.4.5",
    "redux": "^4.2.1",
    "redux-thunk": "2.3.0",
    "reflect-metadata": "^0.1.13",
    "regenerator-runtime": "0.13.7",
    "request": "2.79.0",
    "rxjs": "^7.0.0",
    "sequelize": "^6.25.3",
    "sort-by": "^1.2.0",
    "sort-by-typescript": "^1.2.3",
    "sqlite3": "^5.1.4",
    "styled-components": "5.3.6",
    "tslib": "^2.3.0",
    "typeorm": "^0.3.11"
  },
  "devDependencies": {
    "@babel/core": "7.12.13",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "7.12.13",
    "@nestjs/schematics": "^9.0.0",
    "@nestjs/testing": "^9.0.0",
    "@nrwl/cli": "15.6.3",
    "@nrwl/cypress": "15.6.3",
    "@nrwl/esbuild": "15.6.3",
    "@nrwl/eslint-plugin-nx": "15.6.3",
    "@nrwl/express": "15.6.3",
    "@nrwl/jest": "15.6.3",
    "@nrwl/js": "15.6.3",
    "@nrwl/linter": "15.6.3",
    "@nrwl/nest": "15.6.3",
    "@nrwl/node": "15.6.3",
    "@nrwl/nx-cloud": "16.0.5",
    "@nrwl/react": "15.6.3",
    "@nrwl/storybook": "15.6.3",
    "@nrwl/web": "15.6.3",
    "@nrwl/webpack": "15.6.3",
    "@nrwl/workspace": "15.6.3",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@storybook/addon-docs": "^6.5.10",
    "@storybook/addon-essentials": "6.5.15",
    "@storybook/builder-webpack5": "6.5.15",
    "@storybook/core-server": "6.5.15",
    "@storybook/manager-webpack5": "6.5.15",
    "@storybook/react": "6.5.15",
    "@svgr/webpack": "^6.1.2",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "13.4.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/connect-mongodb-session": "^2.4.4",
    "@types/express": "4.17.14",
    "@types/express-session": "1.17.0",
    "@types/google.maps": "^3.49.2",
    "@types/jest": "28.1.1",
    "@types/node": "18.11.9",
    "@types/nodemailer": "^6.4.6",
    "@types/react": "18.0.25",
    "@types/react-dom": "18.0.9",
    "@types/react-is": "17.0.3",
    "@types/react-router-dom": "^5.3.3",
    "@types/react-transition-group": "^4.4.5",
    "@types/styled-components": "5.1.26",
    "@types/supertest": "^2.0.12",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "5.48.0",
    "@typescript-eslint/parser": "5.48.0",
    "babel-jest": "28.1.1",
    "babel-loader": "8.1.0",
    "babel-plugin-styled-components": "1.10.7",
    "cypress": "^10.2.0",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-cypress": "^2.10.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jsx-a11y": "6.6.1",
    "eslint-plugin-react": "7.31.11",
    "eslint-plugin-react-hooks": "4.6.0",
    "fs-constants": "^1.0.0",
    "jest": "28.1.1",
    "jest-environment-jsdom": "28.1.1",
    "jest-fetch-mock": "^3.0.3",
    "jest-mock-axios": "^4.6.1",
    "nodemon": "^2.0.19",
    "nx": "15.6.3",
    "prettier": "^2.8.8",
    "react-error-overlay": "6.0.9",
    "react-refresh": "^0.10.0",
    "react-test-renderer": "18.2.0",
    "storybook-addon-react-docgen": "^1.2.42",
    "supertest": "^6.2.4",
    "ts-jest": "28.0.5",
    "ts-node": "10.9.1",
    "typescript": "4.8.4",
    "url-loader": "^4.1.1",
    "uuid": "^8.3.2",
    "whatwg-fetch": "^3.6.2"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  }
}

[JacobPotter]

Upon further investigation, I found the css in the node_modules for the package:

copying and importing this seems to work as a workaround, but I think there is an issue with webpack processing it.

[jaywcjlove]

I can't help you, the build tool loads esm to automatically load CSS and package it, if only cjs can be loaded then you need to manually load the .css file. Most tools, such as create-react-app and kkt, support esm to load .css files.

@JacobPotter