Monaco-editor: Unable to import Monaco into ts or tsx file when using Webpack

Created on 29 Aug 2017  路  1Comment  路  Source: microsoft/monaco-editor

monaco-editor version: 0.10.0
Browser: Chrome 60.0
OS: macOS
Steps or JS usage snippet reproducing the issue:

import monaco, {
    IEditor,
    IModelContentChangedEvent,
} from 'monaco-editor';

Fails in tsc with the following error:

[ts] File '/Users/ehd/ts/inferno-monaco-editor/node_modules/monaco-editor/monaco.d.ts' is not a module.
import monaco, {
    IEditor,
    IModelContentChangedEvent,
} from 'monaco-editor/dev/vs/editor/editor.main';

Fails at compile time with the following error:

WARNING in ./~/monaco-editor/dev/vs/editor/editor.main.js
100205:82-89 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/monaco-editor/dev/vs/editor/editor.main.js
100212:82-89 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/monaco-editor/dev/vs/editor/editor.main.js
100219:82-89 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./~/monaco-editor/dev/vs/editor/editor.main.js
100226:194-323 Critical dependency: the request of a dependency is an expression

ERROR in ./~/monaco-editor/dev/vs/editor/editor.main.js
Module not found: Error: Can't resolve 'vs/editor/edcore.main' in '/Users/ehd/ts/inferno-monaco-editor/node_modules/monaco-editor/dev/vs/editor'
 @ ./~/monaco-editor/dev/vs/editor/editor.main.js 100198:0-3709 100205:173-266 100212:173-267 100219:173-267 100226:0-4587 100227:0-283
 @ ./src/index.tsx
 @ ./examples/Client.tsx
 @ ./examples/index.tsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./examples/index.tsx

ERROR in ./~/monaco-editor/dev/vs/editor/editor.main.js
Module not found: Error: Can't resolve 'vs/language/typescript/src/mode' in '/Users/ehd/ts/inferno-monaco-editor/node_modules/monaco-editor/dev/vs/editor'
 @ ./~/monaco-editor/dev/vs/editor/editor.main.js 100198:535-575
 @ ./src/index.tsx
 @ ./examples/Client.tsx
 @ ./examples/index.tsx
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 ./examples/index.tsx

Expected / Desired Behavior

  • There is a way to import monaco-editor such that consuming code can have members/parameters which are defined by types from the package.
  • There is a way to import and run the package using TS import syntax.

Most helpful comment

I got help on this which seems to have fixed the issue (see TedDriggs/inferno-monaco-editor#1)

>All comments

I got help on this which seems to have fixed the issue (see TedDriggs/inferno-monaco-editor#1)

Was this page helpful?
0 / 5 - 0 ratings