Doesn't work with code splitting (file.split is not a function)

[michelvermeulen]

Describe the bug
I have a NPM error when building for production which doesn't happen when I disable code splitting.

TypeError: file.split is not a function

at removeLoaders (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/formatters/defaultError.js:23:22)
    at displayError (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/formatters/defaultError.js:10:21)
    at /****/node_modules/@soda/friendly-errors-webpack-plugin/src/formatters/defaultError.js:39:20
    at Array.reduce (<anonymous>)
    at format (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/formatters/defaultError.js:38:6)
    at format (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/core/formatErrors.js:12:33)
    at Array.map (<anonymous>)
    at formatErrors (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/core/formatErrors.js:15:21)
    at FriendlyErrorsWebpackPlugin.displayErrors (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:111:5)
    at doneFn (/****/node_modules/@soda/friendly-errors-webpack-plugin/src/friendly-errors-plugin.js:52:14)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/****/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:18:1)
    at AsyncSeriesHook.lazyCompileHook (/****/node_modules/tapable/lib/Hook.js:154:20)
    at onCompiled (/****/node_modules/webpack/lib/Compiler.js:271:21)
    at /****/node_modules/webpack/lib/Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/****/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/****/node_modules/tapable/lib/Hook.js:154:20)

To Reproduce
If the bug is a build error, please include the exact command used, and any terminal output.

1. Run npm run build

Expected behavior
It should compile.

Reproducible Example

Name	Version
vue-cli-plugin-browser-extension	~0.25.2
Operating System	MacOS
Node	v14.15.3
NPM/Yarn	6.14.9
vue-cli	4.5.11
vue-cli-service	~4.5.0
browser	NA

Additional context
package.json

{
  "name": "****",
  "version": "2.0.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service build --mode development --watch",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0",
    "vuex-persist": "^3.1.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "vue-cli-plugin-browser-extension": "~0.25.2",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

[michelvermeulen]

Here's my vue.config.js (with code splitting disabled to make it work):

module.exports = {
  pages: {
    popup: {
      template: "public/browser-extension.html",
      entry: "./src/popup/main.js",
      title: "Popup",
    },
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks")
  },
  pluginOptions: {
    browserExtension: {
      components: {
        background: true,
        contentScripts: true,
        popup: true,
      },
      componentOptions: {
        background: {
          entry: "src/background.js",
        },
        contentScripts: {
          entries: {
            "content-script": "src/content-scripts/content-script.js",
          },
        },
      },
    },
  },
}

[ivan1993spb]

@michelvermeulen I've got the same issue. Have you managed to find a workaround?

[hakanaltindis]

Did you find out anything to solve this problem?

[ivan1993spb]

@hakanaltindis I tried different old versions of node and some of them worked.

node:10, node:11, node:12, node:13, node:14 worked, but more latest versions didn't.

[hakanaltindis]

Hi everybody,

I used a workaround and worked for me. :) I got the same stack trace and message like below.

TypeError: file.split is not a function

at removeLoaders (//node_modules/@soda/friendly-errors-webpack-plugin/src/formatters/defaultError.js:23:22)
at displayError (//node_modules/@soda/friendly-errors-webpack-plugin/src/formatters/defaultError.js:10:21)

Suddenly, I realize that my code had some errors and then webpack tried to write error's file name to console.. But file did not exist. So webpack threw an exception.

So I added the below code statment in this file node_modules\@soda\friendly-errors-webpack-plugin\src\formatters\defaultError.js before throw exception to see my errors' details.

After that I can see my real errors and I fixed them. Finally my code was built. :)

I hope it can help you.