Giters

ElMassimo / iles

🏝 The joyful site generator

Home Page:https://iles.pages.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Dev works but build fails with SyntaxError: Named export not found

dhruvkb opened this issue · comments

commented

Description 📖

Provide a clear and concise description of what the bug is.
In my code I have a TS file with an import.

import type { SimpleIcon } from 'simple-icons'
import { siVuedotjs } from 'simple-icons'

// ... more TS

Everything works fine in dev mode but as soon as I try to build the site, it fails with the following error message.

build error:
 file:///Users/dhruvkb/Documents/personal/portfolio/.iles-ssg-temp/assets/Icon-f18f790b.mjs:1
import { siVuedotjs } from 'simple-icons'
         ^^^^^^^^^^
SyntaxError: Named export 'siVuedotjs' not found. The requested module 'simple-icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'simple-icons';
const { siVuedotjs } = pkg;

Reproduction 🐞

Please provide a link to a repo that can reproduce the problem you ran into.

I haven't pushed the code online because it won't build.

Dependencies Info

Run npx iles info and pnpm list (or npm list) and provide the output:

iles v0.9.0 vite v4.0.3

portfolio-brut@0.0.0 /Users/dhruvkb/Documents/personal/portfolio-brut
├── @rushstack/eslint-patch@1.2.0
├── @vue/eslint-config-typescript@11.0.2
├── @vue/tsconfig@0.1.3
├── @vueuse/core@9.9.0
├── autoprefixer@10.4.13
├── axios@1.2.2
├── eslint-config-airbnb-base@15.0.0
├── eslint-config-prettier@8.6.0
├── eslint-import-resolver-typescript@3.5.2
├── eslint-plugin-tailwindcss@3.8.0
├── eslint-plugin-vue@9.8.0
├── eslint-plugin-vuejs-accessibility@2.0.0
├── eslint@8.31.0
├── husky@8.0.2
├── iles@0.9.0
├── lint-staged@13.1.0
├── pinia@2.0.28
├── postcss-import@15.1.0
├── postcss@8.4.20
├── prettier-plugin-tailwindcss@0.2.1
├── prettier@2.8.1
├── reschume@0.0.0-alpha.3
├── simple-icons@8.2.0
├── tailwindcss@3.2.4
├── typescript@4.9.4
├── vue-tsc@1.0.19
└── vue@3.2.45

Logs 📜

If not providing a reproduction:

Output

Run DEBUG=iles:* npm run dev or DEBUG=iles:* npm run build and provide the output:

❯ DEBUG=iles:* npm run build

> portfolio-brut@0.0.0 prebuild
> npm run checks


> portfolio-brut@0.0.0 checks
> npm run types && npm run lint


> portfolio-brut@0.0.0 types
> vue-tsc --noEmit


> portfolio-brut@0.0.0 lint
> eslint --ignore-path .gitignore --ext .ts,.js,.vue .


> portfolio-brut@0.0.0 build
> iles build

