Open lostdesign opened 2 years ago
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.
@lostdesign can you let me know if the problem was fixed?
@GuyGooL5 I will be checking this later today and post an update.
@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.
I will be trying tomorrow morning and report back with any findings.
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?
Describe the bug
When running
build-storybook
inside amplify, the pipeline crashes with the errorI 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
main.js
preview.js
vite.config.ts
Expected behavior
Storybook should build in amplify as well.
Environment
Additional context
Full Stack Trace without @storybook/core-common installed:
Full Stack Trace with @storybook/core-common installed: