Get help on Discord

Module parse error with @sanity/orderable-document-list plugin import

15 replies
Last updated: Jan 5, 2023
Hi! I am new to Sanity and adding some documentation to my site. I’d like to add the 
@sanity/orderable-document-list
plugin, but get this error:
./node_modules/@sanity/orderable-document-list/node_modules/@sanity/ui/dist/index.esm.js
Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (61:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See <https://webpack.js.org/concepts#loaders>
Any help or insight appreciated! Thank you!
AI Update

This error typically happens when you're using the @sanity/orderable-document-list plugin in a Next.js project (or similar framework) that isn't configured to properly transpile the Sanity UI package. The error message about "sourceType: module" indicates that webpack is encountering ES modules but doesn't know how to handle them.

The most common fix is to add the Sanity packages to your Next.js transpilation configuration. In your next.config.js (or next.config.mjs), add the transpilePackages option:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@sanity/ui', '@sanity/orderable-document-list']
}

module.exports = nextConfig

If you're using next.config.mjs:

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['@sanity/ui', '@sanity/orderable-document-list']
}

export default nextConfig

This tells Next.js to process these packages through its build pipeline, converting the ES modules into a format that webpack can understand.

A few other things to check:

  1. Make sure you're on a recent version of Next.js - The transpilePackages option was added in Next.js 13.1. If you're on an older version, you might need to upgrade or use the older next-transpile-modules package.

  2. Verify your installation - Sometimes clearing your node_modules and reinstalling can help:

    rm -rf node_modules package-lock.json
npm install

  3. Check for conflicting versions - The @sanity/orderable-document-list plugin has peer dependencies on @sanity/ui. Make sure your versions are compatible by checking the plugin's npm page.

After making these changes, restart your development server completely. The error should be resolved and you'll be able to use the orderable-document-list plugin to add drag-and-drop ordering to your documents!

Show original thread
15 replies
Hey
user H
! What version of the Studio are you running and which command did you use to install the plugin?
I am running 
3.0.0-rc.2
and did an npm install for the plgin
It’d be worth it to update to the latest version of the Studio. Can you share your desk structure where you’re implement the plugin?
Awesome, the upgrade got me past that initial error. Seeing this one now when I click the sidebar item in studio:
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Here’s what my desk structure looks like:
structure: (S, context) => {
        // The `Settings` root list item
        const settingsListItem = // A singleton not using `documentListItem`, eg no built-in preview
          S.listItem()
            .title(settingsType.title)
            .icon(settingsType.icon)
            .child(
              S.editor()
                .id(settingsType.name)
                .schemaType(settingsType.name)
                .documentId(settingsType.name)
            )

        // The default root list items (except custom ones)
        const defaultListItems = S.documentTypeListItems().filter(
          (listItem) => listItem.getId() !== settingsType.name
        )

        return S.list()
          .title('Content')
          .items([
            settingsListItem,
            S.divider(),
            ...defaultListItems,
            orderableDocumentListDeskItem({
              type: 'category',
              title: 'Categories',
              S,
              context,
            }),
          ])
      },
How are you importing the 
orderableDocumentListDeskItem
?
import { orderableDocumentListDeskItem } from '@sanity/orderable-document-list'
I wonder if you somehow installed a V2 version of the plugin. What does your package.json look like? Can you run 
npm install --save @sanity/orderable-document-list
just to rule it out?
Just reinstalled and same error. Also tried removing and installing again 😞
Can you share the output of 
sanity versions
?
@sanity/cli                          2.31.1 (latest: 3.1.4)
@sanity/code-input                    3.0.1 (up to date)
@sanity/image-url                     1.0.1 (up to date)
@sanity/orderable-document-list       1.0.2 (up to date)
@sanity/table                         1.0.1 (up to date)
@sanity/vision                   3.0.0-rc.2 (latest: 3.1.4)
@sanity/webhook                       2.0.0 (up to date)
It looks like the actual 
sanity
package is missing from that list. Can you share your package.json?
Noticed that the 
sanity upgrade
command didn’t actually update 
package.json
. so just updated 
sanity
and it works!!
Thank you so much for helping with this and the quick responses! Much appreciated!
Fantastic! Glad it’s sorted 🙂

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?