InversifyJS: Many source map warnings from compiler due to missing source files

Expected Behavior

No extra compiler warnings when importing inversify in a Typescript project

Current Behavior

After creating a new React Typescript application, adding inversify and starting in dev mode (npm start), 53 warnings are generated similar to the following:

WARNING in ./node_modules/inversify/es/syntax/binding_to_syntax.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '<my-project>\node_modules\inversify\src\syntax\binding_to_syntax.ts' file: Error: ENOENT: no such file or directory, open '<my-project>\node_modules\inversify\src\syntax\binding_to_syntax.ts'
 @ ./node_modules/inversify/es/container/container.js 173:0-62 371:15-30
 @ ./node_modules/inversify/es/inversify.js 3:0-50 3:0-50
 @ ./src/App.tsx 9:0-38 17:26-35
 @ ./src/index.tsx 7:0-24 11:33-36

The warning message is accurate - the .js.map files in the inversify npm package all point to .ts files under src, but there is no src folder in the npm package.

Possible Solution

Include the src folder in the npm package, or remove the source maps .js.map files from the package.

Steps to Reproduce (for bugs)

npx create-react-app my-app --template typescript
npm install --save inversify inversify-react reflect-metadata
Follow installation instructions (update tsconfig.json etc.)
Edit application to use inversify in application: import { Container } from 'inversify';
npm start

Context

Note that inversify works correctly, there is no problem with the actual behaviour of the application, it is just that using inversify is producing a lot of compiler noise.

Although I have installed inversify-react, I doubt that is relevant to this issue, as the warnings appear after importing from inversify directly.

Your Environment

Version used:
- inversify: 6.0.1
- inversify-react: 1.0.1
- react-scripts: 5.0.0
Environment name and version (e.g. Chrome 39, node.js 5.4): node.js 14.17.3,
Operating System and version (desktop or mobile): Windows 10
Link to your project: N/A

Stack trace

N/A

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 5
Comments: 15 (2 by maintainers)

Most upvoted comments

Same with react-scripts 5.0.1 and inversity 6.0.1.

artsemdziaryd on Jul 25, 2022

So, you have 2 options:

If you want to publish sourceMaps to give people a better developer experience, you will also have to publish the source code in TypeScript. That is because the sourceMaps (inline or not) will point to the TypeScript files. And if those files don’t exist in the node_modules, there will be another error from the source map loader.
Do not generate sourceMaps at all, by removing the "sourceMaps" property from the tsconfig.json. FYI: Maybe you will need to explicitly set it to false, as the default might be true, I’m not entirely sure.

In the case of my build, there were other libraries with the same problem: All of @antvis libraries, which are all in separate github repos, so it would be a bit laborious to raise a PR for all of them, explain what’s happening and wait for a release. So it was easier to just ignore those warnings.

ianldgs on Feb 17, 2022

Even after #1412, I still get warnings. Tried to fix it myself by removing sourceMaps from the tsconfig, but I still have many libraries in my dependencies that have the same problem.

My workaround:

Install https://github.com/timarney/react-app-rewired
Create a config-overrides.js:

module.exports = {
  webpack(config, env) {
    config.ignoreWarnings = [/Failed to parse source map/];
    return config;
  },
};

ianldgs on Feb 4, 2022

For all the react-scripts users, that do not want to install react-app-rewired, you can use patch-package to ignore these warnings.

Just use this patch-file patches/react-scripts+5.0.1.patch:

diff --git a/node_modules/react-scripts/config/webpack.config.js b/node_modules/react-scripts/config/webpack.config.js
index e465d8e..26ad0fa 100644
--- a/node_modules/react-scripts/config/webpack.config.js
+++ b/node_modules/react-scripts/config/webpack.config.js
@@ -792,5 +792,6 @@ module.exports = function (webpackEnv) {
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
+    ignoreWarnings: [/Failed to parse source map/],
   };
 };

This gets rid of the pesky warnings when starting the local dev server or creating a production build.

FibreFoX on Feb 20, 2023

Oh yeah, you’re absolutely right @jmfrancois!

https://www.typescriptlang.org/tsconfig#inlineSources

ianldgs on Feb 7, 2023

removing sourcemap should not be the way. sourcemap are useful for debugging. An other way to fix is to inline the source code in the map file, there is a tsconfig option for that.

Why not just pushing src folder in the release ?

Edit: ok it has been done and then revert but there are still sourcemap in the release : https://unpkg.com/browse/inversify@6.0.1/lib/

jmfrancois on Feb 7, 2023

Even after https://github.com/inversify/InversifyJS/pull/1412, I still get warnings.

Unfortunately, we have yet to release this fix. In the future we will be able to close this issue when the release is completed.

@dcavanagh Would it be possible to do a patch version release?

jakehamtexas on Feb 17, 2022