Publish SolidJS Typescript to npm

Question

I have a solidJS typescript UI component that I have published to the npm registry.

The project is setup like this:

 |-app
   |-index.html
   |-src
     |-index.tsx
     |-App.tsx
     |-utils
       |- ...
     |-components
       |- ....
   |-README.md
   |-package.json
   |-tsconfig.json
   |-vite.config.ts

 |-package
   |-dist
     |-README.md
     |-package.json
     |- ....
   |-src
     |- ....
   |-README.md
   |-package.json
   |-tsconfig.json
 

I have partitioned it so I can build the lib inside the package/ folder and then have it linked within the app/ using the npm link command.

package.json file looks like this in the package folder:

{
    "name": "@melodev/<package-name>",
    "version": "...",
    "description": "...",
    "main": "./dist/index.js",
    "module": "./dist/index.js",
    "types": "./dist/index.d.ts",
    "files": [
        "dist/"
    ],
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "clean": "rm -rf dist",
        "build": "npm run clean && tsc && cp package.json README.md ./dist"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/..."
    },
    "devDependencies": {
        "typescript": "^4.7.3"
    },
    "dependencies": {
        "solid-js": "^1.4.7",
        "solid-styled-components": "^0.28.4",
        "solid-transition-group": "^0.0.10"
    },
    "keywords": [
      // ...
    ],
    "author": "melodev",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/..."
    },
    "homepage": "https://github.com/..."
}

Using the npm link technique works locally. I'm able to use my component.

import Component from "@melodev/<package-name>";

The problem is that importing the package from npm simply won't work! I mean, the package gets installed, the IDE doesn't complain about anything, but when I run the app...there's only a blank screen and a pretty interesting error message in the console:

Uncaught ReferenceError: React is not defined

But it's not supposed to be a React component!

BTW, my package/tsconfig.json file looks like this so far:

{
    "exclude": ["dist", "node_modules"],
    "compilerOptions": {
        "target": "es6",
        "outDir": "./dist",
        "lib": ["esnext", "DOM", "DOM.Iterable"],
        "declaration": true,
        "jsx": "preserve",
        "allowJs": true,
        "esModuleInterop": true,
        "module": "esnext",
        "rootDir": "./src",
        "moduleResolution": "node",
        "sourceMap": true,
        "importHelpers": true,
        "downlevelIteration": true,
        "strict": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noImplicitAny": false,
        "skipLibCheck": true,
        "skipDefaultLibCheck": true
    }
}

Any helpful ideas/resources would be much appreciated. If someone could provide some sort of guidance on publishing SolidJS typescript packages that would be awesome.

Answer 1

If you want to build a package that uses JSX templates, (e.g. <div></div>) or has a dependency on one that does, (e.g. if you'd like to publish second package that uses this one) you have to build it using rollup and rollup-preset-solid.

If you don't, and you ship only pre-compiled jsx, solid's compiler won't be able to compile the jsx differently for SSR/SPA modes as it builds the app.

You can checkout @solid-primitives/props as an example. Or use this github repo template.

Setting up rollup is very simple, and you probably can just copy paste the setup from package ^

You can enable printInstructions flag in the rollup preset, to see how the module exports in package.json should look like.