Importing Dato Node Client via ES6 Modules (SvelteKit)

🆘 Support
1

Hi there!
Is there any way to use the Dato Node client with ES6 imports? We are using SvelteKit as our frontend which imports all modules. I was trying to set-up the Dato client according to these instructions but the dump command is failing with the error message
Error: [ERR_REQUIRE_ESM]: Must use import to load ES Module …

1 Like
2

Hello @Nico

Could you provide us the exact commands you are issuing in the command line, and your current Node version?

Thank you!

3

Hi! Sure, thanks! I’m using Node v16.1.0. The steps I took were

  • npm install datocms-client --save-dev in the root directory of my Sveltekit app
  • I created a new dato.config.js there with the example content:
// dato.config.js
module.exports = (dato, root, i18n) => {
  content = {
    hello: 'world',
  }
  root.createDataFile('src/data/foobar.yml', 'yaml', content)
}
  • then I ran ./node_modules/.bin/dato dump --token='< my Full-access API token >'

The steps above cause the following error:

[ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/…/dato.config.js
  require() of ES modules is not supported.
  require() of /Users/…/dato.config.js from /Users/…/node_modules/datocms-client/lib/dump/dump.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
  Instead rename dato.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/…/package.json.

As a last step I tried to rename the dato.config.js into dato.config.cjs but that didn’t work, since it’s then missing the .js file.

Thank you!

1 Like
4

Could you try running it with the flag --input-type=module ?
If it doesn’t work, you can also try and add the parameter "type": "module" to your package.json

Let me know if it works!

5

Unfortunately, it didn’t accept the --input-type=module flag. The "type": "module" parameter was already set in my package.json when I did the steps listed above.

1 Like
6

Oh, i don’t know if this would be a breaking change to your project, but could you remove the "type": "module" to the package.json, run an npm install and try the command again?
Also, could you provide me with the package.json file?

7

Removing the "type": "module" works. It created the foobar.yaml file from your example. However, it would be a breaking change since Svelte Kit relies on the ES modules.

This is the package.json:

{
  "name": "~website-mvp~",
  "version": "0.0.1",
  "type": "module",
  "engines": {
    "node": ">=v14.5.0 <17",
    "npm": ">=v6.14.5"
  },
  "scripts": {
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "preview": "svelte-kit preview",
    "lint": "prettier --check --plugin-search-dir=. .",
    "format": "prettier --write --plugin-search-dir=. ."
  },
  "devDependencies": {
    "@sveltejs/adapter-vercel": "^1.0.0-next.31",
    "@sveltejs/kit": "^1.0.0-next.190",
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.2",
    "datocms-client": "^3.5.9",
    "postcss": "^8.2.13",
    "postcss-load-config": "^3.0.1",
    "prettier": "^2.3.2",
    "prettier-plugin-svelte": "^2.3.1",
    "svelte": "^3.38.3",
    "svelte-preprocess": "^4.7.3",
    "tailwindcss": "^2.2.15"
  },
  "dependencies": {
    "@sendgrid/mail": "^7.4.6",
    "@tailwindcss/aspect-ratio": "^0.2.1",
    "@tailwindcss/forms": "^0.3.3",
    "@tailwindcss/line-clamp": "^0.2.1",
    "@tailwindcss/typography": "^0.4.1",
    "axios": "^0.21.1",
    "datocms-structured-text-to-html-string": "^1.2.0",
    "fathom-client": "^3.2.0",
    "lodash-es": "^4.17.21",
    "markdown-it": "^12.0.6",
    "postmark": "^2.7.8",
    "request-ip": "^2.1.3",
    "svelte-markdown": "^0.1.12",
    "svelte-scrollto": "^0.2.0",
    "svelte-transition-classes": "^0.1.0"
  }
}
1 Like
8

Ok, i know this isn’t the cleanest fix, but it will work for your use case

First add the "type": "module" back to the package.json and npm install so that your project works again

Then, rename the config file from dato.config.js to dato.config.cjs

And at last, navigate to node_modules > datocms-client > lib > dump > command.js
On this file change the line

        configFile = _path["default"].resolve(options['--config'] || 'dato.config.js');

to

        configFile = _path["default"].resolve(options['--config'] || 'dato.config.cjs');

Save and run the command and it should work, this time without breaking your project

I know it is not the cleanest fix, but we don’t have official svelte support yet.

Let me know if it works, and sorry for the hassle!

2 Likes
9

Worked perfectly, thank you!

1 Like