reactjs - Nu se poate rezolva react în formik/dist - configurație webpack personalizată

Învăț să configurez proiecte de la zero, dar dintr-un motiv oarecare webpack pare să nu poată rezolva modulele lui formik - alte module terțe funcționează bine, de exemplu styled-components. Am încercat să caut pe Google acest lucru, dar nu am găsit nimic despre această problemă și nici nu sunt sigur ce anume caut. Aș aprecia foarte mult orice idee despre ce ar putea fi cauza acestui lucru. Mulțumesc!

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}))

Răspuns #1

yarn add formik sau npm install --save formik a funcționat pentru mine.

Răspunsul #2

Încearcă să adaugi 'use-client' în partea de sus în Next.js. A trebuit să adaug 'use-client' în fișierul meu principal page.js, și a funcționat fără probleme.