Search code examples
reactjstypescriptherokustorybookreact-typescript

Cannot find module '@storybook/react' or its corresponding type declarations. On Heroku

I'm having in issue when my app gets deployed on heroku with the next message.

enter image description here

My app is running on typescript/react that I want to deploy to Heroku. I am using storybook/react in my application.

This is my tsconfig.json file

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "downlevelIteration": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src/**/*"
  ]
}

The structure of my project is:

- public
- src
   - components
     - (In here I have all the imports to storybook)
  - connectors
  - hooks
  - layout
  - state
  - theme
  - utils

I have storybook/react in devDependencies:

 "devDependencies": {
    "@storybook/addon-actions": "^6.3.1",
    "@storybook/addon-essentials": "^6.3.1",
    "@storybook/addon-links": "^6.3.1",
    "@storybook/node-logger": "^6.3.1",
    "@storybook/preset-create-react-app": "^3.1.6",
    "@storybook/react": "^6.3.8",
    "@types/node": "^16.7.13",
    "@types/react-router-dom": "^5.1.7",
    "colors": "^1.4.0",
    "create-react-component-folder": "^0.3.7",
    "husky": "^7.0.1",
    "prettier": "^2.3.2",
    "yargs": "^17.0.1"
  }

I also have this too in my dependencies object in package.json:

"@types/jest": "^26.0.23",
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.8",

I don't know what I have wrong. The worst thing is that if I run the app locally it works but on Heroku it just breaks. Any idea of that this could be? Thanks!

Solution

  • I just checked Heroku's Documentation and says that devDependencies are stripped out before deployment. I think it's because the devDependencies are only used to build and if I remember correctly Storybook is used at runtime not compilation. So, just moving it from devDependencies, to dependencies should do the trick.

     {
  "dependencies": {
    "@storybook/addon-actions": "^6.3.1",
    "@storybook/addon-essentials": "^6.3.1",
    "@storybook/addon-links": "^6.3.1",
    "@storybook/node-logger": "^6.3.1",
    "@storybook/preset-create-react-app": "^3.1.6",
    "@storybook/react": "^6.3.8",
  }
}

    This post discusses whether React is a devDependency or dependency. Maybe it will help :)