Always one change behind

Question

Always one change behind

Closed this issue 7 years ago · 9 comments

First of all, thanks for this project! I'm just starting with chrome extension plugin development, and this has been a big help for me getting it set up.

I've gotten it mostly working, except that I notice that I'm always seeing the previous change that I made.

When I look at the files that webpack is writing, they include the most recent changes, but when the extension reloader refreshes the page, I get the code from one change prior to that. Further manual refreshes of the page have no effect, I still get the old code. Any ideas what might be causing this?

Answer 1 · 2017-09-08T04:06:14.000Z

Update: I tried 0.4.0 and still had problems, but using 0.3.0 seems to solve the issue, I get the most recent changes right away. To be sure, I changed back to 0.4.0, and the problem came back.

I take it back, I went back to 0.3.0 again and it isn't working again. 😞

Answer 2 · 2017-09-08T07:57:00.000Z

Do you know if this happens on the v0.5?
I'll try to investigate this 👍

Answer 3 · 2017-09-08T10:59:45.000Z

Yes, I started out using 0.5.0, and was trying older versions to see if it was caused by a recent change, but it seems not. Let me know if there's anything else I can do to help troubleshoot.

Answer 4 · 2017-09-08T13:38:14.000Z

It turns out I had another error in my webpack config that seems to have been causing this. Now that I've fixed it, I'm seeing the latest changes right away. I'll re-open if it starts happening again, but it seems fine for now. Sorry for the noise.

Answer 5 · 2017-09-11T08:09:25.000Z

No worries, thanks for the feedback!

Answer 6 · 2017-09-15T07:03:42.000Z

@IanVS can you share what was the problem with your webpack config?

Answer 7 · 2017-09-15T11:07:23.000Z

@IanVS I'm facing the same problem. Would really appreciate you sharing what your issue was.

My webpack config is super minimal but I'm still getting this bug

var path = require('path');
const ChromeExtensionReloader  = require('webpack-chrome-extension-reloader');

module.exports = {

  entry: {
    'content-script': './app/content.js',
    background: './app/background.js'
  },

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'product_name/build')
  },

  module: {

    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: [{
          loader: 'babel-loader'
        }],
      }
    ]
  },

  plugins: [
    new ChromeExtensionReloader()
  ]

};

Answer 8 · 2017-09-15T11:30:53.000Z

In my case, it was because I didn't realize that it is required to specify an entry for background. I didn't really need a background page in my extension, so I wasn't including one at first (the readme now mentions the requirement). What does your manifest look like?

Offhand, I don't see anything wrong with your webpack config. Are you seeing success messages in the console? I wasn't getting a connection confirmation in the logs until after I had both a content and background script.

I found the sample to be really helpful when I was setting up my project.

Answer 9 · 2017-09-15T12:08:59.000Z

Thanks @IanVS
I suspect mine is a timing issue. Thanks to the wonder of npm my content-script has grown to about 1.5mb ◉_◉
I think what is happening is that background.js is being compiled triggering a chrome reload which loads the existing content-script then finally content-script compiles but no reload is triggered.

I'll have to poke around a bit more to see if I'm correct.