Failed to parse source map

[velislavatwone]

Using react-scripts 5.0.0 to bundle a JavaScript project and getting the following error:

WARNING in ./node_modules/react-file-drop/FileDrop.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<full path>/node_modules/src/FileDrop.tsx' file: Error: ENOENT: no such file or directory, open '<full path>/node_modules/src/FileDrop.tsx'

Seems like it's caused by these changes https://github.com/sarink/react-file-drop/compare/v3.0.1...v3.0.3

Similar problems have been happening with other packages https://github.com/facebook/create-react-app/discussions/11767

[max-mathieu]

Facing a similar issue here. Just a warning though, but this is the only package we use that throws this warning

[sarink]

Can you share a test repo that demonstrates this issue? I don't really understand what could be causing it 🤔

[wznuk]

I'm seeing the same issue as well. Using version "3.1.3".

[jay-herrera]

We are also seeing this same issue, version 3.1.5

[andrehen]

``Yeah... I have the same problem: Failed to parse source map from '/home/andrehen/development/react-file-tree-visualizer/node_modules/src/FileDrop.tsx' file: Error: ENOENT: no such file or directory, open '/home/andrehen/development/react-file-tree-visualizer/node_modules/src/FileDrop.tsx'

It's trying to locate the file in a directory that really doesn't exist inside node_modules: /node_modules/src/FileDrop.tsx

Here is my package.json for versions, it's really a fresh project:

{
  "name": "react-file-tree-visualizer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.3",
    "@mui/lab": "^5.0.0-alpha.85",
    "@mui/material": "^5.8.3",
    "@mui/x-data-grid": "^5.12.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-file-drop": "^3.1.5",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[josdejong]

I have exactly the same issue. The sourcemap FileDrop.js.map contains a reference to a source file that is not in the npm package:

"sources":["../src/FileDrop.tsx"]

[josdejong]

I had the same issue in an other project of mine where I use rollup to generate a bundle. To solve the issue there I had to set sourceMap and inlineSources to true in the configuration options for the typescript plugin:

// rollup.config.js
// ...
export default {
  // ...
  output: [
    {
      // ...
      sourcemap: true
    }
  ],
  plugins: [
    // ...
    typescript({ sourceMap: true, inlineSources: true }),
    // ...
  ]
}

This project has a different setup but maybe it gives a clue on how to fix the sourcemap

[sarink]

Does anyone have an example repo?

[bcepuran]

@sarink here is a repo you can review: https://github.com/bcepuran/react-file-drop-map-error

if you npm install and npm start you should see the warning in the terminal window.

[bcepuran]

I also submitted a PR that I think will address the issue by turning off the creation of the source map

[sarink]

Fixed by #96