When I try to use Parcel to build a production version of a React app that works fine in development mode, I get "Cannot find module 'sass'"

Question

I've built a simple React/Redux app and am using Parcel for the bundler. It works fine in development mode, that is, using the script

"dev": "parcel ./src/index.html",

but when I tried to do

"build": "parcel build ./src/index.html",

I got the following error

/Users/abc/Documents/Projects/sandbox/smart/src/styles/main.scss: Cannot find module 'sass' from '/Users/abc/Documents/Projects/sandbox/smart/src/styles'
    at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:97:35
    at processDirs (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:244:39)
    at isdir (/Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:251:32)
    at /Users/abc/Documents/Projects/sandbox/smart/node_modules/resolve/lib/async.js:23:69
    at FSReqWrap.oncomplete (fs.js:152:21)

This is the first time I've tried to build an app using Parcel and I'm lost. I'm using node-sass to import my sass files directly -- perhaps this has something to do with that.

The referenced file (main.scss) is referenced in App.js like this

import "../../styles/main.scss";

and is the first sass file to be included (App is loaded into the DOM like this in index.js:

const store = configureStore()
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
)

This is running under Node 11.15. My package.json follows -- any hints or help much appreciated!

{
  "name": "friender",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "jest": {
    "setupFiles": ["jest-localstorage-mock"]
  },
  "scripts": {
    "dev": "parcel ./src/index.html",
    "build": "parcel build ./src/index.html",
    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
    "test": "jest"
  },
  "prettier": {
    "semi": false
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.6.0",
    "@babel/core": "^7.6.0",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/preset-env": "^7.6.0",
    "@types/jest": "^24.0.18",
    "babel-eslint": "^10.0.3",
    "babel-preset-react": "^7.0.0-beta.3",
    "eslint": "^6.2.2",
    "eslint-config-prettier": "^6.1.0",
    "jest": "^24.9.0",
    "jest-localstorage-mock": "^2.4.0",
    "parcel-bundler": "^1.12.3",
    "prettier": "^1.18.2"
  },
  "dependencies": {
    "@emotion/babel-preset-css-prop": "^10.0.14",
    "@emotion/core": "^10.0.16",
    "@emotion/styled": "^10.0.15",
    "@fortawesome/fontawesome-svg-core": "^1.2.0-7",
    "@fortawesome/free-solid-svg-icons": "^5.11.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "axios": "^0.19.0",
    "bulma": "^0.7.5",
    "eslint-plugin-jest": "^22.17.0",
    "eslint-plugin-react": "^7.14.3",
    "immer": "^4.0.0",
    "node-sass": "^4.12.0",
    "prop-types": "^15.7.2",
    "react": "16.x",
    "react-detect-offline": "^2.4.0",
    "react-dom": "^16.9.0",
    "react-fontawesome": "^1.6.1",
    "react-modal": "^3.10.1",
    "react-redux": "^7.1.1",
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  }
}

Answer 1

Try instead per the documentation for SCSS and error Cannot find module 'sass' use module sass instead of node-sass:

npm install -D sass

The documentation mentions being able to use node-sass, but there are several active issues with node-sass. Module sass may help resolve the error and allow you use SCSS in your application.

Hopefully that helps!