根据你现有的评论，你似乎是在浏览器中运行这段代码，而且你的项目中也没有browserify或任何其他捆绑程序。
该结论来自于您注解了错误这一事实
未定义require
require是一个服务器端NodeJS项目特有的函数，在浏览器中不存在。如果你想使用require函数，你需要使用browserify或webpack这样的捆绑器，它会从node_modules文件夹中获取相关的包，并将它们捆绑在一起供前端使用。
你之所以会得到
应为JavaScript模块脚本，但服务器响应的MIME类型为"text/html"。根据HTML规范对模块脚本强制执行严格的MIME类型检查。
错误是因为当你要求javascript运行以下：

import {nanoid} from 'nanoid';

浏览器认为包含当前页面的目录也具有称为nanoid的文件，并且正在请求该文件。
请考虑以下几点：如果我的页面在https://google.com，我的代码说import {nanoid} from 'nanoid'，浏览器将向https://google.com/nanoid发出请求，浏览器期待一个javascript文件，但它可能收到一个错误404 html页面。
请记住，浏览器无法访问您的node_modules文件夹，除非它在您的Web服务器上公开，在这种情况下，您需要告诉它您试图导入的文件的确切路径。
你能做什么？
你可以添加webpack或browserify或其他一些捆绑到您的项目，但这可能需要一点工作，你提到你是一个初学者，所以我不认为这将是一个好主意，跳的权利。
另一种选择可能是将浏览器版本的nanoid代码直接添加到您自己的项目中。
我从github https://github.com/ai/nanoid/blob/main/index.browser.js中提取了浏览器版本的代码，并将其放入下面的script标签中（去掉urlAlphabet导入），您可以将其添加到您的代码中。请记住，此代码将全局添加nanoid，customAlphabet，customRandom，urlAlphabet和random变量，因此请确保与您的全局变量没有任何冲突。

<!-- Code for nanoid directly from the github with urlAlphabet import removed -->
<!-- https://github.com/ai/nanoid/blob/main/index.browser.js -->
<script>
let urlAlphabet =
  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'
let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))
let customRandom = (alphabet, size, getRandom) => {
  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1
  let step = -~((1.6 * mask * size) / alphabet.length)
  return () => {
    let id = ''
    while (true) {
      let bytes = getRandom(step)
      let j = step
      while (j--) {
        id += alphabet[bytes[j] & mask] || ''
        if (id.length === size) return id
      }
    }
  }
}
let customAlphabet = (alphabet, size) => customRandom(alphabet, size, random)
let nanoid = (size = 21) => {
  let id = ''
  let bytes = crypto.getRandomValues(new Uint8Array(size))
  while (size--) {
    let byte = bytes[size] & 63
    if (byte < 36) {
      // `0-9a-z`
      id += byte.toString(36)
    } else if (byte < 62) {
      // `A-Z`
      id += (byte - 26).toString(36).toUpperCase()
    } else if (byte < 63) {
      id += '_'
    } else {
      id += '-'
    }
  }
  return id
}
</script>

<p id="code"></p>

<!-- You can now use the nanoid() function in your javascript code -->
<script>
const id = nanoid();

document.getElementById("code").innerHTML = id;
</script>

谁有这个错误：
错误[错误_请求_ESM]：...
作者从nanoid@4.0.0起移除了CommonJS支持
1.尝试使用ESM模块导入
1.或者使用nanoid@3.0.0：第一个月

我正在用这个纳米机器人，让我分享我的概念验证，

import {nanoid} from 'nanoid';
const id = nanoid(length).toString();

尝试在请求{ nanoid }之前添加圆括号，然后声明一个名为ID的变量来存储它：

var { nanoid } = require('nanoid');

var ID = nanoid();

我用的是纳米机器人2.1.9版

const nanoid = require('nanoid')
let id = nanoid(5)