Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

production build fails when CSS module is imported on multiple pages #126

Closed
mxmul opened this issue Feb 28, 2021 · 2 comments
Closed

production build fails when CSS module is imported on multiple pages #126

mxmul opened this issue Feb 28, 2021 · 2 comments

Comments

@mxmul
Copy link

mxmul commented Feb 28, 2021

Minimal repro

./src/pages/page-a.module.css:

.foo { color: hotpink; }

./src/pages/page-a.tsx:

import { definePage } from 'microsite/page';
import styles from './page-a.module.css';

export default definePage(() => <div class={styles.foo} />);

./src/pages/page-b.tsx (same as page-a.tsx):

import { definePage } from 'microsite/page';
import styles from './page-a.module.css';

export default definePage(() => <div class={styles.foo} />);

Expectation

This should result in a shared CSS asset that's loaded on both page-a.html and page-b.html.

Actual

$ yarn build
[snowpack] ! building source files...
[snowpack] ✔ build complete [0.02s]
[snowpack] ! installing dependencies...
[snowpack] ✔ install complete! [0.07s]
[snowpack] ! verifying build...
[snowpack] ✔ verification complete [0.00s]
[snowpack] ! writing build to disk...
[snowpack] ▶ Build Complete!


Unexpected chunk: page-a.module var modules_72970e0d = {"foo":"foo_951dd"};

export { modules_72970e0d };

node:internal/process/promises:227
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '~/app/.microsite/ssr/page-a.module.js' imported from ~/app/.microsite/ssr/pages/page-b.js
    at new NodeError (node:internal/errors:329:5)
    at finalizeResolution (node:internal/modules/esm/resolve:301:11)
    at moduleResolve (node:internal/modules/esm/resolve:736:10)
    at Loader.defaultResolve [as _resolve] (node:internal/modules/esm/resolve:847:11)
    at Loader.resolve (node:internal/modules/esm/loader:86:40)
    at Loader.getModuleJob (node:internal/modules/esm/loader:230:28)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:57:40)
    at link (node:internal/modules/esm/module_job:56:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

note: this works fine in dev mode

@natemoo-re
Copy link
Owner

Thank you for opening an issue! I'll work on a fix now, hope to get it into #94 which is waiting on a pending Snowpack release.

This is definitely a missed edge case. I will be sure to add a test for this once #104 is ready.

@natemoo-re
Copy link
Owner

@mxmul I fixed this and refactored the output structure a bit. Feel free to reopen if you're still running into problems with microsite@1.1.0-next.10.

natemoo-re added a commit that referenced this issue Mar 19, 2021
* wip: snowpack@3.0.0 changes

* fix: remove custom document logic from dev

* wip: remap snowpack@3.0.0 default output directories

* fix(#81): remove PostCSS from core dependencies

* fix(#81): remove prettier from core dependencies

* fix(83): exclude image/font MIME types from transform

* fix(dev): implements a few more snowpack@3.0.0 changes

* Ensure shared hydration chunks are included in build (#105)

Also include updated package-lock.json based on instructions in https://github.com/natemoo-re/microsite/blob/1853843192cb9e0baa8ff93f872cb595a64fbe7f/.github/CONTRIBUTING.md

* Ensure head is rendered for SSG

It seems the implementation was intended to achieve this sort of isolation the same way `docContext` is used. But the `useRef` version was basically just sending any children in `Head` into the memory hole on build.

* Add another page just to validate that each page gets a new head context as expected

* chore: changeset

* chore: release 1.1.0-next.4

* Fix an issue with binary public file corruption (#110)

* Ensure head is rendered for SSG

It seems the implementation was intended to achieve this sort of isolation the same way `docContext` is used. But the `useRef` version was basically just sending any children in `Head` into the memory hole on build.

* Add another page just to validate that each page gets a new head context as expected

* Fix an issue with binary public file corruption

The previous behavior was reading binary files as strings, which was corrupting them on output

* fix: missed rebase issue

* fix: properly resolve example script in CI

* fix: remove assumption that code lives in "node_modules"

* fix(examples): prefer readFile to fetch

* fix: pin preact to 10.5.10

* fix: pin snowpack to 3.0.x

* chore: changeset

* chore: v1.1.0-next.5

* chore: fixup package-locks

* chore: fixup package-lock files

* chore: ignore logfiles

* Fix requestIdleCallback logic (#112)

* fix(#111): hydration failure in safari

* chore: update package lock

* fix(#111): use requestIdleCallback shim

* chore: changeset

* fix: update createPersistentFragment for preact@10.5.11+

* chore: changeset

* chore: v1.1.0-next.6

* chore: bump package-lock

* chore: update example locks

* fix(#119): remove `defer` from inline script

* Omit base tag by default (#117)

* Omit base tag by default

* Ensure resources are prefixed with `/` when base tag is omitted

* Lol whoops I meant to remove this

* fix(#115): do not include vendor chunk in hydrateBindings

* chore: publish create-microsite@0.2.0

* chore: add changeset

* chore: v1.1.0-next.7

* chore(deps): snowpack@3.0.13

* fix(#125): prefer pinned Skypack URLs

* chore: remove debug

* chore: changeset

* chore: 1.1.0-next.8

* WIP: dev ssr (#113)

* fix(dev): implements a few more snowpack@3.0.0 changes

* Ensure shared hydration chunks are included in build (#105)

Also include updated package-lock.json based on instructions in https://github.com/natemoo-re/microsite/blob/1853843192cb9e0baa8ff93f872cb595a64fbe7f/.github/CONTRIBUTING.md

* chore: fixup package-locks

* chore: fixup package-lock files

* chore: update example locks

* WIP: dev ssr

* WIP: dev ssr getStaticProps/Paths

* feat: add proper error page handling in dev mode

* chore(examples): update deps

* feat: finalize dev SSR support

* chore(examples): add CSS-in-JS examples

* chore(examples): update goober example

* fix: cleanup deps

Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com>

* fix(#126): emit shared css modules (#127)

* chore: v1.1.0-next.9

* chore: remove package-locks?

* fix: shared CSS module logic

* chore: 1.1.0-next.10

* feat(hydration): add "fallback" prop to "withHydrate"

* fix: global chunk loading

* chore(examples): add custom ssr fallback example

* chore: v1.1.0-next.11

* Add benchmark action (#129)

* feat: add gzip/brotli to benchmark

* chore(action): add benchmark test action

* chore(action): test benchmark

* chore(action): test benchmark

* chore(action): update benchmark filter

* chore(action): update benchmark scripts

* chore: revert lockfile to v1

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark action

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): update benchmark script

* chore(action): add context to benchmark message

* chore(action): update benchmark to 15 runs

* chore(action): require manual trigger for benchmark action

* chore(action): fixup benchmark script

* chore(action): add commit to benchmark action

* chore(action): fix workflow_dispatch

* docs: update benchmark

* chore: update benchmark table formatting

* chore(bench): restructure benchmarks

* chore(bench): add counter example

* chore(bench): add lighthouse scores to benchmark

* chore(bench): run benchmarks

* chore(bench): update size label

* Fix preact import regex matching other things (#135)

* docs: fix wrong variable, update css in js context (#131)

* doc: fix wrong variable name

* doc: fix file naming, since it doesn't render jsx

* doc: adding with-fela and with-goober example

* update without .md extension

* Update styling.md

* Fix preact import regex matching other things

Currently preact import regex matches other things (e.g @mdx-js/preact).

* Escape forward slashes

Co-authored-by: Sigit Prabowo <sgt@prbw.net>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Fix incorrect field used for aliases from snowpack user config (#136)

* docs: fix wrong variable, update css in js context (#131)

* doc: fix wrong variable name

* doc: fix file naming, since it doesn't render jsx

* doc: adding with-fela and with-goober example

* update without .md extension

* Update styling.md

* Fix aliases from userConfig not being loaded

Co-authored-by: Sigit Prabowo <sgt@prbw.net>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>

* Ensure nested imports are hydrated, allow optional display name override for named exports (#140)

* final changes for v1.1.0

Co-authored-by: eyelidlessness <eyelidlessness@users.noreply.github.com>
Co-authored-by: eyelidlessness <gnosis@gmail.com>
Co-authored-by: Reeto Chatterjee <github@ree.to>
Co-authored-by: Sigit Prabowo <sgt@prbw.net>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants