parcel build skips CSS packaging, but parcel serve does not

[xorxsan]

🐛 bug report

When I run parcel build --public-html / the dist folder does generate the imported CSS file. However, running parcel serve --port 3000 correctly generates a CSS file imported from another module.

🎛 Configuration (.babelrc, package.json, cli command)

See gist below.

🤔 Expected Behavior

parcel build should generate an index.[hash].css in dist as parcel serve does.

😯 Current Behavior

parcel build only generates the index.[hash].js and index.html files.

These are the logs from parcel build with --log-level verbose:

$ npm run build:example

> root@ build:example D:\git\test\lerna-parcel
> rimraf .parcel-cache && lerna run build --scope example-app --stream

lerna notice cli v4.0.0
lerna notice filter including "example-app"
lerna info filter [ 'example-app' ]
lerna info Executing command in 1 package: "npm run build"
example-app: > [email protected] build D:\git\test\lerna-parcel\examples\example-app
example-app: > rimraf dist && parcel build --public-url / --log-level verbose --no-optimize
example-app: Building index.html...
example-app: Building index.tsx...
example-app: @parcel/transformer-js: Non-static access of an `import` or `require`. This
example-app: causes tree shaking to be disabled for the resolved module.
example-app:   D:\git\test\lerna-parcel\examples\example-app\src\index.tsx:1:1
example-app:   > 1 | import React from "react";
example-app:   >   | ^
example-app:     2 | import ReactDOM from "react-dom";
example-app:     3 | import { App } from "my-package";
example-app:   ℹ Learn more:
example-app:      https://parceljs.org/features/scope-hoisting/#dynamic-member-accesses
example-app: @parcel/transformer-js: Non-static access of an `import` or `require`. This
example-app: causes tree shaking to be disabled for the resolved module.
example-app:   D:\git\test\lerna-parcel\examples\example-app\src\index.tsx:6:18
example-app:     5 |
example-app:   > 6 | ReactDOM.render(<App />, document.getElementById("root"));
example-app:   >   |                  ^^^
example-app:     7 |
example-app:   ℹ Learn more:
example-app:      https://parceljs.org/features/scope-hoisting/#dynamic-member-accesses
example-app: Building jsx-runtime.js...
example-app: Building index.js...
example-app: Building index.js...
example-app: Building index.js...
example-app: Building index.css...
example-app: @parcel/transformer-js: Conditional or non-top-level `require()` call. This
example-app: causes the resolved module and all dependendencies to be wrapped.
example-app:   D:\git\test\lerna-parcel\node_modules\react\jsx-runtime.js:4:20
example-app:     3 | if (process.env.NODE_ENV === 'production') {
example-app:   > 4 |   module.exports = require('./cjs/react-jsx-runtime.production.min.js');
example-app:   >   |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
example-app:     5 | } else {
example-app:     6 |   module.exports = require('./cjs/react-jsx-runtime.development.js');
example-app:   ℹ Learn more:
example-app:      https://parceljs.org/features/scope-hoisting/#avoid-conditional-require()
example-app: Building react-jsx-runtime.production.min.js...
example-app: Building index.js...
example-app: Building index.js...
example-app: Building react.production.min.js...
example-app: Building index.js...
example-app: Building react.production.min.js...
example-app: Building react.development.js...
example-app: Building index.js...
example-app: Building react.production.min.js...
example-app: Building react.development.js...
example-app: Building react-dom.production.min.js...
example-app: Building index.js...
example-app: Building scheduler.production.min.js...
example-app: Bundling...
example-app: Packaging index.html...
example-app: Packaging index.[hash].js...
example-app: Optimizing index.[hash].js...
example-app: Optimizing index.html...
example-app: √ Built in 3.07s
example-app: dist\index.html               317 B    297ms
example-app: dist\index.99ddcb59.js    333.24 KB    240ms

and these ones from parcel serve:

$ npm run run:example

> root@ run:example D:\git\test\lerna-parcel
> rimraf .parcel-cache && lerna run serve --scope example-app --stream

lerna notice cli v4.0.0
lerna notice filter including "example-app"
lerna info filter [ 'example-app' ]
lerna info Executing command in 1 package: "npm run serve"
example-app: > [email protected] serve D:\git\test\lerna-parcel\examples\example-app
example-app: > rimraf dist && parcel serve --port 3000 --log-level verbose
example-app: Server running at http://localhost:3000
example-app: Building index.html...
example-app: Building index.tsx...
example-app: @parcel/transformer-js: Unknown usage of CommonJS `exports` object. This causes
example-app: tree shaking to be disabled.
example-app:   D:\git\test\lerna-parcel\examples\example-app\src\index.tsx:1:1
example-app:   > 1 | import React from "react";
example-app:   >   | ^
example-app:     2 | import ReactDOM from "react-dom";
example-app:     3 | import { App } from "my-package";
example-app:   ℹ Learn more: https://parceljs.org/features/scope-hoisting/#commonjs
example-app: @parcel/transformer-js: Non-static access of an `import` or `require`. This
example-app: causes tree shaking to be disabled for the resolved module.
example-app:   D:\git\test\lerna-parcel\examples\example-app\src\index.tsx:1:1
example-app:   > 1 | import React from "react";
example-app:   >   | ^
example-app:     2 | import ReactDOM from "react-dom";
example-app:     3 | import { App } from "my-package";
example-app:   ℹ Learn more:
example-app:      https://parceljs.org/features/scope-hoisting/#dynamic-member-accesses
example-app: @parcel/transformer-js: Non-static access of an `import` or `require`. This
example-app: causes tree shaking to be disabled for the resolved module.
example-app:   D:\git\test\lerna-parcel\examples\example-app\src\index.tsx:6:18
example-app:     5 |
example-app:   > 6 | ReactDOM.render(<App />, document.getElementById("root"));
example-app:   >   |                  ^^^
example-app:     7 |
example-app:   ℹ Learn more:
example-app:      https://parceljs.org/features/scope-hoisting/#dynamic-member-accesses
example-app: Building index.js...
example-app: Building index.js...
example-app: Building jsx-dev-runtime.js...
example-app: Building index.js...
example-app: Building index.css...
example-app: @parcel/transformer-js: Conditional or non-top-level `require()` call. This
example-app: causes the resolved module and all dependendencies to be wrapped.
example-app:   D:\git\test\lerna-parcel\node_modules\react\index.js:6:20
example-app:     5 | } else {
example-app:   > 6 |   module.exports = require('./cjs/react.development.js');
example-app:   >   |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
example-app:     7 | }
example-app:     8 |
example-app:   ℹ Learn more:
example-app:      https://parceljs.org/features/scope-hoisting/#avoid-conditional-require()
example-app: Building esmodule-helpers.js...
example-app: Building helpers.js...
example-app: Building react.development.js...
example-app: Building index.js...
example-app: Building runtime.js...
example-app: Building index.js...
example-app: Building react.production.min.js...
example-app: Building react.development.js...
example-app: Building react.production.min.js...
example-app: Building react.development.js...
example-app: Building react-refresh-runtime.development.js...
example-app: Building index.js...
example-app: Building react-dom.development.js...
example-app: Building react-jsx-dev-runtime.development.js...
example-app: Building index.js...
example-app: Building tracing.js...
example-app: Building index.js...
example-app: Building scheduler-tracing.development.js...
example-app: Building scheduler.development.js...
example-app: Bundling...
example-app: Building runtime-400dcb83e510ec22.js...
example-app: Building runtime-84cceff3fa1cd9d3.js...
example-app: Building runtime.js...
example-app: Building react-refresh-runtime.development.js...
example-app: Packaging index.[hash].css...
example-app: Packaging index.html...
example-app: Optimizing index.[hash].css...
example-app: Optimizing index.html...
example-app: Packaging index.[hash].js...
example-app: Optimizing index.[hash].js...
example-app: √ Built in 2.00s

