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

[kakadiadarpan]

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 [email protected] 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. (/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)

[tuchk4]

There is dynamic import is using in codeThemeCSS.js but it should not cause an error.

• Do you have additional webpack configuration?
• try to remove all node_modules and install it again

[kakadiadarpan]

I do have an additional webpack configuration, but it should not be crashing it:

new webpack.NormalModuleReplacementPlugin(
    /my-constants\/index\.js/,
    __dirname + '/my-constants/override-index.js'
)

I'll try to remove my node_modules and see if that works. Thanks for the quick reply! 😄

[tuchk4]

Seems it is related to https://github.com/webpack/webpack/issues/8656

In this case build also should be broken at my env. Will check it twice right now

[tuchk4]

Make some tests with the latest version of storybook-readme and @storybook/react and still can not reproduce

[lonyele]

@kakadiadarpan I also can't reproduce it on my windows and ubuntu with simple CRA

[kakadiadarpan]

• Removed node_modules/ and installed packages again, that didn't help.
• Tried removing custom webpack config, that also didn't help.

This is the list of all the storybook packages I'm using:

{
    "@storybook/addon-a11y": "5.0.0",
    "@storybook/addon-backgrounds": "5.0.0",
    "@storybook/addon-info": "5.0.0",
    "@storybook/addon-knobs": "5.0.0",
    "@storybook/addon-viewport": "5.0.0",
    "@storybook/addons": "5.0.0",
    "@storybook/core-events": "5.0.0",
    "@storybook/react": "5.0.0",
    "@storybook/theming": "5.0.0",
    "storybook-readme": "5.0.0",
}

Not sure if I'm doing anything wrong. 😕

[tuchk4]

Try this versions

{
    "@storybook/addon-a11y": "^5.0.3",
    "@storybook/addon-backgrounds": "^5.0.3",
    "@storybook/addon-info": "^5.0.3",
    "@storybook/addon-knobs": "^5.0.3",
    "@storybook/addon-viewport": "^5.0.3",
    "@storybook/addons": "^5.0.3",
    "@storybook/core-events": "^5.0.3",
    "@storybook/react": "^5.0.3",
    "@storybook/theming": "^5.0.3",
    "storybook-readme": "^5.0.0",
}

[tuchk4]

@kakadiadarpan Did you that versions? Any updates?

[neardark]

I receive the same error. Downgrading to webpack 4.28.2 resolved the issue for me.

[JosephScript]

I'm also receiving an error:

ERROR in ./node_modules/storybook-readme/styles/codeThemeCss.js 21:2
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
 @ ./node_modules/storybook-readme/components/ReadmeContent/index.js 36:43-79
 @ ./node_modules/storybook-readme/index.js
 @ ./stories/index.js
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

My start script is "start": "start-storybook -p 8080 -c .storybook"

I'm using the following modules:

    "@storybook/addon-actions": "^5.0.3",
    "@storybook/addon-options": "^5.0.3",
    "@storybook/react": "^5.0.3",
    "storybook-readme": "^5.0.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"

If you need more information let me know.

---

EDIT: Downgrading also worked for me. Hopefully webpack releases a fix!

[tuchk4]

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

Will try to find workaround until webpack issue is not resolved :(

[kakadiadarpan]

Thank you for the update @tuchk4! I'll check if I can downgrade my webpack version for now.

[kakadiadarpan]

@tuchk4 Seems it's an npm issue as per Tobias's comment. Should work fine with yarn as confirmed in this comment

I'll use yarn and check if it fixes this issue for me

[kristof0425]

FYI: If you'd like to stick with npm and downgrading webpack is an option for you, [email protected] works fine with dynamic imports.

[kakadiadarpan]

@kristof0425 Thanks, but I don't want to downgrade a dependency when I can just switch to yarn and that fixes the problem without downgrading a package. (And I personally like yarn more than npm anyways 😅)

Also, I don't know if this issue would be fixed anytime soon as per this discussion

[didiermargarido]

I've downgrade the webpack to v4.28.4 and i get the same error.
For storybook i have those packages:

{
  "@storybook/theming": "^5.0.5",
  "@storybook/addon-backgrounds": "^5.0.5",
  "@storybook/addon-actions": "^5.0.5",
  "@storybook/addon-knobs": "^5.0.5",
  "@storybook/addon-viewport": "^5.0.5",
  "@storybook/addons": "^5.0.5",
  "@storybook/vue": "^5.0.5,
   storybook-readme": "^5.0.1"
}

I've comment these lines in storybook-readme/codeThemeCss.js package (just for testing) and it works

  import("./codeThemes/".concat(codeTheme, ".css.js")).then(function (t) {
    insert({
      styles: t.default
    });
  });

I can't find a way to solved that

[kakadiadarpan]

Moving to yarn from npm fixed the issue for me

/cc @tuchk4

[didiermargarido]

Moving to yarn from npm fixed the issue for me

/cc @tuchk4

Thanks @tuchk4 but unfortunately i have to work with npm.
There isn't another way to fix that?

[kakadiadarpan]

I'm not sure if there's another way. Downgrading the webpack version worked for others though

[didiermargarido]

I solved my problem adding those extra packages acorn (javascript parsers):

{
   "acorn": "^6.1.1",
   "acorn-dynamic-import": "^4.0.0"
}

It also work with [email protected] and those storybook versions:

{
   "@storybook/theming": "^5.0.5",
   "@storybook/addon-actions": "^5.0.5",
   "@storybook/addon-knobs": "^5.0.5",
   "@storybook/addon-viewport": "^5.0.5",
   "@storybook/addons": "^5.0.5",
   "@storybook/vue": "^5.0.5",
   "storybook-readme": "^5.0.1"
}

Others informations:
Node v10.15.3
NPM v6.9.0

Thank you anyway @kakadiadarpan

[hitendramalviya]

Hello @didiermargarido, for me even adding both packages also end-up with no luck? Anything extra I need to do apart-from downgrading the webpack, I am on [email protected] at the moment, along with @storybook/* ^5.0.5

[didiermargarido]

Hi @hitendramalviya .
Im also working with [email protected] and [email protected] and after adding the acorn packages the build worked without errors.
Have you tried to downgrade your webpack package to 4.28.4?

[hitendramalviya]

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

[tuchk4]

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.