Dev works but build fails with SyntaxError: Named export not found
dhruvkb opened this issue · 2 comments
dhruvkb commented
- I have read the troubleshooting section before opening an issue.
- I have tried upgrading
ilesandvite.
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 TSEverything 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.
dhruvkb commented
For now, I've worked around it by using @islands/icons which is very cool, thank you @ElMassimo!
dhruvkb 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.