Блог

Моя задача — обновить «react-scripts» 2.1.1 в приложении ReactJS на что-то более новое. что я сделал: 1.

• клонировать чистый проект
• обновить «реагирующие скрипты»: «2.1.1» -> «2.1.8»
• установка npm
• запуск npm

Первая проблема, с которой я столкнулся:

frontend@2.0.0 начать C:projectsreactjs-superapp react-приложение-перезаписанный запуск

internal/modules/cjs/loader.js: 797 выдает ошибку; ^

 Error: Cannot find module 'C:projectsreactjs-superappnode_modulesreact-scripts/config/webpack.config.dev'
Require stack:
C:projectsreactjs-superappnode_modulesreact-app-rewiredscriptsstart.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (C:projectsreactjs-superappnode_modulesreact-app-rewiredscriptsstart.js:9:23)
    at Module._compile (internal/modules/cjs/loader.js:956:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
    at Module.load (internal/modules/cjs/loader.js:812:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'C:\projects\reactjs-superapp\node_modules\react-app-rewired\scripts\start.js'
  ]
}
  

• обновление
  «react-app-rewired»: «1.6.2» -> «2.0.3

• установка npm

• запуск npm Помощник «injectBabelPlugin» устарел с версии v2.0. Вы можете использовать плагины customize-cra для замены — https://github.com/arackaf/customize-cra#available-plugins

• последовал за решением, найденным здесь https://github.com/timarney/react-app-rewired/issues/348 и заменил существующие

  mofules.exports = переопределение функции (config, env) { …… }

Для

 module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
    }),
    addLessLoader({
        javascriptEnabled: true
    })
);
  

• добавлены
  «customize-cra»: «^1.0.0»,
  «postcss-normalize»: «^ 9.0.0»,
  «resolve-url-loader»: «^3.1.2»
• установка npm
• запуск npm

Теперь при запуске возникает ошибка компиляции./src/config/config.scss (./node_modules/css-loader??ref—6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref—6-oneOf-5-3!./src/config/config.scss) @import «~importConfigPath»; ^ Файл для импорта не найден или нечитаем: ~importConfigPath . в C:projectsreactjs-superappsrcconfigconfig.scss (строка 2, столбец 1)

что, вероятно, ожидается. Этот ~importConfigPath ранее был определен в module.exports функционирует следующим образом

  config.resolve = {
     modules: ['src', 'node_modules'],
     extensions: ['.js', '.jsx'],
     alias: {
         ...config.resolve.alias,
         "importConfigPath": path.join(__dirname, 'src/view/styles/templates/'   findPara("THEME", "1")   '.scss'),
         "importVariablesPath": path.join(__dirname, 'src/view/styles/templates/'   findPara("THEME", "1")   "/colors.scss"),
     }
 };
  

Теперь он должен быть определен в этой новой структуре. Вот где я сейчас потерялся. Как это сделать?