Wednesday, 28 December 2022

Monaco Editor - node_modules package entry point resolution

I'm trying to load a very basic project using Monaco Editor but I'm having issues resolving node_modules. It seems that the entry point of the project defined in package.json is ignored.

In the example here axios works fine because it has an index.d.ts file at the root of the folder, but any project that doesn't have a .d.ts, or where the main entry point/typings of the file aren't inside the root, don't get resolved. One example of this is delayed-stream where the entry point is inside /lib/delayed_stream.js.

The project has a structure such as:

- <root>
  - src
    - index.ts
  - package.json
  - node_modules
    - axios
      - ...
    - delayed-stream
      - ...
// ./src/index.ts
import axios from 'axios'; // Resolves
import delayedStream from 'delayed-stream'; // Cannot find module 'delayed-stream' or its corresponding type declarations.(2307)

All .d.ts files are loaded with:

monaco.languages.typescript.typescriptDefaults.addExtraLib(data, file);
monaco.languages.typescript.javascriptDefaults.addExtraLib(data, file);
monaco.editor.createModel(data, 'typescript', monaco.Uri.parse(file));

And all .js, .ts and .json files are loaded with:

monaco.editor.createModel(data, language, monaco.Uri.parse(file));

I am creating an editor with the same settings as my tsconfig such as:

  monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
  monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
    noSemanticValidation: false,
    noSyntaxValidation: false,
  });
  monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
    target: monaco.languages.typescript.ScriptTarget.ESNext,
    alwaysStrict: true,
    allowNonTsExtensions: true,
    moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
    module: monaco.languages.typescript.ModuleKind.CommonJS,
    noEmit: true,
    esModuleInterop: true,
    allowJs: true,
    skipLibCheck: true,
    allowSyntheticDefaultImports: true,
    baseUrl: './'
  });

I fear I'm missing something obvious here but I've been searching for days, help very much appreciated.



from Monaco Editor - node_modules package entry point resolution

No comments:

Post a Comment