CODEWITHSUNDEEP
javascripttypescriptbabeljsnext.js
Arthur Costa
Arthur Costa

Reputation: 1549

export default data SyntaxError: Unexpected token export during bulding on next.js using typescript

Code available here => https://codesandbox.io/s/sweet-mcclintock-dhczx?file=/pages/index.js

Initial error when trying to use @iconify-icons/cryptocurrency with next.js and typescript (it happens only when in 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;

The problem does not happen with all libraries. It seems to me that during the transpilation babel has a problem with the library syntax.

Then I've tried to transpile the lib next-transpile-modules to fix the problem using the code below.

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

module.exports = withTM();

But a new problem has happened.

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)

To conclude, transpiling the module is the way I'm trying to achieve the main goal. It might not be necessary.

Upvotes: 3

Views: 2453

Answers (1)

juliomalves
juliomalves

Reputation: 50448

The way the @iconify-icons/cryptocurrency library is exported means you need to transpile each icon package you use individually.

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

module.exports = withTM();

Upvotes: 3

Related Questions