Учимся настраивать проекты с нуля, но по какой-то причине webpack не может разрешить модули formik - другие сторонние модули работают нормально, например, styled-components. Пытался погуглить, но ничего не нашел по этой проблеме, и я все равно не совсем уверен, что ищу. Был бы очень признателен за любые идеи, что может быть причиной этого. Спасибо!
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}))