HMR -- can't find hot-update.json.

[Kyle-Mendes]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

using:

• zeit/next-sass for my next.config.js
• a custom server.js with a custom directory
  • const application = next({ dev, dir: './src' });
• Flow js for type checking
• Redux and Apollo

I have just updated to next 6.0.0 and I can't use my site because the HMR fails to find any information, causing any route requests to result in a full reload.

The site works when loaded with yarn build && yarn start

Folder structures:

./src
  /pages
    /apps
      /Public
        index.js
        sign_in.js
        sign_up.js
        forgot_password.js
      /Admin
        .......

EDIT:

It seems like the files are supposed to go directly into .next I see that happening in a small test repo that I made. However, it now seems that if that's the case, the error I'm encountering is actually the fact that the HMR is unable to find the hot-update.json files when updates are made.

END EDIT

---

When on page /apps/Public/sign_in as /sign_in I click on <Link to="/apps/Public/forgot_password" as="forgot_password" />

Result:

Initial page loads of all pages works perfectly. However, any route changes fail.

Debugging

I have tried just about everything I can think of. It seems like this error is caused from my ./src/.next file not having a /webpack directory. My understanding is that HMR will look for the hot-update.json files in /webpack

However, in my case, all hot-update.json files are in ./src/.next

Contents of ./src/.next

Questions:

• Why do I not have a /webpack directory?
• I can't create a reproduction repo, can someone from Zeit help by looking through my private repo?

Your Environment

Tech	Version
next	6.0
node	9.11.1
OS	Mac OS
browser	Chrome

[Kyle-Mendes]

Additonal information:

I have done some more clean up, but am still encountering the error in this issue. I was just on forgot_password and tried to route to sign_up

NO files had changed but it reports all of the imported files as having changed.

I know that having component in pages is an anti-pattern. I'm in the process of removing those.

[Kyle-Mendes]

I think this might also be related to #4232

I have tried declaring my components every possible way I can think of, using classes, functions, fat arrow exports, wrapping in connect, exporting a component that has the connected component, no luck.

[timneutkens]

Without a minimal reproduction it's impossible for me to look into this.

[Kyle-Mendes]

@timneutkens

I can appreciate that you need something to reproduce this with. However, I have been banging away at this for about a week and haven't been able to figure out how to create a reproducible example since the app this is coming from is large.

Would we be able to potentially setup a video call / pair session so that I can give you access to the project? I can't give you the source directly, since it is our main application.

[stramel]

I'm also running into a chunk not finding the hot-reload.json file but it doesn't seem to be written to the filesystem which would explain the 404. However looking at the page's js, it is referencing the file and has the hash

[kochis]

@Kyle-Mendes We're you ever able to figure this out? I have basically the same setup (using next-sass and dir), and am seeing the exact same issue.

[timneutkens]

Will probably be fixed in next@canary but I'm not sure since I still don't have a reproduction.

[kochis]

I tried to create a repro app, but it didn’t have the same issue. I’m also running this through docker, which is making me think that might be the root cause.

[kochis]

@timneutkens Update: tried with canary, still same result. My guess its something to do with integrating to my the existing express app, but can't quite figure out the issue.

After some more digging, I found that eventually the hot-update file does get written to disk, but only after something causes a change (building a new page, or old page is disposed). It seems like the hot-update.json files on disk are always one step behind the file being requested from the client.

I'm not too familiar with how webpack-dev-middleware works, but are the files supposed to be on disk before they can be served, or does the middleware serve them from memory? Trying to figure if maybe something is preventing them from being written to the disk at the right time.

[eivindml]

Have the same issue. The updates are always one step behind.

Did anyone figure something out?

[MoctezumaDev]

I have the same issue, any idea?

[warrenlalata]

Faced also. Next is getting annoying. It is not working out of the box as expected.

[timneutkens]

Please create a new issue that provides a clear and concise reproduction so that we can investigate.

[m8ms]

This seems to be an OS-dependent issue, we have a large project that works fine on 5 systems and fails similarly on one.

I tried to pin down the differences between that system and the others and so far no luck:

• same macOS versions
• same node version
• same yarn version
• same npm version

Still one system has 404 at HMR and others don't.

[m8ms]

my guess would be that some of the environment variables are of significance, here's a process.env dump done at the beginning next.config.js:

