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
- fix: temporary fix for #134 and #164 — committed to tuchk4/storybook-readme by tuchk4 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 😦
published
5.0.3that 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