javascript - 使用 typescript 导出默认数据 SyntaxError : Unexpected token export during bulding on next. js

Question

此处提供代码 => https://codesandbox.io/s/sweet-mcclintock-dhczx?file=/pages/index.js

尝试将 @iconify-icons/cryptocurrency 与 next.js 和 typescript 一起使用时出现初始错误(仅在 typescript 中发生)。

SyntaxError: Unexpected token export
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at eval (webpack-internal:///@iconify-icons/cryptocurrency/usdt:1:18)
    at Object.@iconify-icons/cryptocurrency/usdt (/sandbox/.next/server/pages/index.js:409:1)
    at __webpack_require__ (/sandbox/.next/server/pages/index.js:23:31)
    at eval (webpack-internal:///./pages/index.js:9:92)
    at Module../pages/index.js (/sandbox/.next/server/pages/index.js:398:1)
    at __webpack_require__ (/sandbox/.next/server/pages/index.js:23:31)
    at /sandbox/.next/server/pages/index.js:91:18
    at Object.<anonymous> (/sandbox/.next/server/pages/index.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
/sandbox/node_modules/@iconify-icons/cryptocurrency/usdt.js:6
export default data;

并非所有库都会出现此问题。在我看来，在编译过程中，babel 的库语法有问题。

然后我尝试使用下面的代码转译库 next-transpile-modules 来解决问题。

const withTM = require("next-transpile-modules")([
  "@iconify-icons/cryptocurrency"
]);

module.exports = withTM();

但是新的问题出现了。

Error: next-transpile-modules - an unexpected error happened when trying to resolve "@iconify-icons/cryptocurrency"
Error: Can't resolve '@iconify-icons/cryptocurrency' in '/sandbox'
    at getPackageRootDirectory (/sandbox/node_modules/next-transpile-modules/src/next-transpile-modules.js:87:11)
    at Array.map (<anonymous>)
    at generateModulesPaths (/sandbox/node_modules/next-transpile-modules/src/next-transpile-modules.js:99:33)

总而言之，转译模块是我试图实现主要目标的方式。可能没有必要。

Answer 1

@iconify-icons/cryptocurrency 库的导出方式意味着您需要转译您单独使用的每个图标包。

const withTM = require("next-transpile-modules")([
  "@iconify-icons/cryptocurrency/usdt"
]);

module.exports = withTM();