iles v0.9.0 vite v4.0.3
  iles:config loaded config at /Users/dhruvkb/Documents/personal/portfolio/iles.config.ts +0ms
  iles:config {
  iles:config   root: '/Users/dhruvkb/Documents/personal/portfolio',
  iles:config   modules: [
  iles:config     {
  iles:config       name: 'iles:base-config',
  iles:config       debug: true,
  iles:config       drafts: false,
  iles:config       turbo: false,
  iles:config       jsx: undefined,
  iles:config       root: '/Users/dhruvkb/Documents/personal/portfolio',
  iles:config       base: '/',
  iles:config       siteUrl: '',
  iles:config       prettyUrls: true,
  iles:config       ssg: [Object],
  iles:config       configPath: '/Users/dhruvkb/Documents/personal/portfolio/iles.config.ts',
  iles:config       assetsDir: 'assets',
  iles:config       pagesDir: 'pages',
  iles:config       srcDir: 'src',
  iles:config       outDir: 'dist',
  iles:config       layoutsDir: 'layouts',
  iles:config       tempDir: '.iles-ssg-temp',
  iles:config       modules: [],
  iles:config       namedPlugins: [Object],
  iles:config       resolvePath: undefined,
  iles:config       vitePlugins: [Array],
  iles:config       vite: [Object],
  iles:config       vue: [Object],
  iles:config       extendFrontmatter: [AsyncFunction: extendFrontmatter],
  iles:config       extendRoute: [Function: extendRoute],
  iles:config       extendRoutes: [Function: extendRoutes],
  iles:config       markdown: [Object],
  iles:config       components: [Object]
  iles:config     },
  iles:config     {
  iles:config       name: '@islands/mdx',
  iles:config       markdown: [Object],
  iles:config       configResolved: [Function: configResolved]
  iles:config     },
  iles:config     {
  iles:config       name: 'user-config',
  iles:config       siteUrl: 'https://dhruvkb.dev',
  iles:config       configPath: '/Users/dhruvkb/Documents/personal/portfolio/iles.config.ts'
  iles:config     },
  iles:config     {
  iles:config       name: '@islands/pages',
  iles:config       configResolved: [Function: configResolved]
  iles:config     }
  iles:config   ],
  iles:config   debug: true,
  iles:config   drafts: false,
  iles:config   turbo: false,
  iles:config   base: '/',
  iles:config   siteUrl: 'https://dhruvkb.dev',
  iles:config   prettyUrls: true,
  iles:config   ssg: { sitemap: true },
  iles:config   configPath: '/Users/dhruvkb/Documents/personal/portfolio/iles.config.ts',
  iles:config   assetsDir: 'assets',
  iles:config   pagesDir: '/Users/dhruvkb/Documents/personal/portfolio/src/pages',
  iles:config   srcDir: '/Users/dhruvkb/Documents/personal/portfolio/src',
  iles:config   outDir: '/Users/dhruvkb/Documents/personal/portfolio/dist',
  iles:config   layoutsDir: '/Users/dhruvkb/Documents/personal/portfolio/src/layouts',
  iles:config   tempDir: '/Users/dhruvkb/Documents/personal/portfolio/.iles-ssg-temp',
  iles:config   namedPlugins: {
  iles:config     components: {
  iles:config       name: 'unplugin-vue-components',
  iles:config       enforce: 'post',
  iles:config       api: [Object],
  iles:config       transformInclude: [Function: transformInclude],
  iles:config       transform: [Function (anonymous)],
  iles:config       vite: [Object],
  iles:config       webpack: [Function: webpack],
  iles:config       configResolved: [Function: configResolved],
  iles:config       configureServer: [Function: configureServer]
  iles:config     },
  iles:config     vue: {
  iles:config       name: 'vite:vue',
  iles:config       handleHotUpdate: [Function: handleHotUpdate],
  iles:config       config: [Function: config],
  iles:config       configResolved: [Function: configResolved],
  iles:config       configureServer: [Function: configureServer],
  iles:config       buildStart: [Function: buildStart],
  iles:config       resolveId: [AsyncFunction: resolveId],
  iles:config       load: [Function: load],
  iles:config       transform: [Function: transform]
  iles:config     },
  iles:config     pages: {
  iles:config       name: 'iles:pages',
  iles:config       enforce: 'pre',
  iles:config       api: [Getter],
  iles:config       configResolved: [AsyncFunction: configResolved],
  iles:config       configureServer: [AsyncFunction: configureServer],
  iles:config       buildStart: [AsyncFunction: buildStart],
  iles:config       resolveId: [AsyncFunction: resolveId],
  iles:config       load: [AsyncFunction: load],
  iles:config       transform: [AsyncFunction: transform]
  iles:config     }
  iles:config   },
  iles:config   vitePlugins: [
  iles:config     {
  iles:config       name: 'iles:mdx:compile',
  iles:config       configResolved: [AsyncFunction: configResolved],
  iles:config       transform: [AsyncFunction: transform]
  iles:config     },
  iles:config     { name: 'iles:mdx:sfc', transform: [AsyncFunction: transform] },
  iles:config     {
  iles:config       name: 'iles:mdx:hmr',
  iles:config       apply: 'serve',
  iles:config       transform: [Function: transform]
  iles:config     },
  iles:config     {
  iles:config       name: 'iles:pages',
  iles:config       enforce: 'pre',
  iles:config       api: [Getter],
  iles:config       configResolved: [AsyncFunction: configResolved],
  iles:config       configureServer: [AsyncFunction: configureServer],
  iles:config       buildStart: [AsyncFunction: buildStart],
  iles:config       resolveId: [AsyncFunction: resolveId],
  iles:config       load: [AsyncFunction: load],
  iles:config       transform: [AsyncFunction: transform]
  iles:config     }
  iles:config   ],
  iles:config   vite: {
  iles:config     root: '/Users/dhruvkb/Documents/personal/portfolio',
  iles:config     resolve: { alias: [Array], dedupe: [Array] },
  iles:config     server: { fs: [Object] },
  iles:config     build: { cssCodeSplit: false, assetsDir: 'assets' },
  iles:config     define: { 'import.meta.env.DISPOSE_ISLANDS': false },
  iles:config     optimizeDeps: { include: [Array], exclude: [Array] },
  iles:config     base: '/'
  iles:config   },
  iles:config   vue: {
  iles:config     reactivityTransform: true,
  iles:config     template: { compilerOptions: [Object] }
  iles:config   },
  iles:config   extendFrontmatter: [AsyncFunction (anonymous)],
  iles:config   extendRoute: [AsyncFunction (anonymous)],
  iles:config   extendRoutes: [AsyncFunction (anonymous)],
  iles:config   markdown: {
  iles:config     jsxRuntime: 'automatic',
  iles:config     jsxImportSource: 'iles',
  iles:config     providerImportSource: 'iles',
  iles:config     rehypePlugins: [ [Array] ],
  iles:config     remarkPlugins: [ [Array], [Array], [Array], [Array] ],
  iles:config     recmaPlugins: [ [Function: recmaVueResolveComponents], [Function (anonymous)] ]
  iles:config   },
  iles:config   components: {
  iles:config     dts: true,
  iles:config     extensions: [ 'vue', 'jsx', 'tsx', 'js', 'ts', 'mdx', 'svelte' ],
  iles:config     include: [ /\.vue$/, /\.vue\?vue/, /\.mdx?/ ],
  iles:config     dirs: 'src/components',
  iles:config     resolvers: [ [Function: IlesComponentResolver], [Function (anonymous)] ],
  iles:config     transformer: 'vue3'
  iles:config   }
  iles:config } +0ms
  iles:config {
  iles:config   root: '/Users/dhruvkb/Documents/personal/portfolio',
  iles:config   modules: [
  iles:config     {
  iles:config       name: 'iles:base-config',
  iles:config       debug: true,
  iles:config       drafts: false,
  iles:config       turbo: false,
  iles:config       jsx: undefined,
  iles:config       root: '/Users/dhruvkb/Documents/personal/portfolio',
  iles:config       base: '/',
  iles:config       siteUrl: '',
  iles:config       prettyUrls: true,
  iles:config       ssg: [Object],
  iles:config       configPath: '/Users/dhruvkb/Documents/personal/portfolio/iles.config.ts',
  iles:config       assetsDir: 'assets',
  iles:config       pagesDir: 'pages',
  iles:config       srcDir: 'src',
  iles:config       outDir: 'dist',
  iles:config       layoutsDir: 'layouts',
  iles:config       tempDir: '.iles-ssg-temp',
  iles:config       modules: [],
  iles:config       namedPlugins: [Object],
  iles:config       resolvePath: undefined,
  iles:config       vitePlugins: [Array],
  iles:config       vite: [Object],
  iles:config       vue: [Object],
  iles:config       extendFrontmatter: [AsyncFunction: extendFrontmatter],
  iles:config       extendRoute: [Function: extendRoute],
  iles:config       extendRoutes: [Function: extendRoutes],
  iles:config       markdown: [Object],
  iles:config       components: [Object]
  iles:config     },
  iles:config     {
  iles:config       name: '@islands/mdx',
  iles:config       markdown: [Object],
  iles:config       configResolved: [Function: configResolved]
  iles:config     },
  iles:config     {
  iles:config       name: 'user-config',
  iles:config       siteUrl: 'https://dhruvkb.dev',
  iles:config       configPath: '/Users/dhruvkb/Documents/personal/portfolio/iles.config.ts'
  iles:config     },
  iles:config     {
  iles:config       name: '@islands/pages',
  iles:config       configResolved: [Function: configResolved]
  iles:config     }
  iles:config   ],
  iles:config   debug: true,
  iles:config   drafts: false,
  iles:config   turbo: false,
  iles:config   base: '/',
  iles:config   siteUrl: 'https://dhruvkb.dev',
  iles:config   prettyUrls: true,
  iles:config   ssg: { sitemap: true },
  iles:config   configPath: '/Users/dhruvkb/Documents/personal/portfolio/iles.config.ts',
  iles:config   assetsDir: 'assets',
  iles:config   pagesDir: '/Users/dhruvkb/Documents/personal/portfolio/src/pages',
  iles:config   srcDir: '/Users/dhruvkb/Documents/personal/portfolio/src',
  iles:config   outDir: '/Users/dhruvkb/Documents/personal/portfolio/dist',
  iles:config   layoutsDir: '/Users/dhruvkb/Documents/personal/portfolio/src/layouts',
  iles:config   tempDir: '/Users/dhruvkb/Documents/personal/portfolio/.iles-ssg-temp',
  iles:config   namedPlugins: {
  iles:config     components: {
  iles:config       name: 'unplugin-vue-components',
  iles:config       enforce: 'post',
  iles:config       api: [Object],
  iles:config       transformInclude: [Function: transformInclude],
  iles:config       transform: [Function (anonymous)],
  iles:config       vite: [Object],
  iles:config       webpack: [Function: webpack],
  iles:config       configResolved: [Function: configResolved],
  iles:config       configureServer: [Function: configureServer]
  iles:config     },
  iles:config     vue: {
  iles:config       name: 'vite:vue',
  iles:config       handleHotUpdate: [Function: handleHotUpdate],
  iles:config       config: [Function: config],
  iles:config       configResolved: [Function: configResolved],
  iles:config       configureServer: [Function: configureServer],
  iles:config       buildStart: [Function: buildStart],
  iles:config       resolveId: [AsyncFunction: resolveId],
  iles:config       load: [Function: load],
  iles:config       transform: [Function: transform]
  iles:config     },
  iles:config     pages: {
  iles:config       name: 'iles:pages',
  iles:config       enforce: 'pre',
  iles:config       api: [Getter],
  iles:config       configResolved: [AsyncFunction: configResolved],
  iles:config       configureServer: [AsyncFunction: configureServer],
  iles:config       buildStart: [AsyncFunction: buildStart],
  iles:config       resolveId: [AsyncFunction: resolveId],
  iles:config       load: [AsyncFunction: load],
  iles:config       transform: [AsyncFunction: transform]
  iles:config     }
  iles:config   },
  iles:config   vitePlugins: [
  iles:config     {
  iles:config       name: 'iles:mdx:compile',
  iles:config       configResolved: [AsyncFunction: configResolved],
  iles:config       transform: [AsyncFunction: transform]
  iles:config     },
  iles:config     { name: 'iles:mdx:sfc', transform: [AsyncFunction: transform] },
  iles:config     {
  iles:config       name: 'iles:mdx:hmr',
  iles:config       apply: 'serve',
  iles:config       transform: [Function: transform]
  iles:config     },
  iles:config     {
  iles:config       name: 'iles:pages',
  iles:config       enforce: 'pre',
  iles:config       api: [Getter],
  iles:config       configResolved: [AsyncFunction: configResolved],
  iles:config       configureServer: [AsyncFunction: configureServer],
  iles:config       buildStart: [AsyncFunction: buildStart],
  iles:config       resolveId: [AsyncFunction: resolveId],
  iles:config       load: [AsyncFunction: load],
  iles:config       transform: [AsyncFunction: transform]
  iles:config     }
  iles:config   ],
  iles:config   vite: {
  iles:config     root: '/Users/dhruvkb/Documents/personal/portfolio',
  iles:config     resolve: { alias: [Array], dedupe: [Array] },
  iles:config     server: { fs: [Object] },
  iles:config     build: { cssCodeSplit: false, assetsDir: 'assets' },
  iles:config     define: { 'import.meta.env.DISPOSE_ISLANDS': false },
  iles:config     optimizeDeps: { include: [Array], exclude: [Array] },
  iles:config     base: '/'
  iles:config   },
  iles:config   vue: {
  iles:config     reactivityTransform: true,
  iles:config     template: { compilerOptions: [Object] }
  iles:config   },
  iles:config   extendFrontmatter: [AsyncFunction (anonymous)],
  iles:config   extendRoute: [AsyncFunction (anonymous)],
  iles:config   extendRoutes: [AsyncFunction (anonymous)],
  iles:config   markdown: {
  iles:config     jsxRuntime: 'automatic',
  iles:config     jsxImportSource: 'iles',
  iles:config     providerImportSource: 'iles',
  iles:config     rehypePlugins: [ [Array] ],
  iles:config     remarkPlugins: [ [Array], [Array], [Array], [Array] ],
  iles:config     recmaPlugins: [ [Function: recmaVueResolveComponents], [Function (anonymous)] ]
  iles:config   },
  iles:config   components: {
  iles:config     dts: true,
  iles:config     extensions: [ 'vue', 'jsx', 'tsx', 'js', 'ts', 'mdx', 'svelte' ],
  iles:config     include: [ /\.vue$/, /\.vue\?vue/, /\.mdx?/ ],
  iles:config     dirs: 'src/components',
  iles:config     resolvers: [ [Function: IlesComponentResolver], [Function (anonymous)] ],
  iles:config     transformer: 'vue3'
  iles:config   }
  iles:config } +11ms
  iles:detect <GameOfLife client:load> +0ms
  iles:detect <GameOfLife client:load> +72ms
  iles:detect <Kaomoji client:load> +285ms
  iles:detect <Subtitle client:load> +0ms
  iles:detect <PrintButton client:load> +32ms
  iles:detect <PrintButton client:load> +16ms
  iles:detect <Kaomoji client:load> +39ms
  iles:detect <Subtitle client:load> +0ms
