npm run build should create a zip folder

[cancan101]

The Chrome Web Store expects a zip folder to be uploaded. At present the build command just emits the files to the build directory. They should be zipped up.

[cancan101]

Related issues on upstream (?) project: https://github.com/samuelsimoes/chrome-extension-webpack-boilerplate/pull/72

[cancan101]

I ended up using:

// Do this as the first thing so that any code reading it knows the right env.
process.env.BABEL_ENV = 'production';
process.env.NODE_ENV = 'production';
process.env.ASSET_PATH = '/';

var webpack = require('webpack'),
  config = require('../webpack.config'),
  fs = require('fs'),
  ZipPlugin = require('zip-webpack-plugin');

delete config.chromeExtensionBoilerplate;

config.mode = 'production';

var json = JSON.parse(fs.readFileSync('package.json', 'utf-8'));

config.plugins = (config.plugins || []).concat(
  new ZipPlugin({
    path: '../package', // don't save the zip file inside the build directory
    filename: json.name + '-' + json.version + '.zip',
    extension: 'zip',
  })
);

webpack(config, function (err) {
  if (err) throw err;
});

[shoeferlin]

I like your proposal!

[lxieyang]

Thanks for the suggestion!

[hadnet]

The npm run build command fails silently with no error and does not generate the zip, anything.

[Serjobas]

The npm run build command fails silently with no error and does not generate the zip, anything.

had the same thing. it turned out that it was failing because of my TS errors, so I had to switcht o transpile only mode

updated the webpack.config.js

to transpileOnly: true instead of transpileOnly: isDevelopment

[durdevic]

Still not working for me. I changed most of my files to plain .js though, would that maybe cause some issues?

[cancan101]

I assume if you comment out the:

config.plugins = (config.plugins || []).concat(
  new ZipPlugin({
    filename: `${packageInfo.name}-${packageInfo.version}.zip`,
    path: path.join(__dirname, '../', 'zip'),
  })
);

in build.js then the build works (albeit without creating a zip file)?

[durdevic]

Hey @cancan101, thanks for the fast reply!

I did that, but still no luck, the build folder is not there.

I printed the config from this part

webpack(config, function (err) {
  if (config) {
    console.log('config: ', config)
  }
  if (err) throw err;
});

and this is what I get

config: {
  mode: 'production',
  entry: {
    newtab: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Newtab/index.jsx',
    options: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Options/index.jsx',
    popup: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Popup/index.js',
    background: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Background/index.js',
    contentScript: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Content/index.js',
    devtools: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Devtools/index.js',
    panel: '/Users/uros/Documents/Template/Code/template-chrome-extension/src/pages/Panel/index.jsx'
  },
  output: {
    filename: '[name].bundle.js',
    path: '/Users/uros/Documents/Template/Code/template-chrome-extension/build',
    clean: true,
    publicPath: '/'
  },
  module: {
    rules: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
  },
  resolve: {
    alias: { process: 'process/browser' },
    extensions: [
      '.jpg',   '.jpeg', '.png',
      '.gif',   '.eot',  '.otf',
      '.svg',   '.ttf',  '.woff',
      '.woff2', '.js',   '.jsx',
      '.ts',    '.tsx',  '.css'
    ],
    fallback: {
      crypto: '/Users/uros/Documents/Template/Code/template-chrome-extension/node_modules/crypto-browserify/index.js',
      stream: '/Users/uros/Documents/Template/Code/template-chrome-extension/node_modules/stream-browserify/index.js',
      buffer: '/Users/uros/Documents/Template/Code/template-chrome-extension/node_modules/buffer/index.js',
      https: '/Users/uros/Documents/Template/Code/template-chrome-extension/node_modules/https-browserify/index.js',
      url: '/Users/uros/Documents/Template/Code/template-chrome-extension/node_modules/url/url.js',
      fs: false,
      util: '/Users/uros/Documents/Template/Code/template-chrome-extension/node_modules/util/util.js'
    }
  },
  plugins: [
    CleanWebpackPlugin {
      dangerouslyAllowCleanPatternsOutsideProject: false,
      dry: false,
      verbose: false,
      cleanStaleWebpackAssets: true,
      protectWebpackAssets: true,
      cleanAfterEveryBuildPatterns: [],
      cleanOnceBeforeBuildPatterns: [Array],
      currentAssets: [],
      initialClean: false,
      outputPath: '/Users/uros/Documents/Template/Code/template-chrome-extension/build',
      apply: [Function: bound apply],
      handleInitial: [Function: bound handleInitial],
      handleDone: [Function: bound handleDone],
      removeFiles: [Function: bound removeFiles]
    },
    ProgressPlugin {
      profile: false,
      handler: undefined,
      modulesCount: 5000,
      dependenciesCount: 10000,
      showEntries: true,
      showModules: true,
      showDependencies: true,
      showActiveModules: false,
      percentBy: undefined
    },
    EnvironmentPlugin { keys: [Array], defaultValues: {} },
    CopyPlugin { patterns: [Array], options: {} },
    CopyPlugin { patterns: [Array], options: {} },
    CopyPlugin { patterns: [Array], options: {} },
    CopyPlugin { patterns: [Array], options: {} },
    CopyPlugin { patterns: [Array], options: {} },
    HtmlWebpackPlugin {
      userOptions: [Object],
      version: 5,
      options: [Object]
    },
    HtmlWebpackPlugin {
      userOptions: [Object],
      version: 5,
      options: [Object]
    },
    HtmlWebpackPlugin {
      userOptions: [Object],
      version: 5,
      options: [Object]
    },
    HtmlWebpackPlugin {
      userOptions: [Object],
      version: 5,
      options: [Object]
    },
    HtmlWebpackPlugin {
      userOptions: [Object],
      version: 5,
      options: [Object]
    },
    ProvidePlugin { definitions: [Object] }
  ],
  infrastructureLogging: { level: 'info' },
  optimization: { minimize: true, minimizer: [ [TerserPlugin] ] }
}

Do you have any idea what can I try else. I plan to go one by one through webpack.config.js with the additions I made, but I don't know if my project is then going to be able to work without them.

The additions I made are:

var alias = {
  process: "process/browser"
};

module: {
    rules: [

       ...
      {
        test: /\.m?js/,
        resolve: {
          fullySpecified: false
        }
      }
    ],
  },
  resolve: {
    alias: alias,
    extensions: fileExtensions
      .map((extension) => '.' + extension)
      .concat(['.js', '.jsx', '.ts', '.tsx', '.css']),
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/"),
      "https": require.resolve("https-browserify"),
      "url": require.resolve("url/"),
      "fs": false,
      util: require.resolve('util/'),
    }
  },
  plugins: [
    isDevelopment && new ReactRefreshWebpackPlugin(),
    new CleanWebpackPlugin({ verbose: false }),
    new webpack.ProgressPlugin(),
    // expose and write the allowed env vars on the compiled bundle
    new webpack.EnvironmentPlugin(['NODE_ENV']),
   ...
   new CopyWebpackPlugin({
      patterns: [
        { from: "src/_locales", to: "_locales" }
      ]
    }),
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
  ].filter(Boolean),
  infrastructureLogging: {
    level: 'info',
  },
};

[cancan101]

@durdevic, if you are not seeing any build folder, then your issue isn't really related to the zip file change, but likely due do with a config issue with Webpack. You can try posting a new issue to this repo, but given you have made local changes, I would suggest you narrow down which changes is causing the issue.

[gilles-yvetot]

@cancan101 @durdevic I got exactly the same issue. I switched everything to TS. It fails silently too. It builds totally fine when I run npm run start

@durdevic you should open an issue

[durdevic]

So I had an issue in the index.jsx file with await. Once I turned that into .then().catch() form, I ended up building it with all my changes to the webpack, also with the .zip file.

Make sure that entry in webpack.config.js is properly set to the name of the file.

entry: {
    newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
    popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),  <---- when I changed to .js I forgot to change it here back to .jsx

It's a bit of looking into code, but I think there might be something that you're overseeing @gilles-yvetot. For me it was additional use of process.env.NODE_ENV !== 'production' that didn't show the error when I was building for prod but passed on the DEV. Make sure not to make this mistake.

Thanks @cancan101 for the support!

[gilles-yvetot]

Yeah, my issue got auto-solved at some point, I think I must have fixed the typing issues I had. But more importantly, it is still failing silently though

[akshatjain-myoperator]

The npm run build command fails silently with no error and does not generate the zip, anything.

had the same thing. it turned out that it was failing because of my TS errors, so I had to switcht o transpile only mode

updated the webpack.config.js

to transpileOnly: true instead of transpileOnly: isDevelopment

This one worked for me.