CRA app using using @semantic-ui-react/craco-less failing on deployment build

[acarlie]

CRA app using using @semantic-ui-react/craco-less failing on deployment build to Heroku.

The CRA app runs locally, but fails when attempting to deploy to Heroku. I receive the error: Error: Cannot find module '@semantic-ui-react/craco-less' even though that package is listed as a dev dependency in my client package.json.

I followed the theming guide here: https://react.semantic-ui.com/theming/ to set up my CRA app (using craco without ejecting).

My client package JSON:

{
  "name": "mern-app-coie",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001/",
  "dependencies": {
    "aphrodite": "^2.4.0",
    "axios": "^0.19.0",
    "craco": "0.0.3",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.2.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1",
    "universal-cookie": "^4.0.2",
    "react-semantic-ui-range": "^0.7.0"
  },
  "devDependencies": {
    "@craco/craco": "^5.6.2",
    "@semantic-ui-react/craco-less": "^1.1.0",
    "semantic-ui-less": "^2.4.1",
    "semantic-ui-react": "^0.88.1"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Deployment Error:

internal/modules/cjs/loader.js:775
    throw err;
    ^
Error: Cannot find module '@semantic-ui-react/craco-less'
Require stack:
- /tmp/build_50434c05420ea55acb8c4050005eb234/client/craco.config.js
- /tmp/build_50434c05420ea55acb8c4050005eb234/client/node_modules/@craco/craco/lib/config.js
- /tmp/build_50434c05420ea55acb8c4050005eb234/client/node_modules/@craco/craco/scripts/build.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)
    at Function.Module._load (internal/modules/cjs/loader.js:677:27)
    at Module.require (internal/modules/cjs/loader.js:830:19)
    at require (internal/modules/cjs/helpers.js:68:18)
    at Object.<anonymous> (/tmp/build_50434c05420ea55acb8c4050005eb234/client/craco.config.js:2:25)
    at Module._compile (internal/modules/cjs/loader.js:936:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
    at Module.load (internal/modules/cjs/loader.js:790:32)
    at Function.Module._load (internal/modules/cjs/loader.js:703:12)
    at Module.require (internal/modules/cjs/loader.js:830:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/tmp/build_50434c05420ea55acb8c4050005eb234/client/craco.config.js',
    '/tmp/build_50434c05420ea55acb8c4050005eb234/client/node_modules/@craco/craco/lib/config.js',
    '/tmp/build_50434c05420ea55acb8c4050005eb234/client/node_modules/@craco/craco/scripts/build.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-food-lookup-client@0.1.0 build: `craco build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mern-food-lookup-client@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.m0EVP/_logs/2019-11-20T15_01_36_954Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-food-lookup@1.0.0 build: `cd client && npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mern-food-lookup@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.m0EVP/_logs/2019-11-20T15_01_36_968Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-food-lookup@1.0.0 heroku-postbuild: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mern-food-lookup@1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

Did you try to move @semantic-ui-react/craco-less to production dependencies? I don't have any experience with Heroku, but it can be a case...

[acarlie]

I tried, then it has trouble finding the semantic.less file imported to the index.js. It still works on my local with that change, just not on deploy to Heroku.

> craco build
       
       Creating an optimized production build...
       Failed to compile.
       
       ./src/index.js
       Cannot find module: 'semantic-ui-less/semantic.less'. Make sure this package is installed.
       
       You can install this package by running: npm install semantic-ui-less/semantic.less.
       
       
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-food-lookup-client@0.1.0 build: `craco build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mern-food-lookup-client@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.BifN1/_logs/2019-11-20T21_31_07_191Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-food-lookup@1.0.0 build: `cd client && npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mern-food-lookup@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.BifN1/_logs/2019-11-20T21_31_07_203Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mern-food-lookup@1.0.0 heroku-postbuild: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the mern-food-lookup@1.0.0 heroku-postbuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.BifN1/_logs/2019-11-20T21_31_07_216Z-debug.log

[layershifter]

And if you will move semantic-ui-less to production deps, too? Will it work?

[acarlie]

That did help, the build finally succeeded, but the app is now erroring out.

2019-11-20T22:51:35.172720+00:00 app[web.1]: [1]     at overrideWebpackDev (/app/client/node_modules/@craco/craco/lib/features/webpack/override.js:11:36)
2019-11-20T22:51:35.172722+00:00 app[web.1]: [1]     at Object.<anonymous> (/app/client/node_modules/@craco/craco/scripts/start.js:25:1)
2019-11-20T22:51:35.172723+00:00 app[web.1]: [1]     at Module._compile (internal/modules/cjs/loader.js:936:30)
2019-11-20T22:51:35.172725+00:00 app[web.1]: [1]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:947:10)
2019-11-20T22:51:35.172727+00:00 app[web.1]: [1]     at Module.load (internal/modules/cjs/loader.js:790:32)
2019-11-20T22:51:35.199206+00:00 app[web.1]: [1] npm run client exited with code 1
2019-11-20T22:51:35.284735+00:00 heroku[web.1]: State changed from starting to crashed
2019-11-20T22:51:35.263136+00:00 heroku[web.1]: Process exited with status 1
2019-11-20T22:51:36.757707+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=testing-mern-2019.herokuapp.com request_id=90e506ef-0f47-410a-b337-c067ed56941c fwd="24.211.136.94" dyno= connect= service= status=503 bytes= protocol=https
2019-11-20T22:51:37.629076+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=testing-mern-2019.herokuapp.com request_id=93cc92dd-7672-4002-a1f3-3fdf691a9323 fwd="24.211.136.94" dyno= connect= service= status=503 bytes= protocol=https

[layershifter]

As I see this issue is not related to our tools 🤔 And I am not sure that someone will be able to provide you a proper answer there, or at least I 😥 Because as I mentioned before I don't have any experience with Heroku.

So, I propose you to move this issue as a question to StackOverflow. If you will find a solution please post it there 🙏

[acarlie]

Thanks for your help!