build FF extension using craco

Author: medyo

craco.config.js

@@ -0,0 +1,38 @@
+module.exports = {
+  webpack: {
+    configure: {
+      output: {
+        filename: 'static/js/[name].js',
+      },
+      optimization: {
+        runtimeChunk: false,
+        splitChunks: {
+          chunks(chunk) {
+            return false
+          },
+        },
+      },
+    },
+  },
+  plugins: [
+    {
+      plugin: {
+        overrideWebpackConfig: ({ webpackConfig }) => {
+          let mcep
+          webpackConfig.plugins.some((p) => {
+            if (p.constructor.name === 'MiniCssExtractPlugin') {
+              mcep = p
+              return true
+            }
+          })
+          if (mcep) {
+            mcep.options.filename = 'static/css/[name].css'
+          }
+
+          return webpackConfig
+        },
+      },
+      options: {},
+    },
+  ],
+}

script/stores_build.sh

@@ -10,16 +10,17 @@ stores_build() {
 
     rm -f source_code.zip
     rm -f extension.zip
-
-    react-scripts build
+    
+    yarn global add @craco/craco
+    craco build
 
     mkdir -p dist
     cp -r build/* dist
     echo 'zipping the dist'
     cd dist/ && zip -r ../extension.zip * -x "*.DS_Store" && cd ..
 
     echo 'zipping the source code for Firefox'
-    zip -r source_code.zip 'public/' 'script/' 'src' 'LICENCE' 'package.json' 'yarn.lock' 'README.md' -x "*.DS_Store"
+    zip -r source_code.zip 'public/' 'script/' 'src' 'LICENSE' 'package.json' 'yarn.lock' 'README.md' -x "*.DS_Store"
 }
 
 stores_build