Broken build with webpack v4.29.x

kakadiadarpan commented 5 years ago

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. (/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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

lonyele commented 5 years ago

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

kakadiadarpan commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@kakadiadarpan Did you that versions? Any updates?

neardark commented 5 years ago

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

JosephScript commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

kakadiadarpan commented 5 years ago

@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

kristofdombi commented 5 years ago

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

kakadiadarpan commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

Moving to yarn from npm fixed the issue for me

/cc @tuchk4

didiermargarido commented 5 years ago

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 commented 5 years ago

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

didiermargarido commented 5 years ago

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 webpack@4.29.6 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 commented 5 years ago

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 webpack@4.29.6 at the moment, along with @storybook/* ^5.0.5

didiermargarido commented 5 years ago

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

hitendramalviya commented 5 years ago

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 commented 5 years ago

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.

tuchk4 / storybook-readme

Broken build with webpack v4.29.x #134