storybook-readme: Broken build with webpack v4.29.x

Hello, I really love the work you have done on this package and it has been really helpful.

I’m not sure if I missed anything in the migration but I have a broken build at the moment. Would be great if someone could check the details below and help.

I’m using storybook-readme@5.0.0 with storybook v5.

// addons.js
import 'storybook-readme/register';
// config.js
import { addDecorator } from '@storybook/react';
import { addReadme } from 'storybook-readme';
addDecorator(addReadme);
// component.stories.js
import { storiesOf } from '@storybook/react';
import React from 'react';
import Readme1 from './readme-1`;
import Readme2 from './readme-2`;
import MyComponent from './component';

storiesOf('Component 1', module)
    .addParameters({
        readme: {
            content: [Readme1, Readme2]
        }
    })
    .add('basic', () => <MyComponent id="id" />);

WARN FATAL broken build!, will close the process, WARN Fix the error below and restart storybook.

ModuleParseError: Module parse failed: ‘import’ and ‘export’ may only appear at the top level (21:2) You may need an appropriate loader to handle this file type. | } |

import(“./codeThemes/”.concat(codeTheme, “.css.js”)).then(function (t) { | insert({ | styles: t.default at handleParseError (/node_modules/webpack/lib/NormalModule.js:447:19) at doBuild.err (/node_modules/webpack/lib/NormalModule.js:481:5) at runLoaders (/node_modules/webpack/lib/NormalModule.js:342:12) at /node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at Array.<anonymous> (/node_modules/loader-runner/lib/LoaderRunner.js:205:4) at Storage.finished (/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16) at provider (/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9) at /node_modules/graceful-fs/graceful-fs.js:90:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:511:3)

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 1
  • Comments: 24 (14 by maintainers)

Commits related to this issue

Most upvoted comments

Seems this is webpack related issue. https://github.com/webpack/webpack/issues/8656

Will try to find workaround until webpack issue is not resolved 😦

published 5.0.3 that should fix this issue. Dynamic import was used for code theme lazy loading. Now all code themes are bundled: https://github.com/tuchk4/storybook-readme/blob/f699e99b2ce808268390aa687882bbdcf3e4151b/packages/storybook-readme/src/styles/codeThemeCss.js#L5-L21. So this affects on bundle size.

When webpack fix https://github.com/webpack/webpack/issues/8656 I will rollback this.

I have to gone through a list of related issues on webpack & found my answer as npm bug, but one of listed workaround (deleting package-lock.json file & installing packages again) did the trick for me.

https://github.com/webpack/webpack/issues/8656#issuecomment-456713191