diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 19ccb2759216..f69c0789feb2 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/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: { diff --git a/sandbox/react b/sandbox/react new file mode 160000 index 000000000000..28e60627f395 --- /dev/null +++ b/sandbox/react @@ -0,0 +1 @@ +Subproject commit 28e60627f3954aef5b40a62552b54d78a78099cb diff --git a/scripts/example.ts b/scripts/example.ts index 27f83b1d751b..14815e73f911 100644 --- a/scripts/example.ts +++ b/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: {