diff --git a/code/lib/cli/src/generators/configure.test.ts b/code/lib/cli/src/generators/configure.test.ts
index 1e80f406e19..948c3fbe932 100644
--- a/code/lib/cli/src/generators/configure.test.ts
+++ b/code/lib/cli/src/generators/configure.test.ts
@@ -70,6 +70,46 @@ describe('configureMain', () => {
       export default config;"
     `);
   });
+
+  test('should handle resolved paths in pnp', async () => {
+    await configureMain({
+      language: SupportedLanguage.JAVASCRIPT,
+      addons: [
+        "%%path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json')))%%",
+        "%%path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json')))%%",
+        "%%path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json')))%%",
+        "%%path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))%%",
+      ],
+      storybookConfigFolder: '.storybook',
+      framework: {
+        name: "%%path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))%%",
+      },
+    });
+
+    const { calls } = (fse.writeFile as unknown as jest.Mock).mock;
+    const [mainConfigPath, mainConfigContent] = calls[0];
+
+    expect(mainConfigPath).toEqual('./.storybook/main.js');
+    expect(mainConfigContent).toMatchInlineSnapshot(`
+      "/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+      const config = {
+        \\"stories\\": [
+          \\"../stories/**/*.mdx\\",
+          \\"../stories/**/*.stories.@(js|jsx|ts|tsx)\\"
+        ],
+        \\"addons\\": [
+          path.dirname(require.resolve(path.join('@storybook/addon-links', 'package.json'))),
+          path.dirname(require.resolve(path.join('@storybook/addon-essentials', 'package.json'))),
+          path.dirname(require.resolve(path.join('@storybook/preset-create-react-app', 'package.json'))),
+          path.dirname(require.resolve(path.join('@storybook/addon-interactions', 'package.json')))
+        ],
+        \\"framework\\": {
+          \\"name\\": path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))
+        }
+      };
+      export default config;"
+    `);
+  });
 });
 
 describe('configurePreview', () => {
diff --git a/code/lib/cli/src/generators/configure.ts b/code/lib/cli/src/generators/configure.ts
index 884e47af6f0..1e7ff180e11 100644
--- a/code/lib/cli/src/generators/configure.ts
+++ b/code/lib/cli/src/generators/configure.ts
@@ -30,6 +30,23 @@ interface ConfigurePreviewOptions {
   language: SupportedLanguage;
 }
 
+const logger = console;
+
+/**
+ * We need to clean up the paths in case of pnp
+ * input: "path.dirname(require.resolve(path.join('@storybook/react-webpack5', 'package.json')))"
+ * output: "@storybook/react-webpack5"
+ * */
+const sanitizeFramework = (framework: string) => {
+  // extract either @storybook/<framework> or storybook-<framework>
+  const matches = framework.match(/(@storybook\/\w+(?:-\w+)*)|(storybook-(\w+(?:-\w+)*))/g);
+  if (!matches) {
+    return undefined;
+  }
+
+  return matches[0];
+};
+
 export async function configureMain({
   addons,
   extensions = ['js', 'jsx', 'ts', 'tsx'],
@@ -47,18 +64,27 @@ export async function configureMain({
   const isTypescript =
     language === SupportedLanguage.TYPESCRIPT || language === SupportedLanguage.TYPESCRIPT_LEGACY;
 
-  const mainConfigTemplate = dedent`<<import>>const config<<type>> = <<mainContents>>;
-  export default config;`;
+  let mainConfigTemplate = dedent`<<import>>const config<<type>> = <<mainContents>>;
+    export default config;`;
+
+  const frameworkPackage = sanitizeFramework(custom.framework?.name);
+
+  if (!frameworkPackage) {
+    mainConfigTemplate = mainConfigTemplate.replace('<<import>>', '').replace('<<type>>', '');
+    logger.warn('Could not find framework package name');
+  }
 
   const mainJsContents = mainConfigTemplate
     .replace(
       '<<import>>',
       isTypescript
-        ? `import type { StorybookConfig } from '${custom.framework.name}';\n\n`
-        : `/** @type { import('${custom.framework.name}').StorybookConfig } */\n`
+        ? `import type { StorybookConfig } from '${frameworkPackage}';\n\n`
+        : `/** @type { import('${frameworkPackage}').StorybookConfig } */\n`
     )
     .replace('<<type>>', isTypescript ? ': StorybookConfig' : '')
-    .replace('<<mainContents>>', JSON.stringify(config, null, 2));
+    .replace('<<mainContents>>', JSON.stringify(config, null, 2))
+    .replace(/['"]%%/g, '')
+    .replace(/%%['"]/g, '');
 
   await fse.writeFile(
     `./${storybookConfigFolder}/main.${isTypescript ? 'ts' : 'js'}`,