[webpack.cache.PackFileCacheStrategy] Restoring failed for ResolverCachePlugin. SyntaxError: Cannot use import statement outside a module

Bug report

What is the current behavior? When packing for the second time, webpack reports ‘Restoring failed for ResolverCachePlugin’. e.g.

<w> [webpack.cache.PackFileCacheStrategy] Restoring failed for ResolverCachePlugin|normal|dependencyType=|commonjs|path=|/Users/keboliu/vscode-shortcut/portal-h5-node/src/views/teleclinict/booking/case-info|request=|@/lib/utils.js from pack: SyntaxError: Cannot use import statement outside a module <w> (during deserialization of Array) <w> (during deserialization of webpack/lib/NormalModule) <w> (during deserialization of Map) <w> (during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems) <w> [webpack.cache.PackFileCacheStrategy] Restoring failed for ResolverCachePlugin|normal|dependencyType=|commonjs|path=|/Users/keboliu/vscode-shortcut/portal-h5-node/src/views/teleclinict/booking/case-info|request=|…/components/case-info-card.vue from pack: SyntaxError: Cannot use import statement outside a module <w> (during deserialization of Array) <w> (during deserialization of webpack/lib/NormalModule) <w> (during deserialization of Map) <w> (during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems) <w> [webpack.cache.PackFileCacheStrategy] Restoring failed for ResolverCachePlugin|normal|dependencyType=|commonjs|path=|/Users/keboliu/vscode-shortcut/portal-h5-node/src/views/teleclinict/booking/addlocaldoctor|request=|wand-ui/es/components/search/style from pack: SyntaxError: Cannot use import statement outside a module <w> (during deserialization of Array) <w> (during deserialization of webpack/lib/NormalModule) <w> (during deserialization of Map) <w> (during deserialization of webpack/lib/cache/PackFileCacheStrategy PackContentItems)

If the current behavior is a bug, please provide the steps to reproduce. I cannot provide the specific steps, because this is a upgrade attempt, webpack4 to 5 via vue2.6 ssr. I can provide webpack configuration segment. Actually I’ve been trying to see if babel configuration going wrong.

/webpack base config***/ const baseConfig = { mode: isProd ? ‘production’ : ‘development’, context: path.resolve(__dirname, ‘…/’), output: { path: path.resolve(__dirname, ‘…/dist’), publicPath: config.staticPublicPath || ‘/dist/’, filename: ‘js/[name].[chunkhash].js’, assetModuleFilename: ‘[name].[contenthash].[ext]’ }, cache: { type: ‘filesystem’, buildDependencies: { config: [ ${__dirname}/, path.join(__dirname, ‘…/package.json’) ] }, version: ‘1.0.0’ }, watchOptions: { aggregateTimeout: 500, poll: 1000 }, stats: ‘errors-only’, resolve: { symlinks: false, alias: { ‘~’: path.resolve(__dirname, ‘…’), ‘@’: path.resolve(__dirname, ‘…/src’), ‘public’: path.resolve(__dirname, ‘…/public’), ‘assets’: path.resolve(__dirname, ‘…/src/assets’) }, extensions: [‘.js’, ‘.vue’, ‘.less’], fallback: { ‘os’: require.resolve(‘os-browserify/browser’) }, }, module: { noParse: [/es6-promise.js$/, /lottie-web/, /pdfjs-dist/, /agentkeepalive/], // avoid webpack shimming process rules: [ { test: /.vue$/, loader: ‘vue-loader’, options: vueLoaderConfig }, { test: /.js$/, loader: ‘babel-loader’, options: { cacheDirectory: true }, exclude: /node_modules.(?!(dom7|ssr-window|swiper).)./ }, { test: /.(png|jpg|gif|svg)$/, type: ‘asset’ }, { test: /.(eot|ttf|woff|woff2)$/, type: ‘asset’ } ] }, performance: { maxEntrypointSize: 300000, hints: isProd ? ‘warning’ : false }, optimization: { minimizer: isProd ? [ new TerserPlugin({ extractComments: false, parallel: true, terserOptions: { warnings: false } }), new CssMinimizerPlugin() ] : [] }, plugins: isProd ? [] : [ new StyleLintPlugin({ extensions: [‘css’, ‘less’], files: ['src/styles/.l?(e|c)ss’, ‘src/views-local//*.vue’, 'src/views//.vue’, 'src/components/**/.vue’], failOnError: false }), new FriendlyErrorsPlugin() ] }

!isProd && baseConfig.module.rules.unshift({ test: /.(js|vue)$/, loader: ‘eslint-loader’, enforce: ‘pre’, exclude: /node_modules/, include: [path.resolve(__dirname, ‘…/config’), path.resolve(__dirname, ‘…/src’), path.resolve(__dirname, ‘…/test’)], options: { formatter: require(‘eslint-friendly-formatter’), emitWarning: true, cache: true, quiet: true, errorStack: false } })

baseConfig.plugins.push( new webpack.ProvidePlugin({ process: ‘process/browser.js’ }) ) baseConfig.plugins.push(new VueLoaderPlugin()) baseConfig.plugins.push(new CopyWebpackPlugin({ patterns: [ { from: ‘node_modules/pdfjs-dist/build/pdf.worker.min.js’ }, { from: ‘node_modules/pdfjs-dist/cmaps’, to: ‘cmaps’ } ] }))

module.exports = baseConfig /webpack base config***/

/.babelrc.js****/ module.exports = { presets: [ “@babel/preset-flow”, [ “@babel/preset-env”, { “modules”: “commonjs”, “useBuiltIns”: “usage”, “corejs”: 3, targets: { browsers: [‘ios >= 7’, ‘android >= 4.0.3’] } } ] ], sourceType: ‘unambiguous’, plugins: [ ‘@babel/plugin-transform-runtime’, “@babel/plugin-syntax-dynamic-import”, [ “import”, { “libraryName”: “wand-ui”, “libraryDirectory”: “es/components”, “style”: true, “camel2DashComponentName”: true, “customName”: function(name){ return wand-ui/es/components/${name.substr(3)} } }, “wand-ui” ], [ “import”, { “libraryName”: “@weiyi/wand-ui-user”, “libraryDirectory”: “lib/components”, “style”: (name) => { return ${name}/index.css; }, “camel2DashComponentName”: true, “customName”: function (name) { return @weiyi/wand-ui-user/lib/components/${name.substr(8)} } }, “@weiyi/wand-ui-user” ], [ “component”, { “libraryName”: “@weiyi/wand-ui”, “styleLibrary”: { “name”: “theme-chalk”, “base”: true }, “libDir”: “lib”, “root”: “wand-ui” } ] ], env: { “test”: { “presets”: [ “@babel/preset-env” ], “plugins”: [ [ “babel-plugin-webpack-aliases”, { “config”: “./build/webpack.base.config.js”, “findConfig”: true } ] ] } } } /.babelrc.js****/

What is the expected behavior? wevpack restoring works.

Other relevant information: npx webpack-cli info ⏎ System: OS: macOS 12.5 CPU: (8) x64 Intel® Core™ i7-4770HQ CPU @ 2.20GHz Memory: 31.57 MB / 16.00 GB Binaries: Node: 14.15.4 - /usr/local/bin/node npm: 8.1.2 - /usr/local/bin/npm Browsers: Chrome: 104.0.5112.79 Chrome Canary: 106.0.5246.0 Firefox: 100.0 Safari: 15.6 Packages: babel-loader: ^8.2.5 => 8.2.5 babel-plugin-webpack-aliases: ^1.1.3 => 1.1.3 copy-webpack-plugin: ^11.0.0 => 11.0.0 css-loader: ^6.7.1 => 6.7.1 css-minimizer-webpack-plugin: ^4.0.0 => 4.0.0 eslint-loader: ^4.0.2 => 4.0.2 friendly-errors-webpack-plugin: ^1.7.0 => 1.7.0 html-webpack-include-assets-plugin: ^1.0.10 => 1.0.10 html-webpack-plugin: ^5.5.0 => 5.5.0 intelli-espower-loader: ^1.1.0 => 1.1.0 istanbul-instrumenter-loader: ^3.0.1 => 3.0.1 less-loader: ^7.3.0 => 7.3.0 null-loader: ^4.0.1 => 4.0.1 postcss-loader: ^7.0.1 => 7.0.1 stylelint-webpack-plugin: ^3.3.0 => 3.3.0 terser-webpack-plugin: ^5.3.3 => 5.3.5 thread-loader: ^3.0.4 => 3.0.4 vue-loader: ^15.10.0 => 15.10.0 webpack: 5.56.0 => 5.56.0 webpack-bundle-analyzer: ^4.5.0 => 4.5.0 webpack-cli: 4.9.1 => 4.9.1 webpack-dev-middleware: ^5.3.3 => 5.3.3 webpack-hot-middleware: ^2.25.1 => 2.25.2 webpack-merge: 5.8.0 => 5.8.0 webpack-node-externals: ^3.0.0 => 3.0.0 webpack-sources: ^3.2.3 => 3.2.3

[alexander-akait]

Please update npm to the latest version and look at output when you run npm i (at warnings too), some dependecies are not compatbility with webpack v5:

• friendly-errors-webpack-plugin
• istanbul-instrumenter-loader

Please remove:

${__dirname}/

from:

uildDependencies: {
      config: [
        `${__dirname}/`,
        path.join(__dirname, '../package.json')
      ]
    }

This is invalid and bad for performance, you need to list the files that will affect the build, webpack by default added a configuration (and all require/import)

Anyway the main problem is cache location, you have multi compiler mode and webpack uses default cacheDirectory/cacheLocation and caches just overwrite each other. Just specify location, for example:

webpack.client.config.js

cache: isProd ? {
    type: 'filesystem',
    maxMemoryGenerations: 5,
    cacheDirectory: path.resolve(__dirname, '.client'),
    buildDependencies: {
      config: [
        path.join(__dirname, '../package.json')
      ]
    }
  } : {
    type: 'memory',
    maxGenerations: 5
  },

webpack.server.config.js

cache: isProd ? {
    type: 'filesystem',
    maxMemoryGenerations: 5,
    cacheDirectory: path.resolve(__dirname, '.server'),
    buildDependencies: {
      config: [
        path.join(__dirname, '../package.json')
      ]
    }
  } : {
    type: 'memory',
    maxGenerations: 5
  },

You can create small helper to avoid code duplication.

We have https://github.com/webpack/webpack/issues/14843 to avoid such problems in future.

Feel free to feedback

[webpack-bot]

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.