Parcel 无法解析“solid-js/jsx-runtime”对于 TSX 文件
我正在将 React Webpack 项目迁移到 SolidJS Parcel 项目中。然而，SolidJS 和 Parcel 的组合对于嵌套的 Typescript 项目似乎存在问题，而 React 和 Webpack 的组合则没有。
在我的最小示例项目中，我收到错误：@parcel/core：无法从“./foo/src/index.tsx”解析“solid-js/jsx-runtime”。如果我尝试将 index.tsx 重命名为 index.jsx，Parcel 可以构建相同的文件而不会出现任何错误。但是，我想使用 Typescript 而不是 JavaScript。
/.babelrc:
{
"presets": [ "solid" ]
}
/package.json:
{
"private": true,
"dependencies": {
"solid-js": "1.3.12"
},
"devDependencies": {
"babel-preset-solid": "1.3.12",
"parcel": "2.3.2",
"typescript": "4.6.2"
}
}
/tsconfig.json:
{
"compilerOptions": {
"isolatedModules": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"lib": [
"dom",
"es2021"
],
"module": "commonjs",
"noEmit": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"sourceMap": true,
"strict": true,
"target": "es5"
}
}
/foo/src/index.tsx:
export function HelloWorld() {
return <div>Hello World!</div>;
}
/foo/package.json:
{
"private": true,
"source": "src/index.tsx",
"scripts": {
"parcel:build": "npx parcel build"
}
}
如何修复错误 @parcel/core: 无法解析 'solid- js/jsx-runtime 在我的嵌套 Typescript 项目中？
I'm migrating a React Webpack project into a SolidJS Parcel project. However, the combination of SolidJS and Parcel seems to have problems with nested Typescript projects, which combinations of React and Webpack do not have.
In my minimal example project, I get the error: @parcel/core: Failed to resolve 'solid-js/jsx-runtime' from './foo/src/index.tsx'. If I try to rename, index.tsx into index.jsx, Parcel can build the same file without any error. However, I want to use Typescript instead of JavaScript.
/.babelrc:
{
"presets": [ "solid" ]
}
/package.json:
{
"private": true,
"dependencies": {
"solid-js": "1.3.12"
},
"devDependencies": {
"babel-preset-solid": "1.3.12",
"parcel": "2.3.2",
"typescript": "4.6.2"
}
}
/tsconfig.json:
{
"compilerOptions": {
"isolatedModules": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"lib": [
"dom",
"es2021"
],
"module": "commonjs",
"noEmit": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"sourceMap": true,
"strict": true,
"target": "es5"
}
}
/foo/src/index.tsx:
export function HelloWorld() {
return <div>Hello World!</div>;
}
/foo/package.json:
{
"private": true,
"source": "src/index.tsx",
"scripts": {
"parcel:build": "npx parcel build"
}
}
How can I fix the error @parcel/core: Failed to resolve 'solid-js/jsx-runtime in my nested Typescript project?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
要在parcel中运行solid，您需要按照以下步骤操作：
安装
babel-preset-solid和@babel/core。创建一个包含以下内容的 .babelrc 文件：
Parcel 自动选择 babel 配置，但最好坚持基于 json 的配置：
附带说明一下，我们不需要提供 babel-transform-runtime 来使 Parcel 工作：
如果您遇到任何问题，请确保您已正确设置工作区：
package.json 文件
包中“source”目录中的 index.html 文件.json：
tsconfig.json 内容：
To run solid in parcel, you need to follow these steps:
Install
babel-preset-solidand@babel/core.Create a .babelrc file with the following content:
Parcel automatically picks up babel configuration but it is best to stick to the json based configuration:
As a side note, we don't need to provide babel-transform-runtime for parcel to work:
If you run into any problem, make sure you have properly set your workspace:
package.json file
index.html file in the "source" directory from the package.json:
tsconfig.json content: