将@SVGR/cli 与模板示例一起使用会引发`SyntaxError: Cannot use import statement outside a module`

Question

我正在使用SVGR 的 CLI 工具尝试为与 Next 兼容的MUI兼容 React 图标创建模板。 根据他们的文档：

Template

Specify a template file (CLI) or a template function (API) to use. For an example of template, see the default one.

Default CLI Override                API Override
basic template         --template   template: <func>

您可以看到它们指向项目的defaultTemplate.ts文件，如下所示：

import type { Template } from './types'

export const defaultTemplate: Template = (variables, { tpl }) => {
  return tpl`
${variables.imports};
${variables.interfaces};
const ${variables.componentName} = (${variables.props}) => (
  ${variables.jsx}
);
 
${variables.exports};
`
}

我试图布置一个看起来像这样的快速纱线项目：

/

package.json

{
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@svgr/webpack": "^6.2.1",
    "babel-loader": "^8.0.6",
    "webpack": "^5.68.0"
  },
  "scripts": {
    "build": "npx @svgr/cli --typescript --memo --svg-props preserveAspectRatio='xMidYMid meet' --template ./template --out-dir dist -- icons"
  }
}

模板/

mui.template.ts

（与默认模板相同）

package.json

{
  "name": "mui.template",
  "version": "1.0.0",
  "type": "module",
  "description": "MUI icon template for SVGR",
  "main": "mui.template.ts",
  "author": "Me",
  "license": "MIT"
}

但无论我做什么，它都会抱怨我：

Error when loading "--template": ./template

.../next/template/mui.template.ts:1
import { Template } from '@svgr/babel-plugin-transform-svg-component';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1026:15)
    at Module._compile (node:internal/modules/cjs/loader:1061:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Option.parseArg (/.../.npm/_npx/0b534691f7d2b666/node_modules/@svgr/cli/dist/index.js:317:22)
    at handleOptionValue (/.../.npm/_npx/0b534691f7d2b666/node_modules/commander/lib/command.js:545:24)
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

起初我认为这是因为我缺少一个带有{"type": "module"}的package.json ，然后我读了一些关于使其成为.mts文件的内容，或者可能是一些不正确的依赖项，但我没有尝试过似乎正在工作。 我怎样才能使这个模板文件表现得像一个模块？

---

更新：我现在知道这绝对是@svgr（或我的本地？）中强制< ES6导入语法的东西。 用require()和module.exports =重写。 只需要弄清楚如何强制它在 ES6 模式下运行。

Answer 1

但是他们在自定义组件模板文档页面上使用module.export 。

您在 OP 中展示的那个是与 webpack 一起使用的，它将被转译。

---

可能正在更改https://github.com/gregberge/svgr/blob/main/build/rollup.config.js中rollup-plugin-esbuild插件的target属性，并重建 cli 部分可能会有所帮助。

有关汇总配置的更多信息： https ://github.com/egoist/rollup-plugin-esbuild

Answer 2

您可以将构建命令更改为：

   "build": "tsc ./template.ts && npx @svgr/cli --typescript --memo --svg-props preserveAspectRatio='xMidYMid meet' --template ./template.js --out-dir dist -- icons"

希望我没有误解您的要求 - 这有助于为我解决导入问题。 如果是这样，道歉:)