Make extension compatible with Create React App v2.x

[satendra02]

Error: Cannot find module './polyfills'

After running yarn run eject

[satendra02]

Webpack version is updated in the 2.x version of Create React App.

webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization

Here are the changes you need to do to make it compatible:

1. Remove require.resolve('./polyfills') dependency from entry key in webpack.config.prod.js file

entry:{
    app: [paths.appIndexJs],
    content: ['./src/content.js']
},

2. Search for runtimeChunk key in webpack.config.prod.js file and assign it false

runtimeChunk: false,

3. In your manifest.json file inside public folder add 0.chunk.js file under content_script key

"content_scripts" : [
    {
      "matches": [ "<all_urls>" ],
      "css": ["/static/css/app.css", "/static/css/content.css"],
      "js": ["/static/js/0.chunk.js", "/static/js/content.js"]
    }
 ],

Rest of the implementation is same as mentioned in the blog
https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39

[dianasaurio]

Awesome!! 🎉

[danielgwilson]

This is spot on but I still found it a bit confusing with create-react-app 2.1.1 ejected. For anyone else slightly confused:

There was no require.resolve(./polyfills) dependency.

Here's my entry in webpack.config.js (which appears to be the only config file now, no webpack.config.prod.js)

entry: {
      app: [
        // Include an alternative client for WebpackDevServer. A client's job is to
        // connect to WebpackDevServer by a socket and get notified about changes.
        // When you save a file, the client will either apply hot updates (in case
        // of CSS changes), or refresh the page (in case of JS changes). When you
        // make a syntax error, this client will display a syntax error overlay.
        // Note: instead of the default WebpackDevServer client, we use a custom one
        // to bring better experience for Create React App users. You can replace
        // the line below with these two lines if you prefer the stock client:
        // require.resolve('webpack-dev-server/client') + '?/',
        // require.resolve('webpack/hot/dev-server'),
        isEnvDevelopment &&
          require.resolve("react-dev-utils/webpackHotDevClient"),
        // Finally, this is your app's code:
        paths.appIndexJs
        // We include the app code last so that if there is a runtime error during
        // initialization, it doesn't blow up the WebpackDevServer client, and
        // changing JS code would still trigger a refresh.
      ].filter(Boolean),
      content: "./src/content.js"
    },

I also had more #.js files in /static/js/ for whatever reason, so here's my extension's entry for content_scripts in the manifest:

"content_scripts": [
    {
      "matches": ["https://google.com/"],
      "css": ["/static/css/app.css", "/static/css/content.css"],
      "js": ["/static/js/0.js", "/static/js/3.js", "/static/js/content.js"],
      "run_at": "document_end"
    }
  ],

[Romstar]

I believe this needs to be reopened for the latest version

[satendra02]

@Romstar Are you facing any kind of issue? Feel free to create a new issue for that with the error logs if you have any.

I have updated webpack version #10 hope it will help.

[Romstar]

@satendra02 I have it working now but there were required changes. For example, I don't have to do

    {
      "matches": ["https://google.com/"],
      "css": ["/static/css/app.css", "/static/css/content.css"],
      "js": ["/static/js/0.js", "/static/js/3.js", "/static/js/content.js"],
      "run_at": "document_end"
    }
  ],

I believe I was able to change it to where there is only one output file. I don't recall what I did as this was a month or so ago. When I go through the code again I'll post an update here. Also, there was a webpack change that required some research.

[satendra02]

@Romstar That's great to hear that you made it work for the latest version of create react app. I believe you are using version 3.x

Please post the changes you did whenever you get time, It will help others if they face the same issue.

You can also create a pull request for the same I will definitely merge it to master

Thanks

[MrGiga]

@danielgwilson These changes result in the following error after running yarn build

Cannot read property 'filter' of undefined

[carlosvq]

These changes result in the following error after running yarn build

Hi @MrGiga , I had the same problem, to solve that, I did this configuration in my entry point:

    entry: {
      main: [
        // Include an alternative client for WebpackDevServer. A client's job is to
        // connect to WebpackDevServer by a socket and get notified about changes.
        // When you save a file, the client will either apply hot updates (in case
        // of CSS changes), or refresh the page (in case of JS changes). When you
        // make a syntax error, this client will display a syntax error overlay.
        // Note: instead of the default WebpackDevServer client, we use a custom one
        // to bring better experience for Create React App users. You can replace
        // the line below with these two lines if you prefer the stock client:
        // require.resolve('webpack-dev-server/client') + '?/',
        // require.resolve('webpack/hot/dev-server'),
        isEnvDevelopment &&
          require.resolve("react-dev-utils/webpackHotDevClient"),
        // Finally, this is your app's code:
        paths.appIndexJs
        // We include the app code last so that if there is a runtime error during
        // initialization, it doesn't blow up the WebpackDevServer client, and
        // changing JS code would still trigger a refresh.
      ].filter(Boolean),
      content: "./src/content.js"
    },

This problem happened because ManifestPlugin tries to make a filter with the main field.

To solve this, instead of app, use main to define your main entrypoint on the object as I showed you before.

[chrisstpierre]

Here's the list of changes I made for CRA v3.3

    entry: {
      app: [
        isEnvDevelopment &&
          require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs,
      ].filter(Boolean),
      content: paths.appContent,
    },

runtimeChunk: false,
3.
Modify HtmlWebpackPlugin

      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            chunks: ['app'],
            template: paths.appHtml,
            filename: 'popup.html',
          },

Delete

      splitChunks: {
        chunks: 'all',
        name: false,
      },

Change main.filter to app.filter:

          const entrypointFiles = entrypoints.app.filter(
            fileName => !fileName.endsWith('.map'),
          )

[carlosvq]

Hey @chrisstpierre, you can convert it to an object like this:

entry: {
  main: [
    // Include an alternative client for WebpackDevServer. A client's job is to
    // connect to WebpackDevServer by a socket and get notified about changes.
    // When you save a file, the client will either apply hot updates (in case
    // of CSS changes), or refresh the page (in case of JS changes). When you
    // make a syntax error, this client will display a syntax error overlay.
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    isEnvDevelopment &&
      require.resolve("react-dev-utils/webpackHotDevClient"),
    // Finally, this is your app's code:
    paths.appIndexJs
    // We include the app code last so that if there is a runtime error during
    // initialization, it doesn't blow up the WebpackDevServer client, and
    // changing JS code would still trigger a refresh.
  ].filter(Boolean),
  content: "./src/content.js",
  background: "./src/background.js"
},

I hope it helps :-)

[clock-322]

webpack.config.prod.js file missing after Ejecting create-react-app (npm run eject), my question from where I can set multiple entry points in webpack file.