builder-vite
builder-vite copied to clipboard
storybookjs
[Bug] Cannot build storybook in amplify, missing "@storybook/core-common"
Describe the bug
When running build-storybook inside amplify, the pipeline crashes with the error
Error: Cannot find module '@storybook/core-common'
ERR! Require stack:
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js
.... (fullstack trace at the end)
I have tried installing it (despite you would not need to) but then get a new error 2022-03-31T17:46:11.175Z [WARNING]: Error: [vite]: Rollup failed to resolve import "react-dom" from "node_modules/@storybook/components/dist/esm/WithTooltip-cb7d27cb.js".
It builds locally just fine however.
Steps to reproduce the behavior
Our package.json
"devDependencies": {
"@babel/core": "7.16.12",
"@fortawesome/fontawesome-svg-core": "1.2.34",
"@fortawesome/free-regular-svg-icons": "5.15.2",
"@fortawesome/free-solid-svg-icons": "5.15.2",
"@fortawesome/pro-light-svg-icons": "5.14.0",
"@fortawesome/pro-solid-svg-icons": "5.14.0",
"@fortawesome/vue-fontawesome": "3.0.0-5",
"@semantic-release/changelog": "6.0.1",
"@semantic-release/git": "10.0.1",
"@semantic-release/npm": "9.0.1",
"@storybook/addon-actions": "6.5.0-alpha.51",
"@storybook/addon-docs": "6.5.0-alpha.51",
"@storybook/addon-essentials": "6.5.0-alpha.51",
"@storybook/addon-links": "6.5.0-alpha.51",
"@storybook/builder-vite": "0.1.22",
"@storybook/core-common": "6.4.19",
"@storybook/vue3": "6.5.0-alpha.51",
"@tailwindcss/aspect-ratio": "0.4.0",
"@tailwindcss/forms": "0.4.0",
"@tailwindcss/line-clamp": "0.3.1",
"@tailwindcss/typography": "0.5.0",
"@testing-library/vue": "6.5.1",
"@vitejs/plugin-vue": "2.1.0",
"@vue/test-utils": "2.0.0-rc.18",
"autoprefixer": "10.4.2",
"babel-loader": "8.2.3",
"chromatic": "6.3.4",
"postcss": "8.4.5",
"react": "17.0.2",
"semantic-release": "19.0.2",
"tailwindcss": "3.0.15",
"typescript": "4.5.5",
"vite": "2.7.13",
"vitest": "0.7.12",
"vue": "3.2.29",
"vue-loader": "16.8.3",
"vue-tsc": "0.29.8"
}
main.js
const path = require("path");
module.exports = {
stories: ["../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-docs",
{
name: "@storybook/addon-postcss",
options: {
postcssLoaderOptions: {
implementation: require("postcss"),
},
},
},
],
framework: "@storybook/vue3",
core: {
builder: "@storybook/builder-vite",
},
async viteFinal(config, { configType }) {
return {
...config,
resolve: {
alias: [
{
find: "@",
replacement: path.resolve(__dirname, "../src"),
},
/* https://v3.vuejs.org/guide/installation.html#for-server-side-rendering */
{
find: "vue",
replacement: path.resolve(__dirname, "../node_modules/vue/dist/vue.esm-bundler.js"),
},
],
},
};
},
};
preview.js
import '../src/assets/tailwind.css'
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.js'),
name: 'oxy',
fileName: (format) => `oxy.${format}.js`
},
rollupOptions: {
external: ['vue'],
output: {
globals: {
vue: 'Vue'
}
}
}
},
});
Expected behavior
Storybook should build in amplify as well.
Environment
- OS: docker node:16.13
- Node.js version: 16.12.3
- NPM version: 8.1.2
Additional context
Full Stack Trace without @storybook/core-common installed:
2022-03-31T17:37:01.403Z [WARNING]: Error: Cannot find module '@storybook/core-common'
ERR! Require stack:
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/index.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core/server.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/vue3/dist/cjs/server/build.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/vue3/bin/build.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:746:27)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:101:18)
ERR! at Object.<anonymous> (/codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js:4:23)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:101:18)
ERR! at Object.<anonymous> (/codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/index.js:26:33)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! Error: Cannot find module '@storybook/core-common'
ERR! Require stack:
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js
ERR!
2022-03-31T17:37:01.404Z [WARNING]: - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/index.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/build-static.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/index.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core/dist/cjs/server.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/core/server.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/vue3/dist/cjs/server/build.js
ERR! - /codebuild/output/src926997390/src/oxy/node_modules/@storybook/vue3/bin/build.js
ERR! at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:746:27)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:101:18)
ERR! at Object.<anonymous> (/codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js:4:23)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12)
ERR! at Module.require (internal/modules/cjs/loader.js:974:19)
ERR! at require (internal/modules/cjs/helpers.js:101:18)
ERR! at Object.<anonymous> (/codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/index.js:26:33)
ERR! at Module._compile (internal/modules/cjs/loader.js:1085:14)
ERR! at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
ERR! at Module.load (internal/modules/cjs/loader.js:950:32)
ERR! at Function.Module._load (internal/modules/cjs/loader.js:790:12) {
ERR! code: 'MODULE_NOT_FOUND',
ERR!
2022-03-31T17:37:01.404Z [WARNING]: requireStack: [
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/transform-iframe-html.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/builder-vite/dist/index.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/utils/get-preview-builder.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/build-static.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/core-server/dist/cjs/index.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/core/dist/cjs/server.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/core/server.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/vue3/dist/cjs/server/build.js',
ERR! '/codebuild/output/src926997390/src/oxy/node_modules/@storybook/vue3/bin/build.js'
ERR! ]
ERR! }
2022-03-31T17:37:01.413Z [WARNING]: npm
2022-03-31T17:37:01.413Z [WARNING]: ERR! code ELIFECYCLE
npm ERR! errno 1
2022-03-31T17:37:01.416Z [WARNING]: npm
2022-03-31T17:37:01.416Z [WARNING]: ERR! @iu/[email protected] storybook:build: `build-storybook`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @iu/[email protected] storybook:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Full Stack Trace with @storybook/core-common installed:
2022-03-31T17:46:11.174Z [WARNING]: [vite]: Rollup failed to resolve import "react-dom" from "node_modules/@storybook/components/dist/esm/WithTooltip-cb7d27cb.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
2022-03-31T17:46:11.175Z [WARNING]: ERR!
2022-03-31T17:46:11.175Z [WARNING]: Error: [vite]: Rollup failed to resolve import "react-dom" from "node_modules/@storybook/components/dist/esm/WithTooltip-cb7d27cb.js".
ERR! This is most likely unintended because it can break your application at runtime.
ERR! If you do want to externalize this module explicitly add it to
ERR! `build.rollupOptions.external`
ERR! at onRollupWarning (/codebuild/output/src317918707/src/oxy/node_modules/vite/dist/node/chunks/dep-f5552faa.js:37915:19)
ERR! at onwarn (/codebuild/output/src317918707/src/oxy/node_modules/vite/dist/node/chunks/dep-f5552faa.js:37693:13)
ERR! at Object.onwarn (/codebuild/output/src317918707/src/oxy/node_modules/rollup/dist/shared/rollup.js:23153:13)
ERR! at ModuleLoader.handleResolveId (/codebuild/output/src317918707/src/oxy/node_modules/rollup/dist/shared/rollup.js:22431:26)
ERR! at /codebuild/output/src317918707/src/oxy/node_modules/rollup/dist/shared/rollup.js:22392:26
ERR! Error: [vite]: Rollup failed to resolve import "react-dom" from "node_modules/@storybook/components/dist/esm/WithTooltip-cb7d27cb.js".
ERR! This is most likely unintended because it can break your application at runtime.
ERR! If you do want to externalize this module explicitly add it to
ERR! `build.rollupOptions.external`
ERR! at onRollupWarning (/codebuild/output/src317918707/src/oxy/node_modules/vite/dist/node/chunks/dep-f5552faa.js:37915:19)
ERR! at onwarn (/codebuild/output/src317918707/src/oxy/node_modules/vite/dist/node/chunks/dep-f5552faa.js:37693:13)
ERR! at Object.onwarn (/codebuild/output/src317918707/src/oxy/node_modules/rollup/dist/shared/rollup.js:23153:13)
ERR! at ModuleLoader.handleResolveId (/codebuild/output/src317918707/src/oxy/node_modules/rollup/dist/shared/rollup.js:22431:26)
ERR! at /codebuild/output/src317918707/src/oxy/node_modules/rollup/dist/shared/rollup.js:22392:26 {
ERR! watchFiles: [
2022-03-31T17:46:11.176Z [WARNING]: ERR! '/codebuild/output/src317918707/src/oxy/iframe.html',
ERR! '/virtual:/@storybook/builder-vite/vite-app.js',
ERR! 'vite/modulepreload-polyfill',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-logger/package.json',
ERR! '/virtual:/@storybook/builder-vite/preview-entry.js',
ERR! '/virtual:/@storybook/builder-vite/storybook-stories.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/dist/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-logger/dist/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/preview/config.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/docs/config.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js',
ERR!
2022-03-31T17:46:11.176Z [WARNING]: '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-measure/dist/esm/preset/addDecorator.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-outline/dist/esm/preset/addDecorator.js',
ERR! '/codebuild/output/src317918707/src/oxy/.storybook/preview.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/dist/esm/ClientApi.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/dist/esm/types.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/dist/esm/queryparams.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/global/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.array.concat.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.array.iterator.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.to-string.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.set.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.string.iterator.js',
ERR!
2022-03-31T17:46:11.176Z [WARNING]: '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/web.dom-collections.iterator.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.regexp.exec.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.string.replace.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/global/window.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/regenerator-runtime/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/regenerator-runtime/runtime.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.promise.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-docs/dist/esm/blocks/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/preview/render.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/preview/decorateStory.js',
ERR!
2022-03-31T17:46:11.176Z [WARNING]: '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/docs/extractArgTypes.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/docs/prepareForInline.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-links/dist/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-actions/dist/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-actions/dist/esm/preset/addArgsHelpers.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-backgrounds/dist/esm/decorators/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-measure/dist/esm/withMeasure.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-measure/dist/esm/constants.js',
ERR!
2022-03-31T17:46:11.176Z [WARNING]: '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-outline/dist/esm/withOutline.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-outline/dist/esm/constants.js',
ERR! '/codebuild/output/src317918707/src/oxy/src/assets/tailwind.css',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/vue3/dist/esm/client/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/src/components/input/Input.stories.mdx',
ERR! '/codebuild/output/src317918707/src/oxy/src/docs/guide/01-Introduction.stories.mdx',
ERR! '/codebuild/output/src317918707/src/oxy/src/docs/guide/02-How-to-use.stories.mdx',
2022-03-31T17:46:11.177Z [WARNING]: ERR! '/codebuild/output/src317918707/src/oxy/src/docs/guide/99-Contribute.stories.mdx',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/util-deprecate/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/ts-dedent/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/node_modules/@storybook/csf/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.array.slice.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.freeze.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.symbol.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.symbol.description.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.symbol.iterator.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.array.from.js',
2022-03-31T17:46:11.177Z [WARNING]: ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.assign.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.get-prototype-of.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.regexp.to-string.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.keys.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/web.dom-collections.for-each.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.entries.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.function.name.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.object.values.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/util-deprecate/browser.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/ts-dedent/esm/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/node_modules/@storybook/csf/dist/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/client-api/dist/esm/StoryStoreFacade.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/qs/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/core-js/modules/es.string.search.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/qs/lib/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/StoryStore.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/parameters.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/filterArgTypes.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/inferControls.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/types.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/csf/index.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/hooks.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/decorators.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/args.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/autoTitle.js',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/store/dist/esm/sortStories.js',
ERR! '\x00commonjsHelpers.js',
ERR! '\x00/codebuild/output/src317918707/src/oxy/node_modules/regenerator-runtime/runtime.js?commonjs-module',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/components/package.json',
ERR! '/codebuild/output/src317918707/src/oxy/node_modules/@storybook/components/dist/esm/index.js',
ERR! ... 366 more items
ERR! ]
ERR! }
2022-03-31T17:46:11.177Z [WARNING]: [!] Error: unfinished hook action(s) on exit:
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/components/dist/esm/Color-5a8891ca.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/components/node_modules/@storybook/csf/dist/story.js"
(commonjs) load "\u0000/codebuild/output/src317918707/src/oxy/node_modules/@storybook/components/node_modules/@storybook/csf/dist/story.js?commonjs-proxy"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-docs/node_modules/@storybook/csf/dist/story.js"
(commonjs) load "\u0000/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-docs/node_modules/@storybook/csf/dist/story.js?commonjs-proxy"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@vue/compiler-core/dist/compiler-core.esm-bundler.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/convert/typescript/index.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/convert/flow/index.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/convert/proptypes/index.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/docgen/types.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/docgen/utils/index.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/docgen/extractDocgenProps.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/docs-tools/dist/esm/argTypes/docgen/PropDef.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/doctrine/lib/doctrine.js"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/object-assign/index.js"
(commonjs) load "\u0000/codebuild/output/src317918707/src/oxy/node_modules/object-assign/index.js?commonjs-proxy"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-links/node_modules/@storybook/csf/dist/story.js"
(commonjs) load "\u0000/codebuild/output/src317918707/src/oxy/node_modules/@storybook/addon-links/node_modules/@storybook/csf/dist/story.js?commonjs-proxy"
(vite:load-fallback) load "/codebuild/output/src317918707/src/oxy/node_modules/uuid-browser/v4.js"
I've never worked with amplify before, so I'm not sure how to help troubleshoot this. Can you think of any reasons this might be happening? How would I go about reproducing the issue?
@IanVS let me setup a demo repo and a guide on how to reproduce - either today or by monday. Thanks already
I had a similar issue using react, the problem is that amplify has a bug when importing ESM modules and not CommonJS.
The fix I found recently was aliasing runtimeConfig.browser as runtimeConfig
Try this fix:
add this snippet to your viteFinal function in main.js
...
resolve : {
...config.resolve,
alias: {
...config.resolve?.alias,
'./runtimeConfig': './runtimeConfig.browser',
},
...
Also add this snippet to your preview.js after imports and before any code execution
window.global = window
(window as any).global = window (typescript)
Edit: spelling
@GuyGooL5 Thanks for the insight, I've tried with the following config and had the same issues still. I assume I did not apply your snippets properly. Can you double check?
main.js
async viteFinal(config, {configType}) {
return {
...config,
resolve: {
...config.resolve,
alias: [
...config.resolve?.alias,
{
'./runtimeConfig': './runtimeConfig.browser'
},
{
find: "@",
replacement: path.resolve(__dirname, "../src"),
},
/* https://v3.vuejs.org/guide/installation.html#for-server-side-rendering */
{
find: "vue",
replacement: path.resolve(__dirname, "../node_modules/vue/dist/vue.esm-bundler.js"),
},
],
},
};
},
preview.js
import '../src/assets/tailwind.css'
window.global = window
(window as any).global = window
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
hmm... I'm actually not familiar with config.resolve.alias being an array so my intuitive suggestion would be replacing
{
'./runtimeConfig': './runtimeConfig.browser'
},
with
{
find: "./runtimeConfig",
replacement: "./runtimeConfig.browser",
},
now about the preview.js file, the line (window as any).global = window is redundant as it was intended to be implemented in a .ts file so it can be removed.
@GuyGooL5 nothing changed.
Was required to remove ...config.resolve?.alias as that would throw not an interatable when building locally.
async viteFinal(config, {configType}) {
return {
...config,
resolve: {
...config.resolve,
alias: [
//...config.resolve?.alias,
{
find: "./runtimeConfig",
replacement: "./runtimeConfig.browser",
},
{
find: "@",
replacement: path.resolve(__dirname, "../src"),
},
/* https://v3.vuejs.org/guide/installation.html#for-server-side-rendering */
{
find: "vue",
replacement: path.resolve(__dirname, "../node_modules/vue/dist/vue.esm-bundler.js"),
},
],
},
};
},
preview.js is the same as before, minus the typed window.
Error: Error: Cannot find module '@storybook/core-common'
@lostdesign I was able to work around based on the snippet above, see: https://github.com/storybookjs/storybook/issues/17844#issuecomment-1088696441.
I also needed to remove ...config.resolve?.alias
I think the issue is related to this: https://github.com/storybookjs/storybook/pull/17875
EDIT:
window.global = window was not even necessary in preview.js.
@dpschen thanks for the headsup! Cannot quite apply the same logic for this package I guess or at least I don't know how I'd need to apply it.
Since there is no @storybook/core/common or is there?
You would need to use something like https://www.npmjs.com/package/patch-package to change the file in node_modules the same way that is done in that PR. Or, wait for the next alpha version to be released, which should also fix that particular issue.
@lostdesign I'm using the storybook packages with version 6.5.0-alpha.55.
I had the same issue as you (aka core-common file) before with previous versions.
EDIT: That also fixed issues that I had with vite 2.9.
I think at best I will just wait. It works on vercel meanwhile and things probably get resolved rather soon.
There's a new 6.5.0-alpha.56 version of storybook which should solve the "forced commonjs import" issue mentioned above. It might be worth trying, but I'm not certain whether that was causing your issues or not.
Turns out that version alpha.56 might not be sufficient. I think that https://github.com/storybookjs/storybook/pull/17875 is needed to fix the issue after all.
This issue is similar to #559 and there is the same error: error TS2792: Cannot find module '@storybook/core-common' even if the module is installed on local project.
Someone know how to solve this issue?
