web-stories-wp
web-stories-wp copied to clipboard
Remove workaround fix for storybook
Task Description
This is a follow-up to #6304
In #5792 storybook was upgraded to version 6.4. However, webpack was choking when running storybook because the project is ESM but there is a plugin that, when built, uses require
because it is compiled to CJS.
The issue is further explored in this thread:
- If you specify your project as { "type": "module" }, webpack doesn't want to see require() any more
- The entry point(s) we create on your behalf as SB (generated from virtualModuleStory.template.js, which was compiled to CJS) makes use of require()
- In 6.3, as that file was "put" in ./.storybook, if you put a package.json in there declaring a non "module" package, WP is happy again.
To fix this, workaround code was added into main.cjs
which replaces the file extensions on the plugins that are getting compiled to CJS.
Once storybook 6.5 is released and the workaround code is not needed anymore, remove the code.
Apparently the release is slated for end of April: https://github.com/storybookjs/storybook/issues/16797
Yay!!
I've been working on #10788 this morning as well. ~Looks like HMR isn't broken 🥳~ but the log warnings seem to be related to the same code that was added in ./.storybook/main.cjs
to prevent storybook from crashing
Trying to verify that upgrading locally to the alpha version fixes both of these tickets. Then when the new version is released, we can be certain that both issues will be fixed.
Edit: it is broken
Confirmed that the alpha release will fix this issue. However, it seems that the logs in #10788 aren't fixed by the upgrade. Will keep digging.
Note: While upgrading I ran into these errors:
ModuleDependencyError: The requested module './story' contains conflicting star
exports for the name '__namedExportsOrder' with the previous requested module './fonts'
ModuleDependencyError: The requested module './utils' contains conflicting star
exports for the name '__namedExportsOrder' with the previous requested module './constants'
ModuleDependencyError: The requested module './settings' contains conflicting star
exports for the name '__namedExportsOrder' with the previous requested module './textConstants'
ModuleDependencyError: The requested module './wpAdmin' contains conflicting star
exports for the name '__namedExportsOrder' with the previous requested module './textConstants'
For some reason, the compilation is failing due to some *
imports. Replacing the imports in the following files worked for me:
// .storybook/stories/playground/story-editor/api/index.js
export { getFonts } from './fonts'; // export * from './fonts';
export { getMedia } from './media'; // export * from './media';
export { saveStoryById } from './story'; // export * from './story';
// packages/wp-dashboard/src/constants/index.js
export { SUCCESS, ERRORS } from './textConstants'; // export * from './textConstants';
export {
EDITOR_SETTINGS_ROUTE,
LEFT_RAIL_SECONDARY_NAVIGATION,
AD_NETWORK_TYPE,
ARCHIVE_TYPE
} from './settings'; // export * from './settings';
export {
TOOLBAR_HEIGHT,
MENU_WIDTH,
MENU_FOLDED_WIDTH
} from './wpAdmin'; // export * from './wpAdmin';
// packages/fonts/src/index.js
export { CURATED_FONT_NAMES } from './constants'; // export * from './constants';
export { getFontCSS, getGoogleFontURL } from './utils'; // export * from './utils';
Also, assets weren't getting loaded in properly
Adding some info here in case these errors are seen when upgrading.