无法解决 formik/dist 中的反应 - 自定义 webpack 配置



从头开始学习配置项目,但由于某种原因,webpack 似乎无法解析 formik 的模块 - 其他第三方模块工作正常,例如样式组件。试图谷歌这个,但找不到关于这个问题的任何内容,无论如何我都不确定我在寻找什么。将非常感谢任何可能造成这种情况的想法。谢谢!

ERROR in ../node_modules/formik/dist/formik.esm.js
Module not found: Error: Can't resolve 'react' in 'app/node_modules/formik/dist'
@ ../node_modules/formik/dist/formik.esm.js 1:0-189 93:9-17 250:0-13 254:15-25 361:22-28 362:22-28 363:23-29 364:22-28 365:18-24 366:22-28 367:2-11 373:2-11 380:26-36 392:27-38 418:28-39 443:38-49 448:33-44 472:26-37 541:2-11 546:18-29 583:2-11 588:2-11 594:2-11 603:2-11 612:2-11 684:22-33 690:24-35 701:18-29 715:22-33 735:22-33 804:20-31 834:23-34 849:18-29 855:22-33 984:21-32 994:24-35 1007:22-33 1042:14-21 1045:16-23 1092:2-21 1095:2-11 1101:9-22 1103:17-30 1104:78-86 1270:162-177 1270:180-189 1273:12-18 1278:9-20 1301:2-11 1334:2-11 1346:2-11 1381:13-26 1387:11-24 1400:11-24 1405:9-22 1410:0-10 1422:9-22 1487:17-30 1499:15-28 1512:6-15 1527:11-24 1529:13-26 1827:23-36 1828:86-94 1832:2-11 1871:156-169 1875:2-11 1994:15-28 2000:13-26 2013:13-26 2018:11-24 2022:2-11

@tsconfig

{
"compilerOptions": {
"baseUrl": "src",
"module": "esnext",
"target": "ES6",
"sourceMap": true,
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"jsx": "react",
"lib": [
"esnext",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"skipLibCheck": true,
"strict": true,
"experimentalDecorators": true,
"alwaysStrict": true,
},
"exclude": [
"node_modules/*"
],
}

@webpack.config

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const webpackMerge = require('webpack-merge')
const loadPresets = require('./build-utils/loadPresets');
module.exports = ({mode, presets} = {mode: 'development', presets: []}) => webpackMerge({
mode,
entry: './src/index.tsx',
target: 'web',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js',
publicPath: '/',
},
module: {
rules: [
{
test: /.ts(x)?$/,
use: 'ts-loader',
exclude: /node_modules/,
include: path.join(__dirname, '/src'),
},
{
test: /.svg$/,
use: {
loader: 'url-loader',
options: {
limit: 5000
}
}
}
],
},
devServer: {
historyApiFallback: true,
hot: true
},
plugins: [new HTMLWebpackPlugin({
template: 'src/index.html'
})],
resolve: {
modules: ['node_modules'],
extensions: ['.ts', '.tsx', '.js', '.json']
}
}, loadPresets({mode, presets}))

yarn add formiknpm install --save formik对我有用。

最新更新