Uncaught SyntaxError: Unexpected token ':' vendors~main.iframe.bundle.js:128712

[shilman]

Originally posted by @Apoerin in #16833 (comment)

@shilman
Uncaught SyntaxError: Unexpected token ':' vendors~main.iframe.bundle.js:128712

and vendors~main.iframe.bundle.js points to this line

        { "NODE_ENV":"development","NODE_PATH":[],"STORYBOOK":"true","PUBLIC_URL":".","...  } 

full erros

DevTools failed to load source map: Could not load content for http://localhost:6006/index.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
DevTools failed to load source map: Could not load content for http://localhost:6006/react-popper-tooltip.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
vendors~main.iframe.bundle.js:128712 Uncaught SyntaxError: Unexpected token ':'
iframe.html?id=*&viewMode=story:315 POST http://localhost:6006/runtime-error 404 (Not Found)
onerror @ iframe.html?id=*&viewMode=story:315
error (async)
(anonymous) @ iframe.html?id=*&viewMode=story:309

It just doesn't render my stories, all I see - loading circle

[cevou]

I ran into the same issue. I was able to resolve it by overwriting the webpack.DefinePlugin

storybook/lib/manager-webpack4/src/presets/manager-preset.ts

Lines 114 to 117 in 2009029

	new DefinePlugin({
	...stringifyProcessEnvs(envs),
	NODE_ENV: JSON.stringify(envs.NODE_ENV),
	}) as WebpackPluginInstance,

in my custom webpack configuration.

This change causes the error: #15925

Here is a (simplified) example of what one of our dependencies is doing, which causes the same error as above in our project. (Note: none of these variables are defined in our environment)

if (process.env.SOME_VARIABLE && process.env.SOME_OTHER_VARIABLE) {
  process.env.SOME_VARIABLE = `/foo/${process.env.SOME_OTHER_VARIABLE`;
}

In vendors_main.iframe.bundle.js this is rewritten as:

if ({"NODE_ENV":"development","NODE_PATH":[],"STORYBOOK":"true","PUBLIC_URL":"."}.SOME_VARIABLE && {"NODE_ENV":"development","NODE_PATH":[],"STORYBOOK":"true","PUBLIC_URL":"."}.SOME_OTHER_VARIABLE) {
  {"NODE_ENV":"development","NODE_PATH":[],"STORYBOOK":"true","PUBLIC_URL":"."}.SOME_VARIABLE = "/foo/".concat({"NODE_ENV":"development","NODE_PATH":[],"STORYBOOK":"true","PUBLIC_URL":"."}.SOME_OTHER_VARIABLE);
}

The error occurs in the if body, as {"foo":"bar}.SOME_VARIABLE as the left part of as assignment is invalid syntax.

With version 6.3.x everything works as expected.

[edwindwalker]

This has equally broken using storybook with dotenv, which tries to do key assignment on process.env: https://github.com/motdotla/dotenv/blob/master/lib/main.js#L105

[roughpandaz]

Having essentially the same issue:

Module not found: Error: Can't resolve 'fs' in '/home/bob/repos/app/node_modules/dotenv/lib'
 @ ./node_modules/dotenv/lib/main.js 24:11-24
 @ ./node_modules/dotenv/config.js
 @ ./src/utils/env.ts
 @ ./src/utils/endpoints.ts
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js

[shilman]

Son of a gun!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.5.0-alpha.12 containing PR #17174 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

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

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.4.10 containing PR #17174 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade