Не могу разрешить реакцию в formik / dist - настраиваемая конфигурация webpack - PullRequest
1 голос
/ 17 июня 2020

Учимся настраивать проекты с нуля, но по какой-то причине 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}))

1 Ответ

0 голосов
/ 21 августа 2020

yarn add formik или npm install --save formik работали у меня.

...