标签: babeljs
使用 webpack 配置运行 Jest 测试
我正在使用next-optimized-imagespackage 来优化 next.js 项目中的图像。
这是一个配置，应该使我能够加载图像并使用 URL 参数自动调整它们的大小，例如?sizes[]=300
什么有效
next.config.js
const withOptimizedImages = require("next-optimized-images");
module.exports = withOptimizedImages({
optimizeImagesInDev: true,
module: {
rules: [
{
test: /\.(jpe?g|png)$/i,
loader: "responsive-loader",
options: {
adapter: require("responsive-loader/sharp"),
},
},
],
},
});
我也在使用png和jpg优化库：
"imagemin-mozjpeg": "^8.0.0","imagemin-optipng": "^6.0.0"
我的 JSON/JS 文件的图像结构如下：
{
...,
imgs: [
require("../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300"),
...,
]
}
这样，当使用它时responsive-loader，所有内容都会按其应有的方式加载，即图像的路径将替换为应用程序中包含两个不同大小的路径的对象。
什么不起作用
然而，不起作用的是require在每个图像数组元素中引入声明之前曾经起作用的测试（玩笑测试）。它只是说它无法导入所需的模块，因为很可能它不使用使用参数解析这些路径的 webpack 配置。我如何告诉它这样做？
错误信息：
Cannot find module '../../static/img/foo/bar.jpg?sizes[]=200,sizes[]=300' from 'categories.js'
我不能简单地使用图像的路径，然后在标签require中使用它们<img …
推荐指数
解决办法
查看次数
VueJS 和 Jest：找不到模块“babel-core”
我正在尝试将 Jest 与 VueJS 一起使用，但是我得到了Cannot find module 'babel-core' at Object.<anonymous> (node_modules/vue-jest/lib/compilers/babel-compiler.js:1:15).
我解决这个问题的唯一方法是添加
"@babel/core": "^7.7.5",
"babel-core": "^7.0.0-beta.47",
然后测试通过，但我不想将“beta”版本保留在我的 package.json 中，并且将@babel/core和放在babel-core一起很奇怪，因为知道它们是不同版本中的相同包。
我看到错误似乎是在 Vue-Jest 中，但它已经在上一个版本中了。
下面是我package.json断掉的电流（没有"babel-core": "^7.0.0-beta.47"）
"dependencies": {
"@vue/babel-preset-app": "^3.12.1",
"axios": "^0.19.0",
"chai": "^4.2.0",
"date-fns": "^1.30.1",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"register-service-worker": "^1.5.2",
"v-click-outside": "^2.1.5",
"vue": "^2.6.10",
"vue-alertify": "^1.1.0",
"vue-body-class": "^2.0.0-beta.2",
"vue-clipboard2": "^0.3.1",
"vue-mq": "^0.1.3",
"vue-multiselect": "^2.1.6",
"vue-recaptcha-v3": "^1.8.0",
"vue-router": "^3.1.3",
"vue-the-mask": "^0.11.1",
"vuelidate": "^0.7.4",
"vuex": "^3.1.2",
"vuex-persist": "^2.2.0"
},
"devDependencies": …推荐指数
解决办法
查看次数
如何在本地React项目中引用Material UI组件
我正在尝试设置一个简单的 Flask 应用程序，它使用 React 和 Material UI（我不能为此使用 Node/NPM）。React、react-dom 和 Material-ui.js 都由 Flask 从静态资源路径中提供服务。它们加载得很好，但在第一个 text/babel 函数中找不到 Button 元素。它位于material-ui.js 中，但我的JSX 函数看不到它。有没有办法从material-ui.js导入组件？
我的index.html：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<!-- Metas -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<title>F.L.O.P.</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts --> …推荐指数
解决办法
查看次数
使用 Webpack 的加载器捆绑图像时出现“解析错误：无效字符”
当我尝试捆绑我的 React 项目时，我收到有关我要加载的图像的以下错误：
奇怪的是，当我隐藏错误覆盖时，我可以在浏览器中看到我的图片已正确加载，尽管 Webpack 抱怨。我已经仔细遵循其他工作配置示例，其中不会出现该问题，但我无法轻松识别问题的根源，是什么让我不知道如何处理它或在哪里寻找暗示。我也尝试过不同的加载器：url-loader、file-loader和image-webpack-loader，但无济于事。也许这就是 Typescript 造成这些麻烦的原因？
App.tsx我导入图像的位置：
import "./app.d";
import React from "react";
import SampleImage from "./assets/images/sample-image.jpg";
const App: React.FC = () => (
<div>
<img src={SampleImage} />
</div>
);
export default App;
app.d.ts带有模块声明以允许导入打字稿文件中的资源：
declare module "*.jpeg";
declare module "*.jpg";
declare module "*.jpeg";
declare module "*.png";
webpack.common.ts- 我的主要 Webpack 配置文件，我将 和 都放置url-loader在file-loader弹出的 create-react-app 配置中，但它并没有真正改变任何内容：
import "./app.d";
import React from "react";
import SampleImage from "./assets/images/sample-image.jpg";
const …推荐指数
解决办法
查看次数
Vue Router 在启动时加载我所有的延迟加载组件
我有一个 Vue（vue：2.6 和 cli-service：4.1）应用程序，其延迟加载路由器配置如下：
路由器.ts
const Grid = () => import(/* webpackChunkName: "grid" */ './views/grid/Grid.vue');
const Calendar = () => import(/* webpackChunkName: "calendar" */ './views/calendar/Calendar.vue');
const Tree = () => import(/* webpackChunkName: "tree" */ './views/tree/Tree.vue');
const routes = [
{ path: '/', component: Grid, name: 'grid' },
{ path: '/calendar', component: Calendar, name: 'calendar' },
{ path: '/tree', component: Tree, name: 'tree' },
];
export const router = new VueRouter({ routes });
我正在使用 Babel，所以我按照文档中的建议使用动态导入插件
babel.config.js
module.exports = { …推荐指数
解决办法
查看次数
Babel 7 - 未捕获的引用错误：regeneratorRuntime 未定义
Uncaught ReferenceError: regeneratorRuntime is not defined我在使用 React 与 webpack 和 Babel 时遇到错误。
我按照这个答案将我的定义.babel.rc为：
{
"presets": ["@babel/preset-env", "@babel/preset-react"] ,
"plugins": [
["@babel/plugin-transform-runtime"]
]
}
并运行：
npm i --save-dev @babel/plugin-transform-runtime
但是，之后我得到了完全相同的错误。我也遵循了另一个答案和这个答案，但仍然得到完全相同的错误。
我的babel具体安装package.json如下：
"dependencies": {
"@babel/runtime": "^7.14.6"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/plugin-transform-runtime": "^7.14.5",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5"
}
有任何想法吗？
推荐指数
解决办法
查看次数
Vite.js + React：超出最大调用堆栈大小
我正在将使用 CRA 创建的大型应用程序迁移到 Vite.js
\n我按照本指南使用现有应用程序配置新的捆绑器，现在运行开发服务器时一切看起来都很好。
\n但是，当尝试编译生产版本时，我遇到以下错误：
\nvite v2.6.14 building for production...\n\xe2\x9c\x93 162 modules transformed.\n[vite:react-jsx] unknown: Maximum call stack size exceeded\nfile: /Users/matteocarpi/Documents/Web/philip-morris/aws-amplify-multi-tenant/node_modules/react-i18next/dist/es/Trans.js\nerror during build:\nRangeError: unknown: Maximum call stack size exceeded\n at getJSXProps (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/vite-react-jsx/dist/cjs/babelRestoreJsx.js:79:29)\n at getJSXNode (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/vite-react-jsx/dist/cjs/babelRestoreJsx.js:31:23)\n at PluginPass.CallExpression (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/vite-react-jsx/dist/cjs/babelRestoreJsx.js:165:30)\n at newFn (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/visitors.js:177:21)\n at NodePath._call (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/path/context.js:53:20)\n at NodePath.call (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/path/context.js:40:17)\n at NodePath.visit (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/path/context.js:100:31)\n at TraversalContext.visitQueue (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/context.js:103:16)\n at TraversalContext.visitQueue (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/context.js:109:21)\n at TraversalContext.visitQueue (/Users/matteocarpi/Documents/Web/aws-amplify-multi-tenant/node_modules/@babel/traverse/lib/context.js:109:21)\n我知道这与 Babel 和 i18next 有关，但我有点困惑具体问题是什么。
\n有关如何进一步调试的任何提示？
\n提前致谢，
\n中号
\n推荐指数
解决办法
查看次数
Typescript 编译器错误 TS1005：预期为“，”
我收到打字稿编译器错误。
[tsl] ERROR in /.../node_modules/@remirror/react-components/node_modules/@mui/base/useMenu/useMenu.d.ts(3,15)
TS1005: ',' expected.
ts-loader-default_e3b0c44298fc1c14
在该文件中，导入导致了错误：
import { type MenuUnstyledContextType } from '../MenuUnstyled';
'type' is declared but its value is never read.ts(6133)
Module '"../MenuUnstyled"' has no exported member 'type'. Did you mean to use 'import type from "../MenuUnstyled"' instead?ts(2614)
不过，这在 Typescript 3.8 中似乎是有效的，并且该应用程序使用typescript ^4.3.5和@babel/preset-typescript ^7.14.5。
// Explicitly pull out a value (getResponse) and a type (APIResponseType)
import { getResponse, type APIResponseType} from "./api";
有什么想法如何解决吗？
推荐指数
解决办法
查看次数
在本地反应中从解析的对象数组渲染图像源
我正在构建一个反应本机应用程序,它假设使用一些"元数据"对象作为源.我正在解析数组中的每个对象并为每个对象返回一个JSX布局item.我唯一的问题是如何从图像中提供源,因为我将它们存储在本地并需要require("link")它们.我的代码给了我错误:
function loadModuleImplementation(moduleId, module) {
moduleId = "../../../images/icons/photographer/Party.png"
我的代码:
class SelectScreen extends Component {
props:Props;
Details = [
{
"type": "Party",
"image": "../../../images/icons/photographer/Party.png"
},
{
"type": "Wedding",
"image": "../../../images/icons/photographer/Wedding.png"
},
{
"type": "Architecture",
"image": "../../../images/icons/photographer/Arhitecture.png"
},
{
"type": "Christening",
"image": "../../../images/icons/photographer/Christening.png"
}
];
render() {
let renderPhotoTypes = () => {
let type = [];
this.Details.map( ( item )=> {
type.push(
<View style={styles.imageSelectItem} key={item.type}>
<TouchableWithoutFeedback>
<View>
<View style={styles.imageContainer}>
<Image style={styles.image} source={require(item.image)}/>
</View>
<Text style={styles.text}>{item.type}</Text>
</View>
</TouchableWithoutFeedback> …推荐指数
解决办法
查看次数
Jest无法找到相对于目录的预设"env"
我正在尝试使用Jest来测试我的节点API.我有一个简单的npm脚本调用jest
{
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"test": "jest",
"precommit": "lint-staged"
},
"dependencies": {
"@koa/cors": "^2.2.1",
"apollo-link-http": "^1.5.4",
"apollo-server-koa": "^1.3.6",
"axios": "^0.18.0",
"dotenv": "^6.0.0",
"graphql": "^0.13.2",
"graphql-tools": "^3.0.4",
"koa": "^2.5.1",
"koa-bodyparser": "^4.2.1",
"koa-router": "^7.4.0",
"node-fetch": "^2.1.2"
},
"devDependencies": {
"husky": "^0.14.3",
"jest": "^23.3.0",
"lint-staged": "^7.2.0",
"nodemon": "^1.17.5",
"prettier": "^1.13.7"
},
"lint-staged": {
"gitDir": "./",
"*.{js,json}": [
"prettier --no-semi --print-width 140 --tab-width 2 --write",
"git add"
]
},
"jest": {
"bail": true,
"verbose": true,
"testMatch": [
"<rootDir>/**/*.test.js"
] …推荐指数
解决办法
查看次数
标签 统计
babeljs ×10
reactjs ×6
javascript ×4
webpack ×4
jestjs ×3
typescript ×2
vue.js ×2
babel-loader ×1
ecmascript-6 ×1
jsx ×1
material-ui ×1
next.js ×1
node.js ×1
react-native ×1
vite ×1
vuejs2 ×1