Manual Initialization in Nuxt + Netlify CMS project?

Netlify CMS
,
1

Hello,

I’m trying to enable manual initialization so I can better organize my config files.

This is what I currently have in admin/index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Content Manager</title>
    <!-- Include the script that enables Netlify Identity on this page. -->
    <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
  </head>
  <body>
    <!-- Include the script that builds the page and powers Netlify CMS -->
    <script src="../cms/index.js" type="module"></script>
  </body>
</html>

And this is what I have in cms/index.js:

// This global flag enables manual initialization.
window.CMS_MANUAL_INIT = true
// Usage with import from npm package
import CMS, { init } from '../../node_modules/netlify-cms-app'
import pages from './pages'

/**
 * Optionally pass in a complete config object and set a flag
 *  (`load_config_file: false`) to ignore the `config.yml`.
 *
 * For example, the code below contains a complete config. The
 * `config.yml` will be ignored when setting `load_config_file` to false.
 * It is not required if the `config.yml` file is missing to set
 * `load_config_file`, but will improve performance and avoid a load error.
 */
init({
  config: {
    backend: {
      name: 'git-gateway',
      branch: 'master',
    },
    load_config_file: false,
    media_folder: 'static/images/uploads',
    public_folder: '/images/uploads',
    publish_mode: 'editorial_workflow',
    collections: [
      pages
    ],
  },
})

// The registry works as expected, and can be used before or after init.
// CMS.registerPreviewTemplate(...);

I get this error when I try to open the cms:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

How do I resolve this issue?

I added type="module" to resolve another issue. Do I need to add some sort of webpack config or something?

2

Hi @Tazerah,

I think you’d need to compile the index.js file into an actual JS file that you can use in that script tag.

3

Hi @hrishikesh,

Yes, I agree that’s what I need to do. However, the tools I would know how to use to accomplish that (i.e., gulp) would add additional steps to my development process. I’d prefer to keep using webpack, but I’m unable to figure out how to use it to bundle the JavaScript file into something usable using Nuxt’s config file. Do you know if there’s a working example or something anywhere accomplishing what I need to do?

I can’t imagine I’m the first one to turn manual init on in Nuxt, but scouring the internet I’ve found nothing and I’ve been looking for assistance everywhere (here, stackoverflow, community slack, etc.).

Typically I’d find info like this in the documentation for Netlify CMS but since this is a beta feature, it understandably hasn’t been documented yet.

4

Hi @Tazerah,

I’m not too much well-versed with Nuxt, but from what I know, there’s no way to add an external JS file to bundle. If it were me, I’d simply use esbuild and bundle the file myself and export it in the static folder. Then, in the nuxt.config.js, I’d add the script to be added in the head section or you could import it in the body according to how you’d see fit.

Yes, it’s an extra step, but I’d believe it’s needed.

Even if the feature makes out of Beta, it would probably never add a documentation on how to do this n a framework-specific way. There might be general information, but that’s about it.