Notice how both build index.css but only parcel serve seems to package it.

💁 Possible Solution

🔦 Context

The project is a lerna monorepo with the following structure:

• package.json
• lerna.json
• examples
  • example-app
    • src
    • package.json
• packages
  • my-package
    • src
    • package.json
    • rollup.config.js
    • tsconfig.json

When building the example-app project with parcel the dist folder does not contain the CSS file so the the application does not look good.

💻 Code Sample

https://gist.github.com/xorxsan/0f1825c3546ee00453bb0867f0684d8f

🌍 Your Environment

Software	Version(s)
Parcel	2.3.1
Node	v14.17.6
npm/Yarn	npm 6.14.15
Operating System	Windows 10 x64

[heycn]

Do you mean that HTML does not introduce CSS after build

You can do this

Add this code to your package.json

"scripts": {
  "build": "rm -rf dist && parcel build src/index.html --no-minify --public-url ./",
}

Then run yarn build

I hope I can help you

[xorxsan]

Thanks @heycn for the reply. Unfortunately the option --no-minify does not seem to exist on parcel version 2.3.1. I've upgrade to version 2.7.0 but it's still not there:

error: unknown option '--no-minify'

[rkrisztian]

From https://parceljs.org/getting-started/migration/ :

This option has been renamed to --no-optimize.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.