Gatsby: export filename length

[kevinfoerster]

Summary

is it possible to overwrite the output filenames Gatsby generates on build? my deploy target only allows 31 chars as a filename and therefor component---src-pages-page-2-js.a82bc48cfa31deea5b5f.css does not work… actually the hash.ext would be enough i guess

Relevant information

i would like to deploy a react app to an Arduino and the filesystem limits filenames to 32 characters, see https://github.com/esp8266/Arduino/issues/2858

Environment (if relevant)

File contents (if changed)

gatsby-config.js: N/A
package.json: N/A
gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[kakadiadarpan]

You can try doing this:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  actions.setWebpackConfig({
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[chunkhash].js'
    }
  })
}

@m-allanson @pieh would this be the right way of handling this?

[kevinfoerster]

actions.setWebpackConfig does not apply to output, the documentation states:

setWebpackConfig
Merge additional configuration into the current webpack config. A few configurations options will be ignored if set, in order to try prevent accidental breakage. Specifically, any change to entry, output, target, or resolveLoaders will be ignored.

For full control over the webpack config, use replaceWebpackConfig().

therefor i tried using replaceWebpacklike so:

exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
  const config = {
    ...getConfig(),
    ...{
      output: {
        filename: '[chunkhash].js',
        chunkFilename: '[chunkhash].js',
      },
    },
  }
  actions.replaceWebpackConfig(config)
}

unfortunately this results in another issue:

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


  Error: Cannot find module '/Users/***/ledclock-esp8266-interface/public/render-page.js'

[pieh]

@kevinfoerster you would need to target only build-javascript stage (error you are getting is because your change applies to build-html stage too (this is one to generate static html files).

Try:

exports.onCreateWebpackConfig = ({ actions, getConfig, stage }) => {
  if (stage === 'build-javascript') {
    const baseConfig = getConfig()
    const config = {
      ...baseConfig,
      ...{
        output: {
          // we need `path` and `publicPath` from original config
          // see https://github.com/gatsbyjs/gatsby/blob/f06f6c37698ccdd91b0f550fa30ab55f1d47cae9/packages/gatsby/src/utils/webpack.config.js#L129-L136
          ...baseConfig.output,
          filename: `[contenthash].js`,
          chunkFilename: `[contenthash].js`,
        },
      },
    }
    actions.replaceWebpackConfig(config)
  }
}

[gatsbot[bot]]

Old issues will be closed after 30 days of inactivity. This issue has been quiet for 20 days and is being marked as stale. Reply here or add the label "not stale" to keep this issue open!

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!