[Bug] default is not exported issue

[amcdnl]

What version of vite are you using?

3.0.1

System info and storybook versions

   "storybook-dark-mode": "^1.1.0",
   "@storybook/addon-docs": "^6.5.7",
    "@storybook/addon-essentials": "6.5.9",
    "@storybook/addons": "6.5.9",
    "@storybook/builder-vite": "^0.2.0",
    "@storybook/react": "6.5.9",
    "@storybook/theming": "6.5.9",
    "typescript": "^4.6.4",
    "vite": "^3.0.1",
    "vite-plugin-checker": "^0.4.9",
    "vite-plugin-svgr": "^2.2.0",
    "vite-tsconfig-paths": "^3.5.0",
    "vitest": "^0.18.1"

Describe the Bug

When I do build-storybook I get the following error:

'default' is not exported by node_modules/core-js-pure/stable/json/stringify.js, imported by node_modules/react-avatar/es/cache.js
file: /Users/austin/dev/qai-ui/node_modules/react-avatar/es/cache.js:3:7
1: import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
2: import _createClass from "@babel/runtime/helpers/createClass";
3: import _JSON$stringify from "core-js-pure/stable/json/stringify.js";
          ^
4: import _filterInstanceProperty from "core-js-pure/stable/instance/filter.js";
5: import _sliceInstanceProperty from "core-js-pure/stable/instance/slice.js";
ERR! Error: 'default' is not exported by node_modules/core-js-pure/stable/json/stringify.js, imported by node_modules/react-avatar/es/cache.js

however in my app start/build and storybook start it works fine.

My main.js config looks like:

const { mergeConfig } = require('vite');
const { default: svgr } = require('vite-plugin-svgr');
const { default: tsconfigPaths } = require('vite-tsconfig-paths');
const rollupNodePolyFill = require('rollup-plugin-node-polyfills');

module.exports = {
  stories: ['../src/**/*.story.@(ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-docs/preset',
    '@storybook/addon-essentials',
    'storybook-dark-mode'
  ],
  typescript: {
    check: true,
    reactDocgen: 'react-docgen-typescript'
  },
  core: {
    builder: '@storybook/builder-vite'
  },
  viteFinal: config =>
    mergeConfig(config, {
      plugins: [
        svgr(),
        tsconfigPaths()
      ],
      build: {
        target: 'es2020',
        rollupOptions: {
          plugins: [rollupNodePolyFill()]
        }
      },
      optimizeDeps: {
        esbuildOptions: {
          target: 'es2020'
        }
      },
      resolve: {
        alias: {
          // Reference: https://medium.com/@ftaioli/using-node-js-builtin-modules-with-vite-6194737c2cd2
          path: 'rollup-plugin-node-polyfills/polyfills/path'
        }
      }
    })
};

it seems related to something storybook is doing internally but I can't seem to put my finger on it.

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[adiospl]

I had similar problems and after investigation I found that there's something wrong with mock-core-js rollup plugin. When I removed it the problem with 'default' imports has disappered.

const { mergeConfig, loadEnv } = require("vite");
const path = require("path");

const config = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-storysource",
  ],
  features: {
    babelModeV7: true,
    storyStoreV7: true,
  },
  framework: "@storybook/vue",
  core: {
    builder: "@storybook/builder-vite",
  },
  async viteFinal(config, options) {
    const finalConfig = mergeConfig(config, {
      define: {
        '__APP_NAME__': JSON.stringify(process.env.npm_package_name),
        '__APP_VERSION__': JSON.stringify(process.env.npm_package_version),
        '__APP_BUILT_AT__': JSON.stringify(new Date()),
        "global": "global"
      },
      resolve: {
        alias: {
          "@": `${path.resolve(__dirname, "../src/lib")}`,
          "@demo": `${path.resolve(__dirname, "../src/demo")}`,
          "@story": `${path.resolve(__dirname, "../src/story")}`,
        }
      },
      css: {
          modules: {
              localsConvention: "camelCaseOnly",
          },
      },
    });

    // TODO: This internal storybook vite plugin broke the build. 
    // It affects core-js and dependant packages imports (changes it to the empty string).
    // Needs further investigation but for now we disable it.
    finalConfig.plugins = finalConfig.plugins.filter(plugin => plugin.name !== "mock-core-js");

    return finalConfig;
  },
};