{ 
  npm_package_dependencies_redux: '^4.0.0',
  npm_package_dependencies_camelcase: '^5.0.0',
  npm_package_dependencies_bundle_loader: '^0.5.6',
  npm_package_devDependencies_react_test_renderer: '^16.5.2',
  npm_package_dependencies_babel_plugin_root_import: '^6.1.0',
  rvm_bin_path: '/Users/someuser/.rvm/bin',
  TERM_PROGRAM: 'iTerm.app',
  NODE: '/usr/local/bin/node',
  INIT_CWD:
   '/Users/someuser/projects/the_project/services/cliRrent',
  GEM_HOME: '/Users/someuser/.rvm/gems/ruby-2.5.1',
  npm_package_dependencies_moment: '^2.23.0',
  npm_package_dependencies_hamburgers: '^1.1.3',
  npm_config_version_git_tag: 'true',
  TERM: 'xterm-256color',
  SHELL: '/bin/bash',
  npm_package_devDependencies_jest: '^23.6.0',
  npm_package_devDependencies_handlebars_helpers: '^0.10.0',
  npm_package_dependencies_react_sticky_box: '^0.8.0',
  npm_package_dependencies_react_i18next: '^8.3.5',
  npm_package_scripts_cm: 'git-cz',
  IRBRC: '/Users/someuser/.rvm/rubies/ruby-2.5.1/.irbrc',
  TMPDIR: '/var/folders/p5/f3_ntnyn4n16b156frb0x6f00000gn/T/',
  npm_package_devDependencies_eslint_config_standard: '^12.0.0',
  npm_package_dependencies_prop_types_exact: '^1.2.0',
  Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.BKhFefhahH/Render',
  npm_package_dependencies__zeit_next_sass: '^1.0.1',
  npm_package_scripts_release: 'corp-semantic-release --pre-commit lint',
  npm_package_scripts_lint: 'eslint ./pages ./src && sass-lint',
  npm_config_init_license: 'MIT',
  TERM_PROGRAM_VERSION: '3.2.5',
  npm_package_devDependencies_babel_core: '^7.0.0-0',
  npm_package_dependencies_json_loader: '^0.5.7',
  npm_package_dependencies_cookie: '^0.3.1',
  npm_package_dependencies_cssnano: '^4.1.4',
  npm_package_jest_setupTestFrameworkScriptFile: '<rootDir>/jest-config/mocks/index.js',
  MY_RUBY_HOME: '/Users/someuser/.rvm/rubies/ruby-2.5.1',
  TERM_SESSION_ID: 'w0t1p0:C284934D-DF5D-4DC1-BEB7-B795821D9107',
  npm_package_dependencies_sass_lint: '^1.12.1',
  npm_package_config_commitizen_path: './node_modules/cz-conventional-changelog',
  npm_package_scripts_test_ci: 'jest --coverage',
  npm_package_dependencies_yaml_loader: '^0.5.0',
  npm_package_scripts_generate_reducer: 'plop --plopfile=scripts/plopfile.js reducer',
  npm_package_scripts_analyze: 'BUNDLE_ANALYZE=both next build',
  npm_config_registry: 'https://registry.yarnpkg.com',
  npm_package_devDependencies_commitizen: '^3.0.2',
  npm_package_dependencies_react_dom: '^16.5.2',
  npm_package_scripts_generate_service: 'plop --plopfile=scripts/plopfile.js service',
  npm_package_scripts_generate: 'plop --plopfile=scripts/plopfile.js',
  npm_package_readmeFilename: 'README.md',
  npm_package_dependencies_redux_devtools_extension: '^2.13.8',
  USER: 'someuser',
  npm_package_description:
   'Built on [spark](https://gitlab.int.some_company.com/some_company/frontend/spark) - refer to spark readme for general instructions.',
  npm_package_devDependencies_enzyme_adapter_react_16: '^1.6.0',
  _system_type: 'Darwin',
  COMMAND_MODE: 'unix2003',
  npm_package_dependencies_popper_js: '^1.14.7',
  npm_package_dependencies_next_routes: '^1.4.2',
  npm_package_dependencies_intersection_observer: '^0.5.1',
  npm_package_dependencies_bem_modifiers: '^1.0.7',
  rvm_path: '/Users/someuser/.rvm',
  npm_package_devDependencies_corp_semantic_release: '^6.4.0',
  npm_package_devDependencies_babel_jest: '^23.6.0',
  SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.WDrrln5Xsw/Listeners',
  npm_package_devDependencies_babel_loader: '^8.0.4',
  npm_package_dependencies_lodash: '^4.17.11',
  __CF_USER_TEXT_ENCODING: '0x1F5:0x0:0x2',
  npm_package_devDependencies_eslint: '^5.13.0',
  npm_package_dependencies_react_click_outside: '^3.0.1',
  npm_package_dependencies_file_loader: '^2.0.0',
  npm_package_scripts_generate_component:
   'plop --plopfile=scripts/plopfile.js component && jest --coverage',
  npm_package_scripts_analyze_browser: 'BUNDLE_ANALYZE=browser next build',
  npm_execpath: '/usr/local/lib/node_modules/yarn/bin/yarn.js',
  npm_package_devDependencies__emotion_core: '^0.13.1',
  npm_package_dependencies_rc_slider: '8.6.5',
  npm_package_dependencies_node_normalize_scss: '^8.0.0',
  npm_package_dependencies__zeit_next_bundle_analyzer: '^0.1.2',
  npm_package_husky_hooks_pre_commit: 'yarn lint',
  npm_package_dependencies_react_redux: '^5.0.7',
  npm_package_jest_moduleNameMapper____sass_scss_css_less__: '<rootDir>/jest-config/assetsTransformer.js',
  npm_package_dependencies_ramda: '^0.26.1',
  npm_package_dependencies_form_data: '^2.3.3',
  npm_package_author_name: 'some_company',
  npm_package_dependencies_dotenv_webpack: '^1.7.0',
  rvm_prefix: '/Users/someuser',
  PATH:
   '/var/folders/p5/f3_ntnyn4n16b156frb0x6f00000gn/T/yarn--1552568317779-0.05912703615971915:/Users/someuser/projects/the_project/services/client/node_modules/.bin:/Users/someuser/.config/yarn/link/node_modules/.bin:/Users/someuser/projects/the_project/services/client/node_modules/.bin:/Users/someuser/.config/yarn/link/node_modules/.bin:/usr/local/libexec/lib/node_modules/npm/bin/node-gyp-bin:/usr/local/lib/node_modules/npm/bin/node-gyp-bin:/usr/local/bin/node_modules/npm/bin/node-gyp-bin:/Users/someuser/.rvm/gems/ruby-2.5.1/bin:/Users/someuser/.rvm/gems/ruby-2.5.1@global/bin:/Users/someuser/.rvm/rubies/ruby-2.5.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/someuser/.rvm/bin',
  npm_config_argv:
   '{"remain":[],"cooked":["run","start"],"original":["start"]}',
  npm_package_dependencies_webpack: '^4.29.1',
  npm_package_dependencies__babel_core: '^7.1.2',
  npm_package_scripts_icofont: 'node ./scripts/webfonts-generator.js',
  _:
   '/var/folders/p5/f3_ntnyn4n16b156frb0x6f00000gn/T/yarn--1552568317779-0.05912703615971915/node',
  npm_package_devDependencies_cz_conventional_changelog: '^2.1.0',
  npm_package_dependencies_redux_thunk: '^2.3.0',
  npm_package_dependencies_redux_mock_store: '^1.5.3',
  PWD:
   '/Users/someuser/projects/the_project/services/client',
  npm_package_devDependencies_eslint_plugin_standard: '^4.0.0',
  npm_package_dependencies_node_sass: '^4.9.3',
  npm_lifecycle_event: 'start',
  npm_package_dependencies_nuka_carousel: '^4.4.7',
  LANG: 'pl_PL.UTF-8',
  npm_package_devDependencies_validate_commit_msg: '^2.14.0',
  npm_package_scripts_generate_action: 'plop --plopfile=scripts/plopfile.js action',
  npm_package_name: 'restaurant-week',
  ITERM_PROFILE: 'Default',
  npm_package_devDependencies_eslint_plugin_import: '^2.16.0',
  npm_package_dependencies_autoprefixer: '^9.4.7',
  npm_package_dependencies_babel_plugin_inline_react_svg: '^1.0.1',
  npm_package_jest_collectCoverageFrom_1: 'src/**/*.js',
  npm_package_scripts_start: 'node server.js',
  npm_package_scripts_build: 'next build',
  npm_config_version_commit_hooks: 'true',
  _system_arch: 'x86_64',
  XPC_FLAGS: '0x0',
  npm_package_jest_collectCoverageFrom_0: 'pages/*.js',
  npm_package_devDependencies_enzyme: '^3.7.0',
  npm_config_bin_links: 'true',
  _system_version: '10.14',
  npm_package_devDependencies__storybook_react: '^4.1.13',
  npm_package_devDependencies_eslint_plugin_node: '^7.0.1',
  npm_package_dependencies_next: '^7.0.1',
  XPC_SERVICE_NAME: '0',
  npm_package_version: '1.0.0',
  rvm_version: '1.29.4 (latest)',
  npm_package_scripts_analyze_server: 'BUNDLE_ANALYZE=server next build',
  SHLVL: '2',
  HOME: '/Users/someuser',
  COLORFGBG: '7;0',
  npm_package_dependencies_react_id_swiper: '^1.6.9',
  npm_package_scripts_storybook: 'start-storybook -p 6006',
  npm_package_scripts_test: 'NODE_ENV=test jest --no-cache --watch',
  npm_package_dependencies_formik: '^1.5.1',
  npm_config_save_prefix: '^',
  npm_config_strict_ssl: 'true',
  npm_package_devDependencies_husky: '^1.1.1',
  npm_package_devDependencies_babel_eslint: '^10.0.1',
  npm_package_dependencies_react_dates: '^18.3.1',
  npm_package_dependencies__babel_plugin_proposal_decorators: '^7.1.2',
  npm_package_husky_hooks_commit_msg: 'validate-commit-msg',
  npm_config_version_git_message: 'v%s',
  npm_package_devDependencies_eslint_plugin_promise: '^4.0.1',
  npm_package_dependencies_sw_precache_webpack_plugin: '^0.11.5',
  ITERM_SESSION_ID: 'w0t1p0:C284934D-DF5D-4DC1-BEB7-B795821D9107',
  LOGNAME: 'someuser',
  YARN_WRAP_OUTPUT: 'false',
  npm_lifecycle_script: 'node server.js',
  npm_package_devDependencies_eslint_config_standard_react: '^7.0.2',
  npm_package_dependencies_velocity_react: '^1.4.1',
  GEM_PATH:
   '/Users/someuser/.rvm/gems/ruby-2.5.1:/Users/someuser/.rvm/gems/ruby-2.5.1@global',
  npm_package_devDependencies_plop: '^2.1.0',
  npm_package_dependencies_yup: '^0.26.10',
  npm_package_dependencies_react: '^16.5.2',
  npm_package_dependencies__babel_polyfill: '^7.2.5',
  npm_package_dependencies_mockdate: '^2.0.2',
  npm_package_dependencies_isomorphic_fetch: '^2.2.1',
  npm_package_jest_moduleNameMapper____jpg_jpeg_png_gif_eot_otf_webp_svg_ttf_woff_woff2_mp4_webm_wav_mp3_m4a_aac_oga_pdf__: '<rootDir>/jest-config/assetsTransformer.js',
  npm_package_dependencies_i18next_xhr_backend: '^1.5.1',
  npm_package_scripts_export: 'yarn build && next export',
  npm_config_version_git_sign: '',
  npm_config_ignore_scripts: '',
  npm_config_user_agent: 'yarn/1.13.0 npm/? node/v10.13.0 darwin x64',
  npm_package_jest_setupFiles_0: '<rootDir>/jest-config/setupTests.js',
  npm_package_dependencies_next_runtime_dotenv: '^1.0.1',
  npm_config_init_version: '1.0.0',
  npm_config_ignore_optional: '',
  RUBY_VERSION: 'ruby-2.5.1',
  SECURITYSESSIONID: '186a7',
  npm_package_dependencies_react_select: '^2.1.2',
  npm_package_dependencies_raven_js: '^3.27.0',
  _system_name: 'OSX',
  npm_package_dependencies_i18next: '^14.0.1',
  COLORTERM: 'truecolor',
  npm_node_execpath: '/usr/local/bin/node',
  npm_package_devDependencies_eslint_plugin_react: '^7.12.4',
  npm_package_dependencies_webfonts_generator: '^0.4.0',
  npm_config_version_tag_prefix: 'v' 
}