jhen0409 / react-chrome-extension-boilerplate

Boilerplate for Chrome Extension React.js project
MIT License
2.14k stars 388 forks source link

can't build extension properly #83

Closed awwester closed 6 years ago

awwester commented 6 years ago

Everything in my extension is working locally when the files are hosted on localhost:3000 using npm run dev. I'm at a point now where I need to build the extension and deploy it.

When running npm run build, it builds the project into the build folder but when trying to run it packed or unpacked I get the error

Hot Module replacement API enabled. You should disable react-transform-hmr in production by using env section in Babel configuration. See the example in README: https://github.com/gaearon/react-transform-hmr

Ok great so it appears this transform thing should only be ran on development when hot reloading is enabled. I go to the linked readme and find the code to disable this transform babel addon in production environment:

// original .babelrc
{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": ["add-module-exports", "transform-decorators-legacy", "transform-runtime"]
}

// updated .babelrc
{
  "presets": ["es2015", "stage-0", "react"],
  "env": {
    "development": {
      "plugins":  ["add-module-exports", "transform-decorators-legacy", "transform-runtime"]
    }
  }
}

I set my NODE_ENV=production and then rebuild my extension. After loading it again unpacked I don't get any error in the injected portion of the extension, but it does not work. When I open the background, I see the console error Uncaught ReferenceError: regeneratorRuntime is not defined. I try packing the extension and loading it through the crx, but I get the same error. It appears to be related to chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {}) but I haven't found a way to get rid of the error and have the extension work after a production build.

I've been going around in circles for a few days between this package, react-transform-hmr, babel, etc but can't find any solution.

Pruxis commented 6 years ago

I had the same issue, and I deleted the query: react-hmr and copy pasted the postCSS config inside the production config for webpack.

Thanks for saying that I have to set my NODE_ENV by this I solved my issue, good luck with yours :P

awwester commented 6 years ago

As your comment helped me realize I was updating my development webpack file instead of the production... Thanks.