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
10

Is there an official solution to this yet? just came across this issue myself after using the sveltekit template project.

Removing the module line from package.json works and i then just put it back.

I wasn’t sure if using npm exec – in stead of npx would provide a way of specifying a custom package.json file, purely setup for migrations. Not that great with npm, and wasn’t quite sure how the --prefix or -workspace parameters might be leveraged to provide a command line solution.

11

@m.finamor Pinging you on this since you’re way more familiar with it :slight_smile:

12

Hello @emile.swain

Unfortunately this is still the official solution for the SvelteKit + npm implementation :frowning:
This is still the way to go due to the way it handles ES6 modules, and until we don’t ship anything specific for it thats gonna be the way to go, sorry :frowning: