Неожиданное исключение при вызове веб-пакета из gulp

Question

Я успешно настроил веб-пакет для объединения моих источников TypeScript. Я в основном следовал этим инструкциям из проекта TypeScript.

В результате, когда я набираю npx webpack, я получаю:

ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from frontend/tsconfig.json
ℹ ｢atl｣: Checking started in a separate process...
ℹ ｢atl｣: Time: 744ms
Hash: 6577bf320859d1e9dabb
Version: webpack 4.12.2
Time: 2060ms
Built at: 06/27/2018 9:02:28 PM
        Asset      Size  Chunks             Chunk Names
    bundle.js  1.39 KiB       0  [emitted]  main
bundle.js.map  5.43 KiB       0  [emitted]  main
[0] external "React" 42 bytes {0} [built]
[2] external "ReactDOM" 42 bytes {0} [built]
[3] ./src/index.tsx 326 bytes {0} [built]
    + 1 hidden module

Отлично. Теперь я хочу сделать задачу Gulp, которая запускает это для генерации моего связанного файла .js. Мои скелеты gulpfile.babel.js выглядит так. Я использую webpack-stream, чтобы позволить мне передавать через webpack.

import gulp from 'gulp'
import webpack from 'webpack'
import webpackStream from 'webpack-stream'
import webpackConfig from './webpack.config.js'


gulp.task('js', () => {
  gulp.src('./src/index.tsx')
    .pipe(webpackStream(webpackConfig), webpack)
    .pipe(gulp.dest('./dist'));
})

Когда я запускаю npx gulp js, он извергает:

[21:03:57] Failed to load external module @babel/register
[21:03:57] Requiring external module babel-register
[21:03:58] Using gulpfile frontend/gulpfile.babel.js
[21:03:58] Starting 'js'...
ℹ ｢atl｣: Using typescript@2.9.2 from typescript
ℹ ｢atl｣: Using tsconfig.json from frontend/tsconfig.json
Error: It looks like you're using an old webpack version without hooks support. If you're using awesome-script-loader with React storybooks consider upgrading @storybook/react to at least version 4.0.0-alpha.3
    at Object.ensureInstance (frontend/node_modules/awesome-typescript-loader/src/instance.ts:142:9)

Я озадачен тем, почему он будет вести себя иначе с этим, казалось бы, незначительным изменением Если действительно загружается более старая версия веб-пакета, откуда он взялся?

Вот зависимости, объявленные в package.json:

  "devDependencies": {
    "awesome-typescript-loader": "^5.2.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "gulp": "^4.0.0",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.9.2",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    "webpack-stream": "^4.0.3"
  },
  "dependencies": {
    "@types/react": "^16.4.2",
    "@types/react-dom": "^16.0.6",
    "bootstrap": "^4.1.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1"
  }

Версии typescript, webpack, webpack-cli, объявленные awesome-typescript-loader, являются такими же Major.minor, как и мой package.json. Тем не менее, webpack-stream может быть старше, поскольку он ссылается на webpack 3.4.1 (в настоящее время 4.12.2) и gulp 3.9.0 (в настоящее время 4.0.0).

Answer 1

Похоже, виновником был webpack-stream, использующий старую версию webpack; он еще не обновлен для поддержки webpack 4. Существует открытый запрос на извлечение , который решает проблему для меня, но он еще не был принят.

Другие отметили, что это должно быть решено путем передачи более нового модуля webpack, но я сделал здесь, и, похоже, он ничего не сделал.

    .pipe(webpackStream(webpackConfig), webpack)