solidjs-community / rollup-preset-solid Goto Github PK

I tried to build my simple library with this plugin. The config for this was simple enough:

withSolid({
    input: "src/index.ts",
    targets: ["esm", "cjs"]
})

The first issue I discovered was the line with "solid" in package.json:

"exports": {
    ".": {
      "solid": "./dist/source/my-lib.jsx",
      ...
    }
  }

I got the following error:

Failed to resolve entry for package "my-package". The package may have incorrect main/module/exports specified in its package.json.

So I needed to remove line with "solid" from the exports and the issue disappeared.
Then I tried to use my lib with SPA (vite) and everything worked. However when I tried to use it with Astro, I got the following error:

> astro dev

   astro  v2.1.9 started in 111ms
  
  ┃ Local    http://127.0.0.1:3000/
  ┃ Network  use --host to expose
  
15:15:39 [vite] Error when evaluating SSR module /@fs/D:/Projects/test/packages/my-package/dist/esm/index.js:

15:15:39 [vite] Error when evaluating SSR module /src/examples/Horizontal.tsx:

15:15:39 [vite] Error when evaluating SSR module D:\Projects\test\apps\website\src\pages\index.astro:

 error   __vite_ssr_import_0__.template is not a function
  File:
    D:\Projects\test\src\constants.ts:398:28
  Stacktrace:
TypeError: __vite_ssr_import_0__.template is not a function
    at ../../src/constants.ts:398:28
    at async instantiateModule (file:///D:/Projects/test/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:9)

 error   __vite_ssr_import_0__.template is not a function
  File:
    D:\Projects\test\apps\website\D:\Projects\test\src\constants.ts:398:28
  Stacktrace:
TypeError: __vite_ssr_import_0__.template is not a function
    at ../../src/constants.ts:398:28
    at async instantiateModule (file:///D:/Projects/test/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-79892de8.js:53996:9)

It seems that this preset bundles all files into a single dist/esm/index.js. Is it possible to keep it in multiple files?

When using in a library/package with moduleResolution set to node16 or nodenext, file extensions are required for local imports.
for ts files, imports should end in .js and for tsx files, they should end in .jsx.

using rollup-preset-solid as-is, .js imports work fine, however any ending in .jsx fail to resolve and requires the use of @rollup/plugin-typescript

Could this behaviour be rolled into this preset, as I have seen a few people come unstuck when trying to move to modern module resolution.

Currently all the output files are using the .js extension. This is an issue because if the package.json file has "type": "module", then all the cjs/*.js imports error with the error:

require() of ES Module <file>.js from <file>.cjs not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in <path>/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

And, I suspect that the reverse is true as well (trying to import from a package without "type": "module"), though I haven't verified it.

In order to properly support these imports could you please either:

• switch based on the package.json's "type":
  • with "type": "module", CommonJS files end in .cjs and ESM files end in .js
  • without "type": "module", CommonJS files end in .js and ESM files end in .mjs
• or just always have all CommonJS files end in .cjs and all ESM files end in .mjs

I believe this is the cause of solidjs-community/solid-aria#75.

The plugin is not importing the solid-js/web package (or other packages) when iife is used.

Rollup config

import withSolid from "rollup-preset-solid";

export default withSolid({
  input: "App.tsx",
  output: {
    dir: "dist",
    format: "iife",
    sourcemap: false,
  },
});

Code:

import { render } from "solid-js/web";
render(() => <div>Hey</div>, document.body);

Output:

(function (web) {
	'use strict';

	const _tmpl$ = /*#__PURE__*/web.template(`<div>Hey</div>`, 2);
	web.render(() => _tmpl$.cloneNode(true), document.body);

})(web);

In my package I was exporting functions from the index.ts entry file. Even though I was using JSX in other files, the index.ts had no reason to have an .tsx extension.

Hence I feed that input to the solid rollup preset like so: { input: "src/index.ts" }

This causes the entry file of dist/source to be index.js, not index.jsx, which I didn't know there was anything wrong with until I used the package in solid-start, and saw this error:

Now I get what's wrong, and corrected it.

But wouldn't it be nice to display some sort of a waring that the entry file should be .tsx/.jsx to generate the source output. Because the source export makes sense only with JSX right?
Anyway, I just thought I share it – it was confusing to figure out.

{
  "exports": {
    "import": {
      "browser": {
        "development": "./dist/esm/browser/development/index.js",
        "default": "./dist/esm/browser/production/index.js"
      },
      "node": {
        "development": "./dist/esm/node/development/index.js",
        "default": "./dist/esm/node/production/index.js"
      },
      "solid": {
        "development": "./dist/esm/solid/development/index.jsx",
        "default": "./dist/esm/solid/production/index.jsx"
      }
    },
    "require": {
      "browser": {
        "development": "./dist/cjs/browser/development/index.js",
        "default": "./dist/cjs/browser/production/index.js"
      },
      "node": {
        "development": "./dist/cjs/node/development/index.js",
        "default": "./dist/cjs/node/production/index.js"
      },
      "solid": {
        "development": "./dist/cjs/solid/development/index.jsx",
        "default": "./dist/cjs/solid/production/index.jsx"
      }
    }
  }
}

This is probably the outline that would (could) be better. "browser" and "node" is aimed for dom and ssr modes for solid's babel plugin. import and require are separated since these are interchangeable regardless of the environment. solid is for the preserved jsx, useful for universal mode (probably).

This might be breaking since this requires new output structure.

Currently, the source in package.json takes precedence over the input option. Additionally, it seems the output option is ignored entirely. Can we please change this, so that input/output can be overriden?

Versions:
"rollup": "^3.28.0"
"rollup-preset-solid": "^2.0.1"

System:
Mac OS 13.3.1 (22E261) (M2 chip)

Rollup Config:

import withSolid from 'rollup-preset-solid';

export default withSolid([
  {
    input: 'src/index.tsx',
    mappingName: 'browser',
    targets: ['cjs', 'esm']
  },
  {
    input: 'src/index.tsx',
    mappingName: 'server',
    solidOptions: {
      generate: 'ssr'
    }
  }
]);

Source File:

export const mergeDefaults = <T extends object, const D extends Partial<T>>(
  source: T,
  defaults: D,
) => mergeProps(defaults, source) as DefaultAdded<T, D>;

Generated Output (in Source):

export const mergeDefaults = ;
const D, Partial;
 > (source);
T,
    defaults;
D,
;
mergeProps(defaults, source);

Notice that the generated function is broken.

Hi,

Since the release of rollup 3.0 I get the following error message:

> rollup -c

(node:23388) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

Original error: Cannot use import statement outside a module
https://rollupjs.org/guide/en/#--bundleconfigascjs
.../node_modules/.pnpm/[email protected]/node_modules/rollup-preset-solid/dist/esm/index.js:10
import ts from "typescript";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:360:18)
    at wrapSafe (node:internal/modules/cjs/loader:1078:15)
    at Module._compile (node:internal/modules/cjs/loader:1113:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1203:10)
    at Module.load (node:internal/modules/cjs/loader:1027:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at ESMLoader.import (node:internal/modules/esm/loader:526:24)

The error goes away if I add "type": "module" into your package.json.

Can you please add this to your package.json

I really want to use this but can't legally unless it includes a license, preferably MIT