Snowpack cannot find imported module

Question

I am working on a website using Preact, and I am trying to proxy requests made in the browser to the development server I'm using as the back end.

When I try to run the front end application with yarn client, it errors out and informs me it cannot find the http2-Proxy module despite my installing it.

My directory structure is as follows:

Website_Root:
|   package.json
|                           
+---dummy-api
|                   
+---frontend
    |   package.json
    |   README.md
    |   snowpack.config.mjs
    |           
    +---public
    |       
    +---src
        |   index.jsx
        |   
        +---assets
        |       
        +---components
        |
        +---routes

I'm attempting to use the Yarn Workspaces feature; as such my package.json at the root level is as follows:

{
  "name": "Website",
  "packageManager": "yarn@3.1.1",
  "scripts": {
    "client": "yarn workspace frontend dev",
    "mockapi": "yarn workspace dummy-api dev",
    "dev": "yarn concurrently --kill-others-on-fail \"yarn client\" \"yarn mockapi\""
  },
  "workspaces": [
    "frontend",
    "dummy-api"
  ],
  "devDependencies": {
    "concurrently": "^6.4.0"
  },
  "dependencies": {
    "preact": "^10.6.4"
  }
}

The package.json inside of the frontend workspace is as follows:

{
  "name": "frontend",
  "private": true,
  "proxy": "http://localhost:9000/api",
  "scripts": {
    "dev": "snowpack dev",
    "build": "snowpack build",
  },
  "dependencies": {
    "axios": "^0.24.0",
    "http2-proxy": "^5.0.53",
    "preact": "^10.6.4",
    "preact-router": "^3.2.1",
    "react-table": "^7.7.0"
  },
  "devDependencies": {
    "@prefresh/snowpack": "^3.0.0",
    "@snowpack/plugin-dotenv": "^2.1.0",
    "@snowpack/web-test-runner-plugin": "^0.2.2",
    "snowpack": "^3.8.8"
  }
}

And, finally, my snowpack.config.js is as follows:

import proxy from "http2-proxy";

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  alias: {
    react: "preact/compat",
    "react-dom/test-utils": "preact/test-utils",
    "react-dom": "preact/compat",
    "react/jsx-runtime": "preact/jsx-runtime",
  },
  mount: {
    public: { url: "/", static: true },
    src: { url: "/dist" },
  },
  plugins: ["@snowpack/plugin-dotenv", "@prefresh/snowpack"],
  routes: [
    {
      match: "all",
      src: "/api/.*",
      dest: (req, res) =>
        proxy.web(req, res, { hostname: "localhost", port: "9000" }),
    },
  ],
  devOptions: {
    open: "none",
  },
};

I can't help but think I've set something up incorrectly; snowpack should be able to find http2-proxy since I've installed it, but I genuinely don't understand what the holdup is.

I've also tried installing http2-proxy at the root level to no avail.

score 0 · Answer 1 · answered Dec 13 '21 at 20:12

I believe I discovered the problem.

I did not initialize the yarn workspaces correctly.

I tried out a minimum working example of preact with snowpack, and found that creating a parent yarn directory, creating the child directories, registering them in the parent package.json and then inside each child subdirectory running yarn init -y instead of yarn init -2 produced the necessary results.

Snowpack cannot find imported module

1 Answers1