Can't use npx next build with fastly's js sdk

[fussybeaver]

Following the instructions to use edge dictionaries, this is also reproducible in this repository's example project.

In package.json:

"dependencies": {
  "@fastly/js-compute": "^1.3.4",
  ...
}

In e.g. _app.js:

import { ConfigStore } from "fastly:config-store";

tsc compiles fine. webpack does not:

> npx next build --no-lint
warn  - Linting is disabled
info  - Checking validity of types
info  - Creating an optimized production build
Failed to compile.

fastly:config-store
Module build failed: UnhandledSchemeError: Reading from "fastly:config-store" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "fastly:" URIs.
    at /Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:395974
    at Hook.eval [as callAsync] (eval at create (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:28771), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:13:25925)
    at Object.processResource (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:395899)
    at processResource (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:1:267616)
    at iteratePitchingLoaders (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:1:266975)
    at runLoaders (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:1:270879)
    at NormalModule._doBuild (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:395761)
    at NormalModule.build (/Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:397789)
    at /Users/nieldrummond/projects/next-compute-js/examples/my-app/node_modules/next/dist/compiled/webpack/bundle5.js:28:81243

Import trace for requested module:
./pages/_app.js


> Build failed because of webpack errors

What's the recommended approach?

[doramatadora]

Hi @fussybeaver, thank you for reporting this issue. Could you please post your webpack config? You may have to "tell" webpack how to handle fastly:*-namespaced module imports, this way specifically:

  externals: [
    ({request,}, callback) => {
      // Allow Webpack to handle fastly:* namespaced module imports by treating
      // them as modules rather than try to process them as URLs
      if (/^fastly:.*$/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    }
  ],

[fussybeaver]

Thanks for the hint.

In this case, I am using the one in this repository: https://github.com/fastly/next-compute-js/blob/main/examples/my-app/next.config.js

I've added the externals stub, but it complains of an unexpected property. This is using next 12.3.0.

npx next build --no-lint
warn  - Linting is disabled
warn  - Invalid next.config.js options detected:
  - The root value has an unexpected property, externals, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).

See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Checking validity of types
info  - Creating an optimized production build
Failed to compile.

fastly:config-store
Module build failed: UnhandledSchemeError: Reading from "fastly:config-store" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "fastly:" URIs.
...

Do I need to use a specific webpack version ? I can see some documentation on the externals field when I google around.

[doramatadora]

Hi @fussybeaver, apologies for the delay in responding. I think you'll need to update next.config.js with an amendment to the webpack config it uses under the hood. Let me know how you get on with this gist: https://gist.github.com/doramatadora/377450b576d79a5b9c30e22d17ba5166