React Typescript - модуль внешнего пакета Webpack не может найти

Question

Я создал приложение реагирования, используя create-Reaction-app с шаблоном машинописи, и тоже выполнил команду eject.

Мне просто нужно получить конфигурацию из внешнего файла json и прочитать ее из файла компонентов в любом месте в приложении. Поэтому я сделал следующие изменения, чтобы использовать конфигурацию webpack json

tsconfig. json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

webpack.config json // Загрузка внешних файлов конфигурации

 externals: {
      'Configurator': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
    }

Ts файл

import Configurator from 'Configurator';

Но это дает следующая ошибка

Answer 1

Вам нужно изменить эту строку и убедиться, что ваши файлы конфигурации. *. js экспортируют модули:

externals: {
  'Configurator': JSON.stringify(process.env.NODE_ENV) === 'production' ? path.resolve(__dirname, 'config.prod.js') : path.resolve(__dirname, 'config.dev.js')
}

Попробуйте добавить следующее в ваш tsconfig. json

{
  "compilerOptions": {
    "baseUrl": ".",
    ...
  },
  ...
}

Вы также можете попытаться использовать не относительный путь для импорта, так как это уменьшит сложность вашего веб-пакета и tsconfig, затем вы можете удалить внешнюю конфигурацию веб-пакета и сделать что-то вроде.

в webpack.config

...
plugins: [new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})],
...

Затем импортируйте так:

const config = process.env.NODE_ENV === 'production' ? require('../config.prod.js') : require('../config.dev.js')