Hot reload with yarn broken

[pascalgrimaud]

Overview of the issue

Currently, we can't use yarn start which crashed to each modifications.

Motivation for or Use Case

Here the logs:

[Browsersync] Proxying: http://localhost:9060
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:9000
    External: http://192.168.1.18:9000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.18:3001
 -------------------------------------
ℹ ｢wdm｣: Compiling...

/home/pgrimaud/tmp/18-default/node_modules/awesome-typescript-loader/src/instance.ts:68
     if (!compiler._tsInstances) {
                   ^
TypeError: Cannot read property '_tsInstances' of undefined
    at resolveInstance (/home/pgrimaud/tmp/18-default/node_modules/awesome-typescript-loader/src/instance.ts:68:20)
    at /home/pgrimaud/tmp/18-default/node_modules/awesome-typescript-loader/src/instance.ts:359:26
    at _err2 (eval at create (/home/pgrimaud/tmp/18-default/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:26:1)
    at invalid (/home/pgrimaud/tmp/18-default/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/lib/context.js:76:7)
    at context.compiler.plugin (/home/pgrimaud/tmp/18-default/node_modules/webpack-dev-server/node_modules/webpack-dev-middleware/lib/context.js:116:5)
    at _err0 (eval at create (/home/pgrimaud/tmp/18-default/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:21:1)
    at /home/pgrimaud/tmp/18-default/node_modules/browser-sync-webpack-plugin/index.js:26:5
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/pgrimaud/tmp/18-default/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/home/pgrimaud/tmp/18-default/node_modules/webpack/node_modules/tapable/lib/Hook.js:35:21)
    at Watching._go (/home/pgrimaud/tmp/18-default/node_modules/webpack/lib/Watching.js:40:32)
    at Watching._invalidate (/home/pgrimaud/tmp/18-default/node_modules/webpack/lib/Watching.js:164:9)
    at watcher.compiler.watchFileSystem.watch (/home/pgrimaud/tmp/18-default/node_modules/webpack/lib/Watching.js:135:10)
    at watcher.wfs.watch (/home/pgrimaud/tmp/18-default/node_modules/webpack/lib/WatchIgnorePlugin.js:69:5)
    at Watchpack.watcher.once (/home/pgrimaud/tmp/18-default/node_modules/webpack/lib/node/NodeWatchFileSystem.js:43:4)
    at Object.onceWrapper (events.js:317:30)
    at emitTwo (events.js:126:13)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Reproduce the error

1 - create a simple application
2 - launch ./mvnw
3 - launch yarn start
4 - modify a html or ts file

Related issues

N/A

Suggest a Fix

No idea for the moment

Maybe something related to these warning:

➜ yarn start
yarn run v1.3.2
$ yarn run webpack:dev
$ yarn run webpack-dev-server -- --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base
warning From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.
$ node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js --config webpack/webpack.dev.js --progress --inline --hot --profile --port=9060 --watch-content-base
 10% building modules 3/3 modules 0 active[HPM] Proxy created: [ '/api',           
  '/management',
  '/swagger-resources',
  '/v2/api-docs',
  '/h2-console',
  '/auth' ]  ->  http://127.0.0.1:8080
(node:26188) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:26188) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead

Project is running at http://localhost:9060/
webpack output is served from /
Content not from webpack is served from ./target/www
 11% building modules 11/17 modules 6 active ...modules/style-loader/lib/addStyles.jsWarning: The 'no-unused-variable' rule requires type infomation.

[at-loader] Using typescript@2.6.2 from typescript and "tsconfig.json" from /home/pgrimaud/tmp/18-default/tsconfig.json.

JHipster Version(s)

Current master at 26e7ff2

jhipster@0.0.0 /home/pgrimaud/tmp/18-default
└── generator-jhipster@4.14.0  -> /home/pgrimaud/projects/jhipster/generator-jhipster

JHipster configuration, a .yo-rc.json file generated in the root folder

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "io.github.pascalgrimaud",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "4.14.0",
    "baseName": "jhipster",
    "packageName": "io.github.pascalgrimaud",
    "packageFolder": "io/github/pascalgrimaud",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "ehcache",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "h2Disk",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "replaced-by-jhipster-info",
    "clientFramework": "angularX",
    "useSass": false,
    "clientPackageManager": "yarn",
    "applicationType": "monolith",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": [
      "en"
    ]
  }
}

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Environment and Tools

openjdk version "1.8.0_151"
OpenJDK Runtime Environment (build 1.8.0_151-8u151-b12-0ubuntu0.17.10.2-b12)
OpenJDK 64-Bit Server VM (build 25.151-b12, mixed mode)

git version 2.14.1

node: v8.9.3

npm: 5.6.0

yeoman: 2.0.1

yarn: 1.3.2

Docker version 17.09.0-ce, build afdb6d4

docker-compose version 1.16.1, build 6d1ac21

Congratulations, JHipster execution is complete!

• Checking this box is mandatory (this is just to show you read everything)

[pascalgrimaud]

probably related to this ticket s-panferov/awesome-typescript-loader#534

[ruddell]

It's not a fix, but you can workaround the Webpack 4 issues in dev by downgrading Webpack. Here's the minimal changes I needed to get yarn start hot reloading to work: ruddell/jhipster-examples@e62e142

Here are the changes as a patch that can be applied to a fresh project with git apply path-to-patch && yarn.

[pascalgrimaud]

Thanks a lot @ruddell
I will test your patch tomorrow

[deepu105]

v 5.0.0-1 of awesome-typescript-loader seems to fix the issue. I updated for react can someone do for angular and test?

[deepu105]

I switched to ts-loader in React as its much faster, when used with few other plugins

[pascalgrimaud]

@deepu105 : I confirm. The version 5.0.0-1 seems to fix the issue, but I need to upgrade typescript to 2.7.2, exactly what did @wmarques in #7227
Maybe reopen this PR and change the awesome-typescript-loader version ?

[sendilkumarn]

@pascalgrimaud makes sense. We will do that, timebeing before ngtools.

Will 2.7.2 break anything else ? 😟

[sendilkumarn]

closed by #7227

[pascalgrimaud]

Don't know for 2.7.2, but it's better to upgrade :)