Attempting to add a loader results in TypeError: Cannot read property 'push' of undefined

[tgorgdotcom]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

Adding a loader for .woff2 files to the Sharepoint Framework webpack config

Observed Behavior

Error occurs when running gulp serve:

 TypeError: Cannot read property 'push' of undefined
    at Object.additionalConfiguration (/Volumes/tgorg/Work/peach/ProjectPeach/gulpfile.js:8:40)
    at ConfigureWebpackTask.executeTask (/Volumes/tgorg/Work/peach/ProjectPeach/node_modules/@microsoft/sp-build-core-tasks/lib/configureWebpack/ConfigureWebpackTask.js:432:38)
    at /Volumes/tgorg/Work/peach/ProjectPeach/node_modules/@microsoft/gulp-core-build/lib/tasks/GulpTask.js:179:32
    at ConfigureWebpackTask.GulpTask.execute (/Volumes/tgorg/Work/peach/ProjectPeach/node_modules/@microsoft/gulp-core-build/lib/tasks/GulpTask.js:171:16)
    at _executeTask (/Volumes/tgorg/Work/peach/ProjectPeach/node_modules/@microsoft/gulp-core-build/lib/index.js:363:42)
    at /Volumes/tgorg/Work/peach/ProjectPeach/node_modules/@microsoft/gulp-core-build/lib/index.js:264:59
    at process._tickCallback (internal/process/next_tick.js:103:7)

Steps to Reproduce

Added the following code to gulpfile.js right before build.initialize(gulp);

build.configureWebpack.mergeConfig({
	additionalConfiguration: (generatedConfiguration) => {
		generatedConfiguration.module.loaders.push([
			{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" }
		]);
		return generatedConfiguration;
	}
});

[iclanton]

This is actually a documentation bug around the way we describe how to extend the Webpack config - thanks for pointing it out. We noticed this a few days ago and should have updated documentation out soon.

The issue is that the documentation describes how to extend the Webpack v1 config and the config format changed between Webpack v1 and v2, but we didn't update the documentation when we released tools with Webpack v2. If you're curious, here's a summary of the changes between the two config formats.

For your case, this code should work:

build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.module.rules.push(
      {
        test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: {
          loader: 'url-loader'
        }
      }
    );

    return generatedConfiguration;
  }
});

[tgorgdotcom]

Ah! Excellent. This is working for me now. Thank you very much for your reply.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues