ES module error following migration docs (Nuxt3)

The issue:

  • Having looked on the community threads there is a similar post but it was resolved over email in the end. Something obviously needs to change but having played with removing ‘type’: model from package.json and other quick fixes I’ve not found a solution.
  • Having looked on the community threads there is a similar post but it was resolved over email in the end. It would be great to get some help! Thanks in advance.

Hey @accounts,

We shouldn’t be using require() in our migration scripts… can you please post 1707906087_createArticleModel.ts (or email us at support@datocms.com if you prefer) so we can see what it looks like? I wonder if maybe something in Nuxt (like a linter or bundler) is rewriting or rebundling our files…?

I believe this situation is caused by different code styles used in older vs newer JS: ES Modules · Nuxt Concepts so it might be kinda messy to disentangle, depending on how your codebase is set up.

If you don’t strictly need to have the migration files inside your main project repo (i.e., could it be a separate repo altogether, or a nested one inside a subfolder in your main one?), keeping those scripts separate from your main project might make them easier to maintain and run. They don’t really need to interact with your frontend anyway; they’re just standalone files that talk to our backend independently of whatever your frontend does.

import { Client } from '@datocms/cli/lib/cma-client-node';

export default async function(client: Client): Promise<void> {
  // DatoCMS migration script

  // For more examples, head to our Content Management API docs:
  // https://www.datocms.com/docs/content-management-api

  // Create an Article model:
  // https://www.datocms.com/docs/content-management-api/resources/item-type/create

  const articleModel = await client.itemTypes.create({
    name: 'Article',
    api_key: 'article',
  });

  // Create a Title field (required):
  // https://www.datocms.com/docs/content-management-api/resources/field/create

  const titleField = await client.fields.create(articleModel, {
    label: 'Title',
    api_key: 'title',
    field_type: 'string',
    validators: {
      required: {},
    },
  });

  // Create an Article record:
  // https://www.datocms.com/docs/content-management-api/resources/item/create

  const article = await client.items.create({
    item_type: articleModel,
    title: 'My first article!',
  });
}

So that’s my biggest query really - there is no require() in this file. So I’m not sure if it is calling a function that includes require somewhere?

And to confirm this is the file created when following the docs command.

yarn datocms migrations:new 'create article model' --api-token=<TOKEN>

then running the migration below gets the error referenced above

yarn datocms migrations:run --destination=feature-branch --api-token=<TOKEN>

(replacing token for my api token :sweat_smile:)

I haven’t linted or amended it in any way, so unsure why my repo would interfere. Appreciate the idea of storing these files in a different repo but we are looking to use Dato for multiple projects in the future so it would be really useful to properly get to the bottom of this or at least understand why the error is occurring. Thanks

Can I also see your package.json, please? We’ll try to get to the bottom of this!

@accounts,

Upon investigation, I think there might be a compatibility issue between our script and Nuxt’s tsconfig.json. I’ll report it to the devs for an investigation, but in the meantime, could you please try this workaround?

  1. Make an empty file called empty.json (in your IDE, or just in the shell via touch empty.json)

  2. Edit datocms.config.json and under migrations, add "tsconfig": "empty.json". The full config file should look something like this:

    {
      "profiles": {
        "default": {
          "logLevel": "NONE",
          "migrations": {
            "directory": "./migrations",
            "modelApiKey": "schema_migration",
            "tsconfig": "empty.json"
          }
        }
      }
    }
    

That will tell our script to skip the Vue tsconfig… that seemed to work for me in my local tests. Please let me know if that helps at all?

Here is my package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "lint": "eslint --ext .ts,.js,.vue ."
  },
  "devDependencies": {
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/tailwindcss": "^6.10.4",
    "@pinia/nuxt": "^0.5.1",
    "eslint": "^8.56.0",
    "eslint-plugin-tailwindcss": "^3.14.0",
    "nuxt": "^3.9.1",
    "nuxt-svgo": "^4.0.0",
    "typescript": "^5.3.3",
    "vue": "^3.4.10",
    "vue-router": "^4.2.5",
    "vue-tsc": "^1.8.27"
  },
  "dependencies": {
    "@datocms/cli": "^1.3.3",
    "marked": "^11.1.1",
    "vue-datocms": "^5.0.0"
  }
}

I attempted your empty.json trick but sadly still had the same error returned to me so looks like something else is causing the issue. Thanks again for the help!

Do you need the:

  "type": "module",

In your JSON? Is that something you added?

Removing that line seems to make the script work for me, but I’m not sure if something else in your app requires that?

Hey @accounts,

Just wanted to check back in this issue. Did you ever try it without the "type": "module", line? We’re still trying to diagnose the root cause of this, but knowing your rationale for that would help.

@accounts,

We also released a new CLI version, v2.0.0 that makes it so that the migrations will use its own tsconfig (unless you override it). Hopefully that will help too, especially with type: module?

If you’re still having issues, could you please let us know?