v5 and evergreen-ui: Failed to parse source map from <package>
See original GitHub issueDescribe 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
Issue Analytics
- State:
- Created 2 years ago
- Reactions:11
- Comments:8 (1 by maintainers)
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 withzod
, 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.
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