Solid-icons "doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module"

[Chrysippus]

Using Solid-Start to bootstrap a SolidJS project, I get the following error, TypeError: __vite_ssr_import_0__.template is not a function at eval (/node_modules/.pnpm/solid-icons@0.4.13_solid-js@1.4.3/node_modules/solid-icons/esm/IconWrapper.js:6:38)

If I remove the icons but leave the package in package.json, the build log provides this clarification: solid-icons doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Basically, it means the icon imports don't work with Solid-Start.

So, this could probably use a fix! Otherwise, it means grabbing the raw SVGs and creating custom wrappers for them, which is tedious.

[x64Bits]

That's right, I'm already working on submitting the Cjs compatible package, thank you very much for reporting it.

[nksaraf]

I think you could also look at using something like rollup-preset-solid and ship the JSX as well because that's required for the SSR to work. For SSR, we cant use precompiled JSX because the way Solid transforms JSX for SSR and client-side rendering is different, so we need packages to come with the JSX

Update: Foolishly I didn't check your rollup config earlier, looks like u already use this. Maybe you can include cjs and jsx as additional output formats

[GodBleak]

Yeah, +1 for SSR support. When using any icons with SSR, it produces TypeError: web.template is not a function (from IconWrapper). Adding the solid-icons imports to external in the rollup config changes the error to one about using import outside a module.

[x64Bits]

I'm already working on SSR support, thank you very much for the suggestions, it seems to me that sending JSX can solve it, it worked when I tried, now I'm adapting the library to allow it.

[x64Bits]

Hello @Chrysippus, @nksaraf, @GodBleak, after a long work from version 0.5.0 solid-icons now works with solid-start and SSR, I would like you to test what you think of the result, even though the JSX file is included in the lib, it's not being used as a wrapper, I haven't found a way to make it work with JSX yet.

If you come up with a way to use JSX and it turns out that it's better than sending the compile, you could correct it for the next version or if you like to send a PR.

[x64Bits]

The solid-start build is not working, after reviewing the trace it seems to me that the key "type": "module" is making the server side version look for the ESM version when compiling, if you have any ideas from solid-icons to be able to solve this, I will still be looking for a way to solve it on my part.

[Chrysippus]

I get the following error now on pnpm build with just a single solid-icon tossed on the index page:

Error: 'template' is not exported by node_modules/.pnpm/solid-js@1.4.6/node_modules/solid-js/web/dist/server.js, imported by node_modules/.pnpm/solid-icons@0.5.0_solid-js@1.4.6/node_modules/solid-icons/lib/browser/index.module.js

It really just throws that error for all of the imports in browser/index.module.js.

I'm not entirely sure what is going on here. I'm not familiar enough with rollup to know exactly how to fix this, but this is the error code I get along with the above error:

code: 'MISSING_EXPORT', url: 'https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module',

Following that link provides:

Import declarations must have corresponding export declarations in the imported module. For example, if you have import a from './a.js' in a module, and a.js doesn't have an export default declaration, or import {foo} from './b.js', and b.js doesn't export foo, Rollup cannot bundle the code.

This error frequently occurs with CommonJS modules converted by @rollup/plugin-commonjs, which makes a reasonable attempt to generate named exports from the CommonJS code but won't always succeed, because the freewheeling nature of CommonJS is at odds with the rigorous approach we benefit from in JavaScript modules. It can be solved by using the namedExports option, which allows you to manually fill in the information gaps.

So it seems that something is (missing or) preventing index.module.js from importing from solid-js's server.js -- but again, I'm not exactly sure whether it's just a matter of using namedExports, or what.

Now that I look a little more carefully, the export line from solid-js's server.js looks like this: export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle }; (and similarly for server.cjs with "exports.whatever"). So this line in index.module.js isn't finding any of its imports (except spread): import { spread, insert, memo, effect, setAttribute, style, template } from 'solid-js/web';

These exports are in dev.{js|cjs}, though, which explains why solid-icons work in dev but don't build.

[sya-ri]

I get the following error now on pnpm build with just a single solid-icon tossed on the index page:

Error: 'template' is not exported by node_modules/.pnpm/solid-js@1.4.6/node_modules/solid-js/web/dist/server.js, imported by node_modules/.pnpm/solid-icons@0.5.0_solid-js@1.4.6/node_modules/solid-icons/lib/browser/index.module.js

It occurs because of conditional imports. As an issue similar to this, this is an issue that has already been resolved. The solution is to set an alias path from solid-js/web to solid-js/web/dist/web.js. The library uses parcel instead of rollup, but it will be helpful.

Of course, you can manually change the import of node_modules/solid-icons/lib/browser/index.module.js to build without error, but it isn't a solution.

Anyway, I like solid-js and solid-icons. I'm waiting for this issue to be resolved (Until then, icons are goodbye) :wink:

---

p.s. solid-start build will succeed, but solid-start start will fail. The issue seems a bit more complicated.

$ solid-start start
file:///Users/epq/project/Spigot/spigot-event-list/packages/web/dist/index.js:19501
  const t = document.createElement("template");
            ^

ReferenceError: document is not defined
    at template (file:///Users/epq/project/Spigot/spigot-event-list/packages/web/dist/index.js:19501:13)
    at file:///Users/epq/project/Spigot/spigot-event-list/packages/web/dist/index.js:19796:31
    at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:337:24)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[x64Bits]

Hello @sya-ri thank you very much for exploring a possible solution.

What worked for me was to approach it from Vite's side and add exports path for each package in package.json according to import type, the problem occurs because by default Vite tries to resolve the package's .module file by importing in static generation and SSR, when in SSR mode it should go through the CJS that is by default exported in the package.json of the folder I don't know why this happens.

What they call conditional import, the only problem I observed with doing it this way is that if we want to expose something else from the library, such as the Wrapper, we must set it in the main package.json.

This week I'll be delivering version 1.0.0, I've rewritten the library and added a new icon pack, only I've also been working on the icon explorer website.

I am very grateful for all those who wrote helping to solve this, I will hope that you can test it as soon as I send it, I will leave a message in this thread to know if we can close it.

[sya-ri]

Dear @x64Bits,

Thank you for your excellent work. solid-icons 1.0.0 is working fine for my project using solid-start(SSR) ❤️

[x64Bits]

Hi everyone, i couldn't tell you during the day that I had sent version 1.0.0 of the source code and the library in npm, I hope you can try it, greetings!

Thank you very much @sya-ri.

your support guys has been very helpful, thank you!