Unable to load sp-loader for spfx solution with webpack

Question

my typescript file includes the following import:

import { SPComponentLoader } from '@microsoft/sp-loader';

But I get a lot of errors when building with webpack

npx webpack --config webpack.config.js

Here are some of the errors:

ERROR in ./node_modules/@microsoft/sp-loader/lib/requirejs/RequireJsLoader.js Module not found: Error: Can't resolve './test/RequireJsMock' in 'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp-loader\lib\requirejs' @ ./node_modules/@microsoft/sp-loader/lib/requirejs/RequireJsLoader.js 258:14-45 @ ./node_modules/@microsoft/sp-loader/lib/requirejs/SPRequireJsComponentLoader.js @ ./node_modules/@microsoft/sp-loader/lib/starter/SPStarter.js @ ./node_modules/@microsoft/sp-loader/lib/index.js @ ./Classic/client/bootHeader.ts @ multi @babel/polyfill ./Classic/client/bootHeader.ts

ERROR in ./node_modules/@microsoft/sp-loader/lib/systemjs/SystemJsLoader.js Module not found: Error: Can't resolve './test/SystemJsMock' in 'C:\users\agaskell\source\repos\spfxBanner\node_modules@microsoft\sp-loader\lib\systemjs'

I am trying to build my ts file into js for classic SharePoint sites and I normally use gulp for modern pages, but for classic I am using a separate bootloader.ts file and webpack.

Can anyone help?

Here is the webpack.config.js file:

    const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: "development",
  entry: ['@babel/polyfill',
    path.resolve(__dirname, './Classic/client/bootHeader.ts')],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      },
      {
        test: /\.(s*)css$/,
        use: [
          // fallback to style-loader in development
          process.env.NODE_ENV !== "production"
            ? "style-loader"
            : MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(png|jp(e*)g|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 15000, // Convert images < 8kb to base64 strings
              name: "images/[hash]-[name].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ],
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: {
    filename: "classicBundleAG.js",
    path: path.resolve(__dirname, "Classic"),
    libraryTarget: "umd"
  }
};

Andrew Gaskell Andrew Gaskell · Accepted Answer · 2019-10-30T21:26:23

I ended up using a workaround for this. I gave up on SPComponentLoader to load my bootstrap and instead installed bootstrap modules locally and then referenced them from my custom sass. My thoughts are that gulp with yeoman normally handles the SPComponentLoader dependencies, but this time I am using a custom webpack and I did not want to deal with every missing dependency manually.

Unable to load sp-loader for spfx solution with webpack

1 Answers