Generator-jhipster: webpack is not recompiling project on change

[ygokirmak]

Overview of the issue

I faced this problem several times and only workaround I found so far is to create a new project from scratch. Somehow, after a while, live reload feature for dev environment is not working. I had to run yarn start for any change.

I don't know what breaks live-reload, if you can guide me I can troubleshoot.. I don't know where to check..

Motivation for or Use Case

Reproduce the error

Related issues

Suggest a Fix

JHipster Version(s)

JHipster Generator v4.5.6

Browsers and Operating System

OS

LSB Version:    core-9.20160110ubuntu0.2-amd64:core-9.20160110ubuntu0.2-noarch:printing-9.20160110ubuntu0.2-amd64:printing-9.20160110ubuntu0.2-noarch:security-9.20160110ubuntu0.2-amd64:security-9.20160110ubuntu0.2-noarch
Distributor ID: Ubuntu
Description:    Ubuntu 16.04.2 LTS
Release:    16.04
Codename:   xenial

Browser

google chrome
Version 58.0.3029.81 (64-bit)

##### JHipster configuration

Executing jhipster:info
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

/home/infoowl/git/xxxx
└── (empty)

cat: no such file or directory: .yo-rc.json

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

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

ls: no such file or directory: .jhipster/*.json

Browsers and Operating System

java version "1.8.0_121"
Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.121-b13, mixed mode)

git version 2.7.4

node: v7.10.0

npm: 4.2.0

bower: 1.8.0

gulp:
[12:52:48] CLI version 3.9.1

yeoman: 1.8.5

yarn: 0.24.5

Docker version 17.03.1-ce, build c6d412e

docker-compose version 1.13.0, build 1719ceb

Execution complete

---

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

[gmarziou]

We support only node LTS version and you're using 7.10 so I'm closing the issue.
I'l reopen it if you have same issue with node 6.x

[ygokirmak]

I changed node version, problems still active
I realized that if I make change on index.html or robots.txt webpack recompiles the project
but if I change footer.component.html it doesn't recompile.

---

Executing jhipster:info
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

[email protected] /home/infoowl/git/leadlet/gateway
└── [email protected] 

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

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "io.leadlet"
    },
    "jhipsterVersion": "4.5.6",
    "baseName": "gateway",
    "packageName": "io.leadlet",
    "packageFolder": "io/leadlet",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "hibernateCache": "hazelcast",
    "clusteredHttpSession": "hazelcast",
    "websocket": false,
    "databaseType": "mongodb",
    "devDatabaseType": "mongodb",
    "prodDatabaseType": "mongodb",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": "eureka",
    "buildTool": "maven",
    "enableSocialSignIn": false,
    "jwtSecretKey": "replaced-by-jhipster-info",
    "clientFramework": "angular2",
    "useSass": true,
    "clientPackageManager": "yarn",
    "applicationType": "gateway",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "otherModules": [
      {
        "name": "generator-jhipster-bootstrap-material-design",
        "version": "3.5.1"
      }
    ],
    "enableTranslation": false
  }
}

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

JDL entity definitions

entity Contact (contact) {
  firstname String,
  lastname String,
  companyId String,
  type ContactType
}
entity Person (person) {
  firstname String required,
  lastname String required,
  title String,
  customerStatus CustomerStatus
}

enum ContactType {
  PERSON,
  COMPANY
}

enum CustomerStatus {
  Customer,
  Past_Customer,
  Non_Customer
}



dto Contact with mapstruct
paginate Contact with infinite-scroll
service Contact with serviceImpl
dto Person with mapstruct
paginate Person with infinite-scroll
service Person with serviceImpl

Environment and Tools

java version "1.8.0_121"
Java(TM) SE Runtime Environment (build 1.8.0_121-b13)
Java HotSpot(TM) 64-Bit Server VM (build 25.121-b13, mixed mode)

git version 2.7.4

node: v6.10.2

npm: 5.3.0

yeoman: 2.0.0

yarn: 0.24.5

Docker version 17.03.1-ce, build c6d412e

docker-compose version 1.13.0, build 1719ceb

Execution complete

[deepu105]

I assume you are running yarn start and maven/gradle in separate terminals

[ygokirmak]

Yes,

I open terminal-1 run ./mvnw
then open terminal-2 run yarn start

then coding on intellij idea..

I removed all node-modules etc.. installed with yarn install again, couldn't find any clue

[ygokirmak]

@deepu105 I think I found the problem,

I added this watchOptions to webpack configuration, it fixes the problem. I think webpack tries to watch lots of files and couldn't manage it.. If you think this is a fix I will be glad to pr..

    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console'
            ],
            target: 'http://127.0.0.1:8080',
            secure: false
        }],
        watchOptions: {
            ignored: /node_modules/
        }
    },

[jdubois]

If we are indeed watching node_modules, then that's a great enhancement to our current configuration!!

[deepu105]

thats strange I didnt think it was watching node_modules. So please PR

[jdubois]

If your contentBase is './target/www' I don't understand how you could be watching node_modules -> @ygokirmak can you explain us?

[ygokirmak]

@jdubois as I understood webpack-dev-server is serving files from content-base link

But as it said in documentation it watches the changes in source and compiles again. I thought source folder and content-base is two different places..

Using this configuration, webpack-dev-server will serve the static files in your build folder. It’ll watch your source files, and recompile the bundle whenever they are changed.

The problem is I can not find how web-pack-dev server is aware of source folder, I am looking for the configuration or default values..

[jdubois]

Thanks @ygokirmak - I'm really eager to test this!

[ygokirmak]

Check this also, it seems by default they are watching node_modules

https://webpack.js.org/configuration/watch/#watchoptions-ignored

[ygokirmak]

@deepu105 @jdubois I want to be sure that webpack watches node_modules,
I couldn't find any way.. do you have any advice..

[deepu105]

@ygokirmak I have no idea @TheLarkInn do you have an idea about this?

[deepu105]

@ygokirmak in anycase if adding this fixes the issue for you then you are welcome to do a PR and I will test it. Also note that we do below in webpack.dev.js

        new webpack.WatchIgnorePlugin([
            utils.root('src/test'),
        ]),

[gemron]

@ygokirmak I have same problem, i use this command resolve it.:sudo yarn start,I think it's node's permission problem.

[deepu105]

@ygokirmak I couldnt reproduce this so I'm sure its some issue with your config. Anyways if you want to PR your suggestion its fine as I believe it wont break anything

[yfain]

I'm using internationalization, and when I change the text in any of the json files located in the i18n dir, the app doesn't get recompiled, so I have to re-run yarn start to see the changes.

[deepu105]

@yfain may be the i18n directory is not being watched

[yfain]

@deepu105 I tried to add '.json' to the resolve property in webpack.common.js:
resolve: { extensions: ['.ts', '.js','.json']

But it didn't help. What should I change in the webpack configs to make it watch i18n?

[deepu105]

@yfain I need to take a look at the weboack config but im on vacation now and hence only on mobile. Adding resolve alone might not help. Its an important issue. Can you open a specific ticket for this.
@sendilkumarn can you take a look at this.

[pascalgrimaud]

Maybe related to these lines of code https://github.com/jhipster/jhipster-sample-app-ng2/blob/master/webpack/webpack.common.js#L100-L108 which need to be launched for hot reload ?

Yes, a specific issue would be better

[pascalgrimaud]

I encounter the same issue, when using jhipster-registry project.
Ping @PierreBesson as you have the same in your computer ;)

I use the fix watchOptions, suggested by @ygokirmak in webpack.dev.js file, and it works!!

    devServer: {
        contentBase: './target/www',
        proxy: [{
            context: [
                /* jhipster-needle-add-entity-to-webpack - JHipster will add entity api paths here */
                '/api',
                '/services',
                '/management',
                '/swagger-resources',
                '/v2/api-docs',
                '/h2-console',
                "/config"
            ],
            target: 'http://127.0.0.1:8761',
            secure: false
        }],
        watchOptions: {
            ignored: /node_modules/
        }
    }

So I'm pretty sure we should add this to our config, as it is safe to ignore /node_modules/

[pascalgrimaud]

I encountered this today, during the onboarding for JHipster.
I reopen this, and will fix it

[victorvu88]

and must we re-start yarn when ignore node_modules right ?

[RustyRaptor]

Hey guys I found a solution.
Just follow the tutorial VS code provides for fixing it's watch issue. It's an OS issue not related to node or webpack.

https://code.visualstudio.com/docs/setup/linux#_visual-studio-code-is-unable-to-watch-for-file-changes-in-this-large-workspace-error-enospc

[smfaizalkhan]

Hi guys ,

I still face the same issue ,but my webpack has the watch options ignore options matched to node_modules

my node is an LTS version and jhipster is 5.7.0

I had to run either yarn start or mvn -P webpack profile to compile angular stuff and copy to dist folder

Would like to know if issue still exists and this is the way we have to run ?