module.exports = config;

[amcdnl]

@adiospl - That worked! Though I get out of memory errors now - but this seems like a Vite error not a SB error: vitejs/vite#2433

I was able to get around this by disabling sourcemaps for prod builds.

<--- Last few GCs --->

[6033:0x148008000]    52190 ms: Mark-sweep 4020.2 (4134.2) -> 4014.9 (4133.7) MB, 2337.2 / 0.1 ms  (average mu = 0.512, current mu = 0.018) allocation failure scavenge might not succeed
[6033:0x148008000]    55414 ms: Mark-sweep 4030.7 (4133.7) -> 4029.1 (4158.7) MB, 3220.4 / 0.1 ms  (average mu = 0.292, current mu = 0.001) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x102a2636c node::Abort() [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 2: 0x102a264f4 node::errors::TryCatchScope::~TryCatchScope() [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 3: 0x102b73378 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 4: 0x102b7330c v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 5: 0x102cf6afc v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 6: 0x102cf561c v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 7: 0x102d008f8 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 8: 0x102d0098c v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
 9: 0x102cd3844 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
10: 0x103008b20 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
11: 0x10331d08c Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
12: 0x10983a670
13: 0x1098392fc
14: 0x10982b0c8
15: 0x1093abf3c
16: 0x10852dc98
17: 0x10955e214
18: 0x1095e65ec
19: 0x1033651b8 Builtins_PromiseFulfillReactionJob [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
20: 0x1032d26f4 Builtins_RunMicrotasks [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
21: 0x1032ae9e4 Builtins_JSRunMicrotasksEntry [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
22: 0x102c831e8 v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
23: 0x102c8361c v8::internal::(anonymous namespace)::InvokeWithTryCatch(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
24: 0x102c836e4 v8::internal::Execution::TryRunMicrotasks(v8::internal::Isolate*, v8::internal::MicrotaskQueue*, v8::internal::MaybeHandle<v8::internal::Object>*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
25: 0x102ca648c v8::internal::MicrotaskQueue::RunMicrotasks(v8::internal::Isolate*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
26: 0x102ca6d20 v8::internal::MicrotaskQueue::PerformCheckpoint(v8::Isolate*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
27: 0x102975d8c node::InternalCallbackScope::Close() [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
28: 0x1029757c4 node::InternalCallbackScope::~InternalCallbackScope() [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
29: 0x102a292c4 node::fs::FileHandle::CloseReq::Resolve() [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
30: 0x102a3c008 node::fs::FileHandle::ClosePromise()::$_0::__invoke(uv_fs_s*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
31: 0x10328f144 uv__work_done [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
32: 0x1032928a4 uv__async_io [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
33: 0x1032a45b8 uv__io_poll [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
34: 0x103292d34 uv_run [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
35: 0x102976e00 node::SpinEventLoop(node::Environment*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
36: 0x102a5f6f4 node::NodeMainInstance::Run(int*, node::Environment*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
37: 0x102a5f3c0 node::NodeMainInstance::Run(node::EnvSerializeInfo const*) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
38: 0x1029f82dc node::Start(int, char**) [/Users/austin/.nvm/versions/node/v16.13.0/bin/node]
39: 0x10747508c
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[mattmcardle]

Thanks @adiospl that fixed it for me too!

I've added a minimal reproduction here: https://github.com/mattmcardle/storybook-core-js-pure-bug

This is created from the vite react-ts template, and then running storbook init. I have added a minimal component and story called "Form" which uses the RJSF library that triggers this issue during build-storybook.

I had to roll vite and the builder back to the latest 2.x and 0.1.41 versions respectively because of this issue

[IanVS]

Thanks everyone. A fix for this has been released in @storybook/builder-vite 0.2.1. You can remove the workaround from your vite config once you upgrade. And please let us know if you hit any problems.

@mattmcardle the other issue you hit has been fixed as well, so you should be able to upgrade vite now.