palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.51k stars 2.15k forks source link

Project using datetime2 does not compile when installed with `npm install` #6848

Open cnrudd opened 2 weeks ago

cnrudd commented 2 weeks ago

Environment

-Node Version: 20.14.0, LTS

Code Sandbox

Clone this minimal CRA project, to which the only change is the addition of blueprintjs/core and datetime2. https://github.com/cnrudd/blueprintjstester

Steps to reproduce

Clone this repo:

https://github.com/cnrudd/blueprintjstester which is just Create React App with

    "@blueprintjs/core": "latest",
    "@blueprintjs/datetime2": "latest"

added, and these imports added to App.css:

@import '~@blueprintjs/core/lib/css/blueprint.css';
@import '~@blueprintjs/datetime/lib/css/blueprint-datetime.css';
@import '~@blueprintjs/datetime2/lib/css/blueprint-datetime2.css';
@import '~@blueprintjs/select/lib/css/blueprint-select.css';
Run these commands:

npm install npm start

Actual behavior

When project runs with NPM npm start, project compilation errors out with:

Failed to compile.

Error: Can't resolve '~@blueprintjs/datetime/lib/css/blueprint-datetime.css' in '/Users/cnrudd/workspace/xh/bptester/src'
ERROR in ./src/App.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./src/App.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):

Expected behavior

Expecting no compilation error.

Possible solution

If I install the project with yarn, it works, no error. But, if I want to run/manage the project with npm, I need to also add "@blueprintjs/datetime": "^5.3.5" as a dependency in my package.json. Then, I can install using npm with: npm install --legacy-peer-deps

Then it compiles.

It looks like you may already be aware of this, because you have set up your example in codesandbox:

https://codesandbox.io/p/devbox/blueprint-v5-x-sandbox-react-16-wy0ojy?file=%2Fpackage.json

to import both datetime and datetime2, but, I'm not sure. The example is a little dated, and your docs don't mention that @blueprintjs/datetime & @blueprintjs/datetime2 both need to be imported at the top level if using npm install. Nor do they mention the need for the --legacy-peer-deps option.

The problem appears to come from a difference in the way yarn (classic) and npm (latest) hoist packages.

NPM with no @blueprintjs/datetime top level dependency

~@blueprintjs/datetime/lib/css/blueprint-datetime.css is not found because it is nested within datetime2 image

Yarn classic with no "@blueprintjs/datetime" top level dependency or npm with a @blueprintjs/datetime top level dependency AND npm install --legacy-peer-deps:

image

I can think of 3 ways to resolve this issue:

  1. The documentation on this page can be improved to mention that, if using npm, @blueprintjs/datetime needs to be added as a dependency, and that you need to install with --legacy-peer-deps?
  2. Maybe the issue can be corrected via a code change to @blueprintjs/datetime2?
  3. Do nothing in the near term because the issue will go away when @blueprintjs/datetime2 stops depending on @blueprintjs/datetime?

Any insights on which way you plan to go would be helpful.

Thank you!