diff --git a/code/lib/builder-manager/src/index.ts b/code/lib/builder-manager/src/index.ts index cda53d1161d3..bf3179f1494b 100644 --- a/code/lib/builder-manager/src/index.ts +++ b/code/lib/builder-manager/src/index.ts @@ -41,6 +41,7 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { outdir: join(options.outputDir || './', 'sb-addons'), format: 'esm', write: false, + resolveExtensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'], outExtension: { '.js': '.mjs' }, loader: { '.js': 'jsx', @@ -55,8 +56,9 @@ export const getConfig: ManagerBuilder['getConfig'] = async (options) => { target: ['chrome100'], platform: 'browser', bundle: true, - minify: false, + minify: true, sourcemap: true, + conditions: ['browser', 'module', 'default'], jsxFactory: 'React.createElement', jsxFragment: 'React.Fragment', diff --git a/code/lib/core-common/src/presets.test.ts b/code/lib/core-common/src/presets.test.ts index f9829c286db6..fabca8d9718e 100644 --- a/code/lib/core-common/src/presets.test.ts +++ b/code/lib/core-common/src/presets.test.ts @@ -1,3 +1,4 @@ +import path from 'path'; import './presets'; function wrapPreset(basePresets: any): { babel: Function; webpack: Function } { @@ -409,7 +410,7 @@ describe('resolveAddonName', () => { it('should resolve managerEntries', () => { expect(resolveAddonName({}, '@storybook/addon-actions/register')).toEqual({ name: '@storybook/addon-actions/register', - managerEntries: ['@storybook/addon-actions/register'], + managerEntries: [path.normalize('@storybook/addon-actions/register')], type: 'virtual', }); }); @@ -417,7 +418,7 @@ describe('resolveAddonName', () => { it('should resolve managerEntries from new /manager path', () => { expect(resolveAddonName({}, '@storybook/addon-actions/manager')).toEqual({ name: '@storybook/addon-actions/manager', - managerEntries: ['@storybook/addon-actions/manager'], + managerEntries: [path.normalize('@storybook/addon-actions/manager')], type: 'virtual', }); }); @@ -536,14 +537,14 @@ describe('loadPreset', () => { name: '@storybook/addon-actions/register', options: {}, preset: { - managerEntries: ['@storybook/addon-actions/register'], + managerEntries: [path.normalize('@storybook/addon-actions/register')], }, }, { name: 'addon-foo/register.js', options: {}, preset: { - managerEntries: ['addon-foo/register.js'], + managerEntries: [path.normalize('addon-foo/register')], }, }, { @@ -565,14 +566,14 @@ describe('loadPreset', () => { name: 'addon-baz/register.js', options: {}, preset: { - managerEntries: ['addon-baz/register.js'], + managerEntries: [path.normalize('addon-baz/register')], }, }, { name: '@storybook/addon-notes/register-panel', options: {}, preset: { - managerEntries: ['@storybook/addon-notes/register-panel'], + managerEntries: [path.normalize('@storybook/addon-notes/register-panel')], }, }, { diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts index c17f8c17d41a..12a7b2d23d69 100644 --- a/code/lib/core-common/src/presets.ts +++ b/code/lib/core-common/src/presets.ts @@ -10,6 +10,7 @@ import type { PresetConfig, Presets, } from '@storybook/types'; +import { join, parse } from 'path'; import { loadCustomPresets } from './utils/load-custom-presets'; import { safeResolve, safeResolveFrom } from './utils/safeResolve'; import { interopRequireDefault } from './utils/interpret-require'; @@ -66,14 +67,19 @@ export const resolveAddonName = ( const resolved = resolve(name); if (resolved) { - if (name.match(/\/(manager|register(-panel)?)(\.(js|ts|tsx|jsx))?$/)) { + const { dir: fdir, name: fname } = parse(resolved); + + if (name.match(/\/(manager|register(-panel)?)(\.(js|mjs|ts|tsx|jsx))?$/)) { return { type: 'virtual', name, - managerEntries: [resolved], + // we remove the extension + // this is a bit of a hack to try en be able to find .mjs files + // node can only ever resolve .js files; it does not look at the exports field in package.json + managerEntries: [join(fdir, fname)], }; } - if (name.match(/\/(preset)(\.(js|ts|tsx|jsx))?$/)) { + if (name.match(/\/(preset)(\.(js|mjs|ts|tsx|jsx))?$/)) { return { type: 'presets', name: resolved, @@ -113,11 +119,19 @@ export const resolveAddonName = ( const managerEntries = []; if (managerFile) { - managerEntries.push(managerFile); + // we remove the extension + // this is a bit of a hack to try en be able to find .mjs files + // node can only ever resolve .js files; it does not look at the exports field in package.json + const { dir: fdir, name: fname } = parse(managerFile); + managerEntries.push(join(fdir, fname)); } // register file is the old way of registering addons if (!managerFile && registerFile && !presetFile) { - managerEntries.push(registerFile); + // we remove the extension + // this is a bit of a hack to try en be able to find .mjs files + // node can only ever resolve .js files; it does not look at the exports field in package.json + const { dir: fdir, name: fname } = parse(registerFile); + managerEntries.push(join(fdir, fname)); } return {