"Error: 'default' is not exported by..." when building with imported umd module #2679

TheSimpleZ · 2021-03-25T00:27:12Z

Describe the bug

I'm trying to use CKEditor in my project. They distribute the editor as a UMD module and I'm linking it to my project using npm workspaces. When I import the module in my code, I get the following error in the browser console when running the dev server:

ckeditor.svelte:2 Uncaught (in promise) SyntaxError: The requested module '/ckeditor/build/ckeditor.js' does not provide an export named 'default'

I resolved that issue by setting:

optimizeDeps: {
      include: ['ckeditor5-custom-build'],
      ...
}

However, when I try to do a production build, I get a similar error during the build process:

'default' is not exported by ckeditor/build/ckeditor.js, imported by src/components/ckeditor.svelte
file: /home/zrean/projects/kookbook/src/components/ckeditor.svelte:2:7
1: <script>
2:   import BalloonBlockEditor from 'ckeditor5-custom-build'
          ^
3:   import { onMount, createEventDispatcher } from 'svelte'
4:   import FirebaseStorageAdapter from '../libs/firebaseStorageAdapter'
error during build:
Error: 'default' is not exported by ckeditor/build/ckeditor.js, imported by src/components/ckeditor.svelte
    at error (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:5308:30)
    at Module.error (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:9717:16)
    at Module.traceVariable (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:10105:29)
    at ModuleScope.findVariable (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:8875:39)
    at FunctionScope.findVariable (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:2658:38)
    at ChildScope.findVariable (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:2658:38)
    at ReturnValueScope.findVariable (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:2658:38)
    at ChildScope.findVariable (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:2658:38)
    at MemberExpression.bind (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:6564:49)
    at CallExpression.bind (/home/zrean/projects/kookbook/node_modules/rollup/dist/shared/rollup.js:2745:23)

I would expect the production build to work since the dev build work perfectly fine.
I'm having a hard time figuring out why this is happening and any help would be appreciated!

Reproduction

You can clone my repo and build it. The issue will be apparent:
https://github.com/TheSimpleZ/kookbook

Use the add-vite branch, run npm i and then npm run build. Running npm run dev works perfectly fine.

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 1.45 GB / 7.77 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
    npm: 7.6.3 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/vite-plugin-svelte: ^1.0.0-next.5 => 1.0.0-next.5 
    vite: ^2.1.2 => 2.1.2

Used package manager: npm

Logs

Logs with the debug flag are quite long and will probably make this post hard to read.
The most relevant parts are shown above. If you need more details, please use the repo I linked.

Before submitting the issue, please make sure you do the following

Read the Contributing Guidelines.
Read the docs.
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Provide a description in this issue that describes the bug.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

The text was updated successfully, but these errors were encountered:

underfin · 2021-03-27T10:23:13Z

The add-vite branch not found, i tested with your master code, it works fine for build.

TheSimpleZ · 2021-03-27T11:47:17Z

Hello! Thanks for trying it out. I was trying to fix the issue myself and found a solution for it yesterday. I had to add

// vite.config.js
build: {
      commonjsOptions: {
        exclude: ['ckeditor/*'],
      },
....
 }

Now it's working fine. I also restored the add-vite branch the way it was previously, in case you want to check out the problem. Unless this is a problem you'd like you track, this issue can be closed for now :)

You can also observe the problem if you use the master branch and comment out the commonjsOptions

realityfilter · 2021-05-06T15:44:57Z

I found the same problem with our private code base. Is this a bug or simply a necessary configuration step for vite?

hyf0 · 2021-08-14T18:14:23Z

Describe the bug

I'm trying to use CKEditor in my project. They distribute the editor as a UMD module and I'm linking it to my project using npm workspaces. When I import the module in my code, I get the following error in the browser console when running the dev server:

I notice linking. Try not to using linking, use file: or yarn add/npm i instead. Vite won't pre-bundle the package into esm format which is friendly to vite for linked packages in node_modules.

fardolieri · 2021-12-15T13:05:07Z

I just stumbled upon this error when I updated vite from version 2.4 to 2.7. My error is caused by a named export and not a default export though.

error during build:
Error: 'SharedArray' is not exported by ../shared-project/lib/index.js, imported by main-project/index.ts
    at error (/workspace/pvs/client/node_modules/rollup/dist/shared/rollup.js:158:30)
    at Module.error (/workspace/pvs/client/node_modules/rollup/dist/shared/rollup.js:12354:16)

shared-project is a private package in my monorepo, that I symlinked using

// main-project/package.json
"shared-project": "file:../shared-project",

With vite version 2.4 my vite and vite build commands worked fine using this config

// old vite.config.ts
{
  plugins: [vue()],
  optimizeDeps: {
    include: ['shared-project'],
  },
  build: {
    commonjsOptions: { exclude: ['shared-project'] },
    // commonjsOptions: { },                               // Edit: 
  },                                                       // I just realized, that this line of code would have been
}                                                          // sufficient. I didn't need the `exclude` from above. I
                                                           // guess that means I abused a bug, that was fixed now.

With version 2.7 I get the error above. I tracked the breaking change down to this commit (#5111) from version 2.6, but I don't really understand why it's a breaking change. I just know, that when I include include: [] in my commonjsOptions config it works again.

// new vite.config.ts
{
  plugins: [vue()],
  optimizeDeps: {
    include: ['shared-project'],
  },
  build: {
    commonjsOptions: { exclude: ['shared-project'], include: [] }, // <----
    // commonjsOptions: { include: [] },                                          // Edit:
  },                                                                              // This works just as well.
}

Edit:

It looks like I abused a bug before, that was now fixed. But I still don't understand why I can't use vite build without commonjsOptions: { include: [] }

MrDeerly · 2022-02-13T22:23:20Z

I'm also getting similar errors, for example:
Error: 'default' is not exported by src/store/index.js, imported by src/main.ts

As @fardolieri suggested, adding commonjsOptions: { include: [] } to the vite config fixes it.

bluwy · 2022-03-05T16:02:41Z

This is now documented at https://vitejs.dev/guide/dep-pre-bundling.html#monorepos-and-linked-dependencies and is an expected configuration in Vite. However, there's a PR #7094 to improve this.

mrbar42 · 2022-03-09T13:50:15Z

Thanks for the update.

while adding optimizeDeps: { include:['my-pkg'] } does solve the pre-bundling of linked packages issue,
the package name must match the imported path exactly and any subpath of the package will not be included.

// optimizeDeps: { include:['my-pkg'] }

import {MyClass} from 'my-pkg'; // works
import {MyClass} from 'my-pkg/classes'; // Error: 'MyClass' is not exported by ....

the issue is in this line which checks for literal string match.
it could be changed to one or both of these:

take into account all subpaths of the given package (packages can also be in @company/package format)
also accept regex - (example /^my-pkg(\/|$)/)

Meanwhile - all imported paths needs to be added explicitly - e.g.
{optimizeDeps: {include: ['my-pkg', 'my-pkg/classes']}}

bluwy · 2022-03-09T17:15:02Z

Yeah, currently the paths have to be added manually. That would be a feature request though (not sure if there's an existing one). I too have had usecases which a feature like that would help. It would be a matter of globbing the files to be optimized using the regex/glob (I think glob syntax is prefered), as those files will be added as entrypoints for esbuild to prebundle.

TheSimpleZ added the pending triage label Mar 25, 2021

JBusillo mentioned this issue Apr 17, 2021

Error when a CJS module is imported from ESM module dependencies #3024

Closed

bluwy closed this as completed Mar 5, 2022

github-actions bot locked and limited conversation to collaborators Mar 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

"Error: 'default' is not exported by..." when building with imported umd module #2679

"Error: 'default' is not exported by..." when building with imported umd module #2679

TheSimpleZ commented Mar 25, 2021

underfin commented Mar 27, 2021

TheSimpleZ commented Mar 27, 2021 •

edited

realityfilter commented May 6, 2021

hyf0 commented Aug 14, 2021 •

edited

Describe the bug

fardolieri commented Dec 15, 2021 •

edited

MrDeerly commented Feb 13, 2022

bluwy commented Mar 5, 2022

mrbar42 commented Mar 9, 2022

bluwy commented Mar 9, 2022

"Error: 'default' is not exported by..." when building with imported umd module #2679

"Error: 'default' is not exported by..." when building with imported umd module #2679

Comments

TheSimpleZ commented Mar 25, 2021

Describe the bug

Reproduction

System Info

Logs

Before submitting the issue, please make sure you do the following

underfin commented Mar 27, 2021

TheSimpleZ commented Mar 27, 2021 • edited

realityfilter commented May 6, 2021

hyf0 commented Aug 14, 2021 • edited

Describe the bug

fardolieri commented Dec 15, 2021 • edited

Edit:

MrDeerly commented Feb 13, 2022

bluwy commented Mar 5, 2022

mrbar42 commented Mar 9, 2022

bluwy commented Mar 9, 2022

TheSimpleZ commented Mar 27, 2021 •

edited

hyf0 commented Aug 14, 2021 •

edited

fardolieri commented Dec 15, 2021 •

edited