v5 and evergreen-ui: Failed to parse source map from <package>

Describe the bug

I’m trying to use evergreen-ui vanilla CRA v5 with the default build template. I follow the recommended steps to install both. Then I add a single evergreen-ui component to App.tsx, and the build returns many errors like the following:

WARNING in ./node_modules/ui-box/dist/src/value-to-string.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/andy/dev/aviation/sw/node_modules/ui-box/src/value-to-string.ts' file: Error: ENOENT: no such file or directory, open '/Users/andy/dev/aviation/sw/node_modules/ui-box/src/value-to-string.ts'
 @ ./node_modules/ui-box/dist/src/get-css.js 15:42-70
 @ ./node_modules/ui-box/dist/src/enhancers/borders.js 15:34-55
 @ ./node_modules/ui-box/dist/src/enhancers/index.js 23:29-49
 @ ./node_modules/ui-box/dist/src/index.js 39:14-42
 @ ./node_modules/evergreen-ui/esm/index.js 3:0-43 3:0-43
 @ ./src/App.js 6:0-38 12:35-41
 @ ./src/index.js 7:0-24 11:33-36

These errors occur with other packages I’m using as well, like zod. Evergreen-ui is probably more widely-known, so I’m using it as the example in this issue.

Did you try recovering your dependencies?

Yes. I’ve tried reproducing the issue using fresh installs in a new directory, too.

Which terms did you search for in User Guide?

source-map-loader, failed to parse source map, source map

Environment

Environment Info:

  current version of create-react-app: 5.0.0
  running from /Users/andy/.npm/_npx/19074/lib/node_modules/create-react-app

  System:
    OS: macOS 12.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.17.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.13 - /usr/local/bin/npm
  Browsers:
    Chrome: 97.0.4692.71
    Edge: Not Found
    Firefox: 95.0.2
    Safari: 15.2
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 5.0.0 => 5.0.0
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

npx create-react-app error-project
cd error-project
npm install evergreen-ui
npm start
# OR `npm build` (both have the same error messages)

My App.tsx looks like this:

import logo from "./logo.svg";
import "./App.css";
import { Select } from "evergreen-ui";

function App() {
  return (
    <div className="App">
      <Select>
        <option value="blah" />
      </Select>
    </div>
  );
}

export default App;

If I disable sourcemaps, the error output goes away

GENERATE_SOURCEMAP=false npm start
GENERATE_SOURCEMAP=false npm build

Expected behavior

Sourcemaps are generated (since they’re enabled by default) and there are no ‘failed to parse source maps’ error messages.

Reproducible demo

Clone this repo, npm install, then npm start or npm build: https://github.com/aaltepet/cra-v5-sourcemap-errors

[alspdx]

The problem is that the library’s source files are being referenced but not being published, just the compiled code in the dist directory. I’m also having this issue with zod, there’s an open issue about it and a PR to publish the source files which would fix the problem.

Webpack can be configured to ignore specific warnings, but I imagine that isn’t the best default configuration for everyone using CRA. Would be nice if we had an option to silence these warnings since it will be up to individual package maintainers to fix their own code, and not everyone is going to be sympathetic to this issue.

[andrejcremoznik]

I don’t think ejecting and overriding webpack config here is the right solution. There are just too many libraries shipping dist files only so this needs to be supported out of the box by CRA. In my case it’s https://github.com/zxing-js/browser