Snowpack: Cant build with preact + babel + typescript

[ndom91]

Hey all, I cant seem to get Pika to build / run in the browser.

I am using @pika/web alongside preact, babel, and typescript.

Heres my configs, etc:

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "moduleResolution": "node",

    "rootDir": "./src",
    "outDir": "./dist",

    "strict": false,
    "sourceMap": true,
    "skipLibCheck": true,

    "jsx": "react",
    "jsxFactory": "h",

    "baseUrl": ".",
    "paths": {
      "/web_modules/*.js": [
        "node_modules/*",
        "web_modules/*.js",
      ]
    }
  },
  "include": [ "./src/**/*.tsx", "./src/**/*.ts" ],
  "exclude":  [ "./node_modules/*", "./web_modules/*.js", ]
}

.babelrc

{
  "plugins": [
    ["transform-react-jsx", { "pragma": "h" }],
    [ "module-resolver", {
    "root": ["/dist"],
    "alias": {
        "react": "preact-compat",
        "react-dom": "preact-compat"
    }
    }]
  ],
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "esmodules": true
      }
    }],
    "@babel/preset-react"
  ],
}

Part of package.json

{
  "scripts": {
    "build": "tsc && pika-web",
    "prepare": "pika-web",
    "start": "tsc && serve ./"
  },
  "dependencies": {
    "picostyle": "^2.2.0",
    "preact": "^8.5.2",
    "preact-compat": "^3.19.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.5.5",
    "@pika/web": "^0.3.2",
    "babel-plugin-module-resolver": "^3.2.0",
    "serve": "^10.1.2",
    "ts-loader": "^6.0.4",
    "typescript": "^3.5.3",
    "webpack-modules": "^1.0.0"
  },

Screenshot of my file tree:

My workflow is the following: I begin by running npm build, and typescript confirms everything / builds the .js to /dist, and then pika creates the web_modules folder. Ive then been copying the web_modules folder to /dist, but I know thats wrong - theres gotta be some step I can add to babel or cli flag for pika-web that says to output it to /dist, right?

That compiles well, and then after running npm start and opening the page, I get an error that the 'react' module cannot be resolved. This sounds like an issue with the preact alias, right? Is my babelrc not being applied?

What am I missing?

[ndom91]

Update: Finally got it working, based upon dangodev/pika-web-preact. If anyone else is having a similar issue, you can checkout my project here: ndom91/terminal-homepage.

I am currently also working on a create-react-app like toolbox specifically for preact+typescript+pika/web here: ndom91/create-pika-app (just started today, so please dont judge haha)

[FredKSchott]

When you feel it's ready, please create a PR to add it here! https://github.com/pikapkg/web/blob/master/EXAMPLES.md