Webpack harmony import error in loadModule

[Pearce-Ropion]

Hello,
I am working on upgrading to webpack 5 (from 4) and have run into an issue while building for production using the node API. The issue does not occur in development.

Based on this issue, I thought that the issue may have been caused by a webpack version mismatch within my node_modules however, after confirming that only 1 version of webpack (^5.35.0) was installed, the issue persists

UNHANDLED REJECTION Cannot read property 'buildMeta' of undefined
  TypeError: Cannot read property 'buildMeta' of undefined
  - HarmonyImportSpecifierDependency.js:156 HarmonyImportSpecifierDependency.getWarnings
    [frontend]/[webpack]/lib/dependencies/HarmonyImportSpecifierDependency.js:156:37
  - Compilation.js:2579 Compilation.reportDependencyErrorsAndWarnings
    [frontend]/[webpack]/lib/Compilation.js:2579:24
  - Compilation.js:2197 
    [frontend]/[webpack]/lib/Compilation.js:2197:10
  - FlagDependencyExportsPlugin.js:376 
    [frontend]/[webpack]/lib/FlagDependencyExportsPlugin.js:376:11
  - async.js:2830 
    [frontend]/[neo-async]/async.js:2830:7
  - async.js:2850 Object.each
    [frontend]/[neo-async]/async.js:2850:39
  - FlagDependencyExportsPlugin.js:355 
    [frontend]/[webpack]/lib/FlagDependencyExportsPlugin.js:355:18
  - async.js:2830 
    [frontend]/[neo-async]/async.js:2830:7
  - async.js:2865 done
    [frontend]/[neo-async]/async.js:2865:11
  - async.js:2818 
    [frontend]/[neo-async]/async.js:2818:7
  - FlagDependencyExportsPlugin.js:88 
    [frontend]/[webpack]/lib/FlagDependencyExportsPlugin.js:88:11
  - Cache.js:91 
    [frontend]/[webpack]/lib/Cache.js:91:34
  - MemoryCachePlugin.js:45 Array.<anonymous>
    [frontend]/[webpack]/lib/cache/MemoryCachePlugin.js:45:13
  - Cache.js:91 
    [frontend]/[webpack]/lib/Cache.js:91:19
  - runMicrotasks
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

I've been banging my head against the wall for a few days on this, any help would be appreciated

[alexander-akait]

Can you provide example of the problem (repo)?

[Pearce-Ropion]

Yes, I can modify the webpack config (and pretty much all other configs)

[alexander-akait]

Maybe you can provide configuration?

[DanSnow]

I have encountered this with webpack 5.50.0

[Pearce-Ropion]

@DanSnow Do you have a easily accessible webpack config to show here? I would show mine but I'm using gatsby and their webpack config is completely dynamic and obfuscated by helper functions.

[DanSnow]

Sorry for late reply, I forgot this and recently I encountered this again with webpack v5.51.1. But I can't reproduce it and it works correctly after clear the cache. Here is my config:

import HtmlWebpackPlugin from 'html-webpack-plugin'
import { resolve } from 'path'
import sass from 'sass'
import VueLoaderPlugin from 'vue-loader/lib/plugin'
import VirtualModules from 'webpack-virtual-modules'

const entryPath = resolve(__dirname, 'virtual-entry.js')

// the entry file is generated before invoking webpack, and I can't provide the file here
const entry = '...'

const virtualModules = new VirtualModules({
    [entryPath]: entry,
})

function cssConfig(test, loaders = []) {
  return {
    test,
    oneOf: [
      {
        resourceQuery: /module/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
              importLoaders: 2,
              modules: {
                exportLocalsConvention: 'camelCase',
                localIdentName: '[name]_[local]_[hash:base64:5]',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: false,
            },
          },
          ...loaders,
        ],
      },
      {
        resourceQuery: /\?vue/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: false,
            },
          },
          ...loaders,
        ],
      },
      {
        test: /\.module\.\w+$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
              importLoaders: 2,
              modules: {
                localIdentName: '[name]_[local]_[hash:base64:5]',
                exportLocalsConvention: 'camelCase',
              },
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: false,
            },
          },
          ...loaders,
        ],
      },
      {
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: false,
              importLoaders: 2,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: false,
            },
          },
          ...loaders,
        ],
      },
    ],
  }
}

/** @types {import('webpack').Configure} */
const config = {
  mode: 'development',
  target: 'web',
  entry: entryPath,
  cache: {
    type: 'filesystem',
  },
  resolve: {
    alias: {
      // make sure only use same version of vue
      vue$: require.resolve('vue/dist/vue.runtime.esm.js'),
     // here has some other alias to make some files could import like a package, for example:
     // foo$: require.resolve('./foo.js'),
    },
    fallback: {
      fs: false,
      url: require.resolve('url/'),
      path: require.resolve('path-browserify'),
    },
    mainFields: ['browser', 'module', 'main'],
    extensions: ['.tsx', '.ts', '.mjs', '.js', '.jsx', '.vue', '.json', '.wasm'],
  },
  module: {
    rules: [
      {
        test: /\.m?jsx?$/,
        exclude: /(\.yarn|node_modules)/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.tsx?$/,
        exclude: /\.yarn/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
          },
        ],
      },
      {
        test: /\.svg(\?.*)?$/,
        type: 'asset/resource',
      },
      {
        test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
        type: 'asset/resource',
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        type: 'asset/resource',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        type: 'asset/resource',
      },
      cssConfig(/\.css$/),
      cssConfig(/\.scss$/, [
        {
          loader: 'sass-loader',
          options: {
            implementation: sass,
          },
        },
      ]),
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'blocks',
      template: './scripts/template/index.html',
    }),
    new VueLoaderPlugin(),
    virtualModules,
  ],
}

export default config