Receiving "Error: Can't find stylesheet to import." error when upgrading from react-md v1 to v2 in a CRA app.

[Drew-Daniels]

I am getting an error message of: Error: Can't find stylesheet to import. when I upgrade my create-react-app project's react-md version from v1 to v2.

My goal is to fully upgrade react-md to v5, but I am getting stuck on the step to upgrade to v2.

Our project has the following dependencies:

"devDependencies": {
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.6.0",
    "enzyme-to-json": "^3.3.4",
    "moment-timezone": "^0.5.16",
    "msw": "^1.0.1",
    "prettier": "^2.7.0",
    "sass": "^1.57.0"
  },
  "dependencies": {
    "airbrake-js": "^1.6.4",
    "antd": "3.20.1",
    "apollo-cache-inmemory": "^1.4.3",
    "apollo-client": "^2.4.13",
    "apollo-link": "^1.2.2",
    "apollo-link-context": "^1.0.8",
    "apollo-link-error": "^1.0.9",
    "apollo-link-http": "^1.5.4",
    "axios": "^1.3.3",
    "classnames": "^2.2.5",
    "cross-fetch": "^3.0.1",
    "graphql": "0.13.0",
    "graphql-tag": "^2.10.1",
    "history": "^4.7.2",
    "immutability-helper": "^3.1.1",
    "inflection": "^2.0.1",
    "libphonenumber-js": "^1.7.8",
    "lodash": "^4.17.4",
    "moment": "^2.20.1",
    "nanoid": "3.1.3",
    "npm-run-all": "^4.1.2",
    "prop-types": "^15.6.0",
    "qs": "^6.9.4",
    "rc-dropdown": "^2.1.0",
    "rc-menu": "^9.8.2",
    "react": "^16.3.0",
    "react-apollo": "^2.5.1",
    "react-custom-properties": "^1.2.0",
    "react-datetime": "^3.2.0",
    "react-dom": "^16.3.0",
    "react-input-mask": "^2.0.4",
    "react-linkify": "^1.0.0-alpha",
    "react-md": "^2.0.0",
    "react-modal": "^3.1.11",
    "react-player": "^2.11.2",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "2.0.3",
    "react-sizeme": "^3.0.2",
    "react-textarea-autosize": "^8.4.0",
    "recharts": "^2.4.1",
    "redux": "^4.2.1",
    "redux-thunk": "^2.2.0",
    "uuid": "^9.0.0"
  },

My environment:

• package manager: yarn 1.22.19
• node: 14.19.0

When I upgrade from react-md ^1.2.9 to ^2.0.0 and run yarn start, I get the following error:

Error: Can't find stylesheet to import.
  ╷
1 │ @import '@react-md/alert/dist/scss/mixins';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/react-md/dist/scss/_react-md.scss 1:9  @use
  src/App/app.scss 2:1                                root stylesheet

app.scss looks like this:

@use "variables";
@use 'node_modules/react-md/dist/scss/react-md';

$md-btn-include-icon: false;
$md-light-theme: true;

@include react-md.react-md-typography;

... rules ...

I have been looking over the migration guide notes from v1 to v2, but I cannot seem to find anything that has any information related to this problem.

As mentioned in this MR, I have tried the following, but none of them work (for me).

• using yarn
• upgrading to react v17
• installing all scoped packages separately

Additionally, I have tried:

• replacing node_modules/ with ~ in my imports like this:

  
  // from
  @use 'node_modules/react-md/dist/scss/react-md';

// to @use '~react-md/dist/scss/react-md';

- upgrading `react-scripts` to `^3.0.0`

** Desktop **
- OS: OS X Ventura 13.2.1 (22D68)
- Browser: Chrome
- Version 110.0.5481.177 (Official Build) (x86_64) 

[mlaursen]

It's been awhile since I've looked at the v1 -> v2 migration stuff so my memory is a bit hazy.

Would switching the react-md import to:

-@use "react-md/dist/scss/react-md";
+@use "~react-md/dist/react-md";

Looking back at the v2 website, it looks like the dist/scss folder is for non-webpack node-sass usage so it might fix it?

Another option might be using the SASS_PATH(?) environment variable to include node_modules. https://github.com/facebook/create-react-app/issues/4494#issuecomment-442326592

SASS_PATH=node_modules:src

I can't remember which version of create-react-app that was added in though.

[Drew-Daniels]

Found out what the issue was, and it was entirely unrelated to react-md!

For some reason - this project had been manually transpiling our scss to css with dart-sass instead of letting react-scripts/node-sass handle this:

  "build-css": "sass src:src --load-path=src/ --load-path=. --quiet",
  "watch-css": "npm run build-css && sass src:src --load-path=src/ --load-path=. --watch --quiet",
  "start-js": "PORT=3001 REACT_APP_MOCK=none react-scripts start",
  "start": "npm-run-all -p watch-css start-js",

Additionally, much of our component files had been manually importing these manually processed .css files instead of .scss files.

Now, I have updated our start script to the following:

"start": "PORT=3001 REACT_APP_MOCK=none react-scripts start",

... and updated our styling imports to import .scss files instead of .css and everything works.

I did also have to add this as well to our .env file:

SASS_PATH=node_modules:src

Thanks for the help @mlaursen .