Storybook: Missing Viewport toolbar item

[mauricioblum]

Describe the bug
The viewport toolbar item is missing in the toolbar in version 6.0.7

To Reproduce
Steps to reproduce the behavior:

1. Start a new create-react-app project
2. Run npx sb init
3. Start storybook
4. See error

Screenshots

Code snippets

package.json

{
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "date-fns": "^2.15.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.63.2",
    "react-native-switch": "^2.0.0",
    "react-native-web": "^0.13.7",
    "react-number-format": "^4.4.1",
    "react-scripts": "3.4.3",
    "styled-components": "^5.1.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@storybook/addon-actions": "^6.0.7",
    "@storybook/addon-essentials": "^6.0.7",
    "@storybook/addon-links": "^6.0.7",
    "@storybook/node-logger": "^6.0.7",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.7",
    "@types/react-native": "^0.63.8",
    "@types/styled-components": "^5.1.2",
    "babel-loader": "^8.1.0",
    "react-is": "^16.13.1"
  }
}

main.js

Note: Webpack alias to view react-native components in the browser

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
  webpackFinal: async config => {
    config.resolve.alias = {
      'react-native': 'react-native-web',
    };
    return config;
  },
}

System:

Environment Info:

  System:
    OS: Windows 10 10.0.19041
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
  Binaries:
    Node: 12.14.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.13.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.125
    Edge: Spartan (44.19041.1.0), Chromium (84.0.522.59)
  npmPackages:
    @storybook/addon-actions: ^6.0.7 => 6.0.7
    @storybook/addon-essentials: ^6.0.7 => 6.0.7
    @storybook/addon-links: ^6.0.7 => 6.0.7
    @storybook/node-logger: ^6.0.7 => 6.0.7
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.7 => 6.0.7

[shilman]

what other changes did you make?

  webpackFinal: async config => {
    config.resolve.alias = {
      'react-native': 'react-native-web',
    };
    return config;
  },

this isn't part of the default install. and when i follow your steps i see the viewports addon. do you have a repro?

[mauricioblum]

what other changes did you make?

  webpackFinal: async config => {
    config.resolve.alias = {
      'react-native': 'react-native-web',
    };
    return config;
  },

this isn't part of the default install. and when i follow your steps i see the viewports addon. do you have a repro?

Here is an untouched repo after bootstrapping with CRA and sb init afterwards. Nothing else. In my end, no viewport.

https://github.com/mauricioblum/viewport-missing-repro

[shilman]

Working for me. Perhaps it's a windows thing. Or an Edge thing? @tooppaaa mind taking a quick look?

[mauricioblum]

Working for me. Perhaps it's a windows thing. Or an Edge thing? @tooppaaa mind taking a quick look?

Can confirm something is off in Windows. Just cloned the same repo in WSL and it worked!
Also, when I tried to run a build generated in Windows, it stays loading forever and nothing happens.

[tooppaaa]

Error preset { Error: Cannot find module '@storybook\addon-viewport\preset'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
    at Function.resolve (internal/modules/cjs/helpers.js:33:19)
    at \viewport-missing-repro-master\viewport-missing-repro-master\node_modules\@storybook\addon-es
sentials\dist\index.js:79:22

[shilman]

Hmm @tooppaaa it should catch the error and continue to /register:

https://github.com/storybookjs/storybook/blob/master/addons/essentials/src/index.ts#L49-L57

Any ideas?

[tooppaaa]

It did catch, I only added logs to see is there were something silent going on.

I'll investigate (or buy a mac, not sure yet 🙈)

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.14 containing PR #12148 that references this issue. Upgrade today to try it out!

Closing this issue. Please re-open if you think there's still more to do.