Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Svelte with addon-viewport throws TypeError #9852

Closed
KhaledPendleton opened this issue Feb 13, 2020 · 3 comments
Closed

Svelte with addon-viewport throws TypeError #9852

KhaledPendleton opened this issue Feb 13, 2020 · 3 comments

Comments

@KhaledPendleton
Copy link

The Rundown
Trying to run Storybook results in the error listed below. Upon further research I found that in the file node_modules/@storybook/svelte/dist/client/preview/globals.js a string with the value of "svelte" is trying to be assigned to the property STORYBOOK_ENV on the non-existent window property on _global (Code included below for clarity). Setting window equal to an empty object does stop the error from occurring BUT then the Storybook webpage no longer loads.

I followed the tutorial for @storybook/addon-viewport that can be found here. The tutorial is specifically for React but I figured the logic would be the same for Svelte. Has anyone else encountered this problem/ is there a fix?

// node_modules/@storybook/svelte/dist/client/preview/globals.js
"use strict";

var _global = require("global");

// _global.window === null
_global.window.STORYBOOK_ENV = 'svelte';

My code

// .storybook/main.js
const { addParameters } = require('@storybook/svelte');
const newViewports = {
         iPhone11Pro: {
		name: 'Apple iPhone 11 Pro',
		styles: { width: '375px', height: '812px' },
		type: 'mobile'
	},
	iPhone11ProMax: {
		name: 'Apple iPhone 11 Pro Max',
		styles: { width: '414px', height: '896px' },
		type: 'mobile'
	},
};

addParameters({
	viewport: {
		viewports: { ...newViewports }
	}
});

module.exports = {
	stories: ['../src/components/**/*.stories.js'],
	addons: [
		'@storybook/addon-actions',
		'@storybook/addon-links',
		'@storybook/addon-viewport/register'
	]
};

The error

TypeError: Cannot set property 'STORYBOOK_ENV' of undefined
ERR!     at Object.<anonymous> (/Users/khaled/Sites/clients/bdc/node_modules/@storybook/svelte/dist/client/preview/globals.js:5:30)
ERR!     at Module._compile (internal/modules/cjs/loader.js:971:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:822:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:730:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:864:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/khaled/Sites/clients/bdc/node_modules/@storybook/svelte/dist/client/preview/index.js:12:1)
ERR!     at Module._compile (internal/modules/cjs/loader.js:971:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:822:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:730:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:864:19)
ERR!     at require (internal/modules/cjs/helpers.js:74:18)
ERR!     at Object.<anonymous> (/Users/khaled/Sites/clients/bdc/node_modules/@storybook/svelte/dist/client/index.js:55:16)
ERR!     at Module._compile (internal/modules/cjs/loader.js:971:30) {
ERR!   stack: "TypeError: Cannot set property 'STORYBOOK_ENV' of undefined\n" +
ERR!     '    at Object.<anonymous> (/Users/khaled/Sites/clients/bdc/node_modules/@storybook/svelte/dist/client/preview/globals.js:5:30)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:971:30)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:822:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:730:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:864:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at Object.<anonymous> (/Users/khaled/Sites/clients/bdc/node_modules/@storybook/svelte/dist/client/preview/index.js:12:1)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:971:30)\n' +
ERR!     '    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1011:10)\n' +
ERR!     '    at Module.load (internal/modules/cjs/loader.js:822:32)\n' +
ERR!     '    at Function.Module._load (internal/modules/cjs/loader.js:730:14)\n' +
ERR!     '    at Module.require (internal/modules/cjs/loader.js:864:19)\n' +
ERR!     '    at require (internal/modules/cjs/helpers.js:74:18)\n' +
ERR!     '    at Object.<anonymous> (/Users/khaled/Sites/clients/bdc/node_modules/@storybook/svelte/dist/client/index.js:55:16)\n' +
ERR!     '    at Module._compile (internal/modules/cjs/loader.js:971:30)'
ERR! }
@KhaledPendleton
Copy link
Author

This is my first time submitting an issue, sorry in advance if I made any sort of mistakes with my post

@stale
Copy link

stale bot commented Mar 6, 2020

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

@stale stale bot added the inactive label Mar 6, 2020
@stale
Copy link

stale bot commented Apr 5, 2020

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants