Merge pull request #18827 from storybookjs/better-webkit-linking

Examples: Set `resolve.symlinks` based on node option

code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -168,6 +168,10 @@ export default async (
   const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
   const tsCheckOptions = typescriptOptions.checkOptions || {};
 
+  const { NODE_OPTIONS, NODE_PRESERVE_SYMLINKS } = process.env;
+  const isPreservingSymlinks =
+    !!NODE_PRESERVE_SYMLINKS || NODE_OPTIONS?.includes('--preserve-symlinks');
+
   return {
     name: 'preview',
     mode: isProd ? 'production' : 'development',
@@ -269,6 +273,9 @@ export default async (
         assert: require.resolve('browser-assert'),
         util: require.resolve('util'),
       },
+      // Set webpack to resolve symlinks based on whether the user has asked node to.
+      // This feels like it should be default out-of-the-box in webpack :shrug:
+      symlinks: !isPreservingSymlinks,
     },
     optimization: {
       splitChunks: {

sandbox/react

@@ -0,0 +1 @@
+Subproject commit 28e60627f3954aef5b40a62552b54d78a78099cb

scripts/example.ts

@@ -5,10 +5,6 @@ import prompts from 'prompts';
 import { getOptionsOrPrompt } from './utils/options';
 import { executeCLIStep } from './utils/cli-step';
 import { exec } from '../code/lib/cli/src/repro-generators/scripts';
-import type { Parameters } from '../code/lib/cli/src/repro-generators/configs';
-import { getInterpretedFile } from '../code/lib/core-common';
-import { readConfig, writeConfig } from '../code/lib/csf-tools';
-import { babelParse } from '../code/lib/csf-tools/src/babelParse';
 
 const frameworks = ['react', 'angular'];
 const addons = ['a11y', 'storysource'];
@@ -103,27 +99,6 @@ const steps = {
 
 const logger = console;
 
-export const overrideMainConfig = async ({
-  cwd,
-  mainOverrides,
-}: {
-  cwd: string;
-  mainOverrides: Parameters['mainOverrides'];
-}) => {
-  logger.info(`📝 Overwriting main.js with the following configuration:`);
-  const configDir = path.join(cwd, '.storybook');
-  const mainConfigPath = getInterpretedFile(path.resolve(configDir, 'main'));
-  logger.debug(mainOverrides);
-  const mainConfig = await readConfig(mainConfigPath);
-
-  Object.keys(mainOverrides).forEach((field) => {
-    // NOTE: using setFieldNode and passing the output of babelParse()
-    mainConfig.setFieldNode([field], mainOverrides[field]);
-  });
-
-  await writeConfig(mainConfig);
-};
-
 const addPackageScripts = async ({
   cwd,
   scripts,
@@ -193,14 +168,6 @@ async function main() {
         optionValues: { local: true, start: false },
       });
 
-      // TODO -- work out exactly where this should happen
-      const code = '(c) => ({ ...c, resolve: { ...c.resolve, symlinks: false } })';
-      const mainOverrides = {
-        // @ts-ignore (not sure why TS complains here, it does exist)
-        webpackFinal: babelParse(code).program.body[0].expression,
-      };
-      await overrideMainConfig({ cwd, mainOverrides } as any);
-
       await addPackageScripts({
         cwd,
         scripts: {