Vscode Extension API: Cannot find module '@babel/preset-react'

Question

I want to compile JSX files using '@babel/preset-react on VScode extension API. While doing this I faced an error just like below. I have tried a few ways to install but still can't get any results. It works on a basic node application but it doesn't work on VScode extension API.

Error: Cannot find module '@babel/preset-react'
    at webpackEmptyContext (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:56404:10)
    at resolveStandardizedName (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57964:7)
    at resolvePreset (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57912:10)
js:120:14)
c:\Users\PC\AppData\Local\Programs\Microsoft VS C

code blocks:

       try {
            let output = babel.transformSync("code", {
                "presets": ["@babel/preset-react"]
            });
            console.log(output)
        } catch (e) {
            console.log(e)
        }

package.json file:

{
    "name": "jsx-svg",
    "displayName": "",
    "description": "jsx-svg",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.55.0"
    },
    "categories": [
        "Other"
    ],
    "activationEvents": [
        "onCommand:jsx-svg.helloWorld"
    ],
    "main": "./dist/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "jsx-svg.helloWorld",
                "title": "Hello World"
            }
        ]
    },
    "scripts": {
        "vscode:prepublish": "yarn run package",
        "compile": "webpack",
        "watch": "webpack --watch",
        "package": "webpack --mode production --devtool hidden-source-map",
        "test-compile": "tsc -p ./",
        "test-watch": "tsc -watch -p ./",
        "pretest": "yarn run test-compile && yarn run lint",
        "lint": "eslint src --ext ts",
        "test": "node ./out/test/runTest.js"
    },
    "devDependencies": {
        "@babel/core": "^7.14.0",
        "@babel/plugin-syntax-jsx": "^7.12.13",
        "@babel/plugin-transform-react-jsx": "^7.13.12",
        "@babel/preset-react": "^7.13.13",
        "@babel/template": "^7.12.13",
        "@babel/traverse": "^7.14.0",
        "@types/glob": "^7.1.3",
        "@types/mocha": "^8.0.4",
        "@types/node": "^12.11.7",
        "@types/vscode": "^1.55.0",
        "@typescript-eslint/eslint-plugin": "^4.14.1",
        "@typescript-eslint/parser": "^4.14.1",
        "eslint": "^7.19.0",
        "glob": "^7.1.6",
        "mocha": "^8.2.1",
        "ts-loader": "^8.0.14",
        "typescript": "^4.1.3",
        "vscode-test": "^1.5.0",
        "webpack": "^5.19.0",
        "webpack-cli": "^4.4.0"
    },
    "dependencies": {
        "@types/babel__core": "^7.1.14"
    }
}

Answer 1

The biggest hint in that error is webpackEmptyContext . This isn't Node telling you that it failed to find @babel/preset-react" on the filesystem, it is Webpack telling you that it was unable to load @babel/preset-react" from it's bundle.

In the case of Babel, and anything with object-based config inputs, that is expected, because Webpack has no way to know that

let output = babel.transformSync("code", {
    "presets": ["@babel/preset-react"]
});

will cause Babel to interally try to load "@babel/preset-react" , and Babel can't preemptively tell Webpack what to bundle because it could be passed any set of options.

The way around this is to explicitly load the plugin and pass the already-loaded plugin to Babel like this:

let output = babel.transformSync("code", {
    "presets": [require("@babel/preset-react")]
});