Storybook not resolving __dirname path

[mqwebster-nava]

What happened?

It appears that Storybook is having issues with resolving the __dirname path in the nextConfigPath variable. This is happening when attempting to run the npm run storybook command to run Storybook in dev. The problem appears to be coming from the main.js file in the Storybook setup: template/{{app_name}}/.storybook/main.js.

This issue appears resolved when the code below is added to the top of our main.js file. However, I'm still unsure of the root cause.

import path, { dirname } from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

Steps to reproduce

From the {{ APP_NAME }} directory, run the npm run storybook command from the terminal.

What browsers are you seeing the problem on?

Chrome

Relevant log output

SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.js file.

Original error:
ReferenceError: __dirname is not defined
    at file:///Users/marqueswebster/Documents/Projects/template-application-nextjs/template/%7B%7Bapp_name%7D%7D/.storybook/main.js:29:36
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:396:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:366:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1565:24)
    at Module._compile (node:internal/modules/cjs/loader:1716:5)
    at Object..js (node:internal/modules/cjs/loader:1899:10)
    at Module.load (node:internal/modules/cjs/loader:1469:32)
    at Function._load (node:internal/modules/cjs/loader:1286:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at loadMainConfig (./node_modules/@storybook/core/dist/common/index.cjs:17511:11)
    at async buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37134:11)
    at async withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)
    at async dev (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2591:3)
    at async s.<anonymous> (./node_modules/@storybook/core/dist/cli/bin/index.cjs:2643:74)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

[jpandersen87]

The lack of the double underscore global values for filename and dirname likely means that the main.js file is being ran within an ESM module context instead of CommonJS as those values are no longer available in ESM. Considering ESM is now the standard module format, it may be best to consider necessary changes to the template to officially become ESM-compatible.

[mqwebster-nava]

@jpandersen87 thanks for flagging this. FYA: I submitted this PR that should resolve it according to Node documentation.