✔ building client + server bundles
  done in 2.3s

✔ resolving static paths
  done in 30ms

file:///Users/dhruvkb/Documents/personal/portfolio/.iles-ssg-temp/assets/Icon-f18f790b.mjs:1
import { siAutomattic, siCreativecommons, siFampay, siHackerearth, siWordpress, siDjango, siDocker, siGnubash, siIonic, siJavascript, siJson, siLatex, siMarkdown, siNodedotjs, siNuxtdotjs, siOpenverse, siPython, siReadthedocs, siTailwindcss, siTypescript, siVuedotjs, siGithub, siLinkedin, siInstagram } from "simple-icons";
         ^^^^^^^^^^^^
SyntaxError: Named export 'siAutomattic' not found. The requested module 'simple-icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'simple-icons';
const { siAutomattic, siCreativecommons, siFampay, siHackerearth, siWordpress, siDjango, siDocker, siGnubash, siIonic, siJavascript, siJson, siLatex, siMarkdown, siNodedotjs, siNuxtdotjs, siOpenverse, siPython, siReadthedocs, siTailwindcss, siTypescript, siVuedotjs, siGithub, siLinkedin, siInstagram } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
✖ rendering pages
build error:
 file:///Users/dhruvkb/Documents/personal/portfolio/.iles-ssg-temp/assets/Icon-f18f790b.mjs:1
import { siAutomattic, siCreativecommons, siFampay, siHackerearth, siWordpress, siDjango, siDocker, siGnubash, siIonic, siJavascript, siJson, siLatex, siMarkdown, siNodedotjs, siNuxtdotjs, siOpenverse, siPython, siReadthedocs, siTailwindcss, siTypescript, siVuedotjs, siGithub, siLinkedin, siInstagram } from "simple-icons";
         ^^^^^^^^^^^^
SyntaxError: Named export 'siAutomattic' not found. The requested module 'simple-icons' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'simple-icons';
const { siAutomattic, siCreativecommons, siFampay, siHackerearth, siWordpress, siDjango, siDocker, siGnubash, siIonic, siJavascript, siJson, siLatex, siMarkdown, siNodedotjs, siNuxtdotjs, siOpenverse, siPython, siReadthedocs, siTailwindcss, siTypescript, siVuedotjs, siGithub, siLinkedin, siInstagram } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)

Screenshots 📷

Provide console or browser screenshots of the problem.

commented

For now, I've worked around it by using @islands/icons which is very cool, thank you @ElMassimo!

commented

I'm just going to close this. Although the migration was a bit forced upon me, I'm not facing this issue after switching to @islands/icons.