storybook: 3.3.6: ERROR in ./node_modules/@storybook/addon-knobs/src/react/index.js Module parse failed: Unexpected token (25:9)

Issue details

When updating from 3.3.5 to 3.3.6, this error appears:

ERROR in ./node_modules/@storybook/addon-knobs/src/react/index.js
Module parse failed: Unexpected token (25:9)
You may need an appropriate loader to handle this file type.
|   const initialContent = getStory(context);
|   const props = { context, storyFn: getStory, channel, knobStore, initialContent };
|   return <WrapStory {...props} />;
| };
|
 @ ./node_modules/@storybook/addon-knobs/dist/register.js 3:13-29
 @ ./node_modules/@storybook/addon-knobs/register.js
 @ ./conf/storybook/addons.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./conf/storybook/addons.js ./node_modules/@storybook/react/dist/client/manager/index.js

It seems to be related to the src folder being exposed, via https://github.com/storybooks/storybook/pull/2678.

When rm -rf node_modules/@storybook/addon-knobs/src/ this fixes the problem. Strangely none of the other add-ons seem affected:

cat conf/storybook/addons.js
import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-options/register';
import '@storybook/addon-viewport/register';

Steps to reproduce

just start storybook

Please specify which version of Storybook and optionally any affected addons that you’re running

@storybook/react 3.3.6

├─ @storybook/addon-actions@3.3.6
├─ @storybook/addon-knobs@3.3.6
├─ @storybook/addon-links@3.3.6
├─ @storybook/addon-options@3.3.6
├─ @storybook/addon-viewport@3.3.6

via yarn list | grep @storybook

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 31 (23 by maintainers)

Most upvoted comments

So I managed to create a repository to reproduce this issue: https://github.com/strothj/storybook-issue-2704

I believe the issue is caused when the Webpack resolve module setting is overridden: https://webpack.js.org/configuration/resolve/#resolve-modules

If you set modules to [“node_modules”, “src”] then you’re telling Webpack to try resolve the module name react in the current directory, then work its way up. The knobs directory has a directory src with a matching package react.

I think the proper way to override this setting in a custom Webpack config would be something like this:

config.resolve.modules = ["node_modules", path.resolve(__dirname, "../src")];

+30

strothj on Jan 13, 2018

Oh nevermind, it isn’t configured to transpile node_modules anyway. I think we should just revert all the jsnext:main fields for now

I think that would be good, then at least we wouldn’t break existing behaviour.

Unfortunately, it kinda is, but only in the sense that you need babel-core as dev dependency (we moved it to peers for compatibility with different babel versions)

I think that is unfortunate, it makes the assumption that people using storybook will use babel. That is definitely not always the case. Also, this babel would need to be configured, right? How would a consumer with no babel in the rest of the codebase configure such a babel? By inheriting loaders from the default webpack config? In any case, I think this needs some documentation for upgraders from 3.2 to 3.3.x.

joscha on Jan 10, 2018

making src absolute seems to fix it. I suppose it comes from https://webpack.js.org/configuration/resolve/#resolve-modules where it says:

Absolute and relative paths can both be used, but be aware that they will behave a bit differently.

so I think it would just be a problem for upgraders where it previously worked by accident (e.g. we never intended to have src picked up in any subdir).

joscha on Jan 16, 2018

Yes, you definitely should use an absolute path for this option

Hypnosphi on Jan 13, 2018