[英]Vscode Extension API: Cannot find module '@babel/preset-react'
I want to compile JSX files using '@babel/preset-react on VScode extension API.我想在 VScode 扩展 API 上使用 '@babel/preset-react 编译 JSX 文件。 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.
它适用于基本节点应用程序,但不适用于 VScode 扩展 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: package.json 文件:
{
"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"
}
}
The biggest hint in that error is webpackEmptyContext
.该错误中最大的提示是
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.这不是 Node 告诉你它无法在文件系统上找到
@babel/preset-react"
,而是 Webpack 告诉你它无法从它的包中加载@babel/preset-react"
。
In the case of Babel, and anything with object-based config inputs, that is expected, because Webpack has no way to know that在 Babel 的情况下,以及任何基于对象的配置输入,这是预期的,因为 Webpack 无法知道
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.将导致 Babel 内部尝试加载
"@babel/preset-react"
,并且 Babel 不能抢先告诉 Webpack 捆绑什么,因为它可以传递任何一组选项。
The way around this is to explicitly load the plugin and pass the already-loaded plugin to Babel like this:解决这个问题的方法是显式加载插件并将已经加载的插件传递给 Babel,如下所示:
let output = babel.transformSync("code", {
"presets": [require("@babel/preset-react")]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.