ReplaceSource.js:82 this._source.node is not a function

[xd-dw]

Hi, i try to start node server, but get below error, it seems .node is undefined.

/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack-sources/lib/ReplaceSource.js:82
                var node = this._source.node(options);
                                        ^

TypeError: this._source.node is not a function
    at ReplaceSource.node (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack-sources/lib/ReplaceSource.js:82:27)
    at proto.sourceAndMap (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack-sources/lib/SourceAndMapMixin.js:29:18)
    at module.exports (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/node_modules/webpack-sources/lib/helpers/streamChunks.js:15:31)
    at ConcatSource.streamChunks (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:113:55)
    at exports.getSourceAndMap (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/node_modules/webpack-sources/lib/helpers/getFromStreamChunks.js:17:33)
    at ConcatSource.sourceAndMap (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/node_modules/webpack-sources/lib/ConcatSource.js:95:10)
    at getTaskForFile (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/SourceMapDevToolPlugin.js:84:30)
    at /Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/SourceMapDevToolPlugin.js:272:22
    at /Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/Cache.js:91:34
    at Array.<anonymous> (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/cache/MemoryCachePlugin.js:45:13)
    at /Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/Cache.js:91:19
    at Hook.eval [as callAsync] (eval at create (/Users/xin/dev/nodejs/OnlineTools/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:19:1)
    at Cache.get (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/Cache.js:75:18)
    at ItemCacheFacade.get (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/CacheFacade.js:111:15)
    at /Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/SourceMapDevToolPlugin.js:223:18
    at arrayEach (/Users/xin/dev/nodejs/OnlineTools/node_modules/neo-async/async.js:2405:9)
    at Object.each (/Users/xin/dev/nodejs/OnlineTools/node_modules/neo-async/async.js:2846:9)
    at /Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/SourceMapDevToolPlugin.js:207:15
    at fn (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/Compilation.js:509:9)
    at _next2 (eval at create (/Users/xin/dev/nodejs/OnlineTools/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at eval (eval at create (/Users/xin/dev/nodejs/OnlineTools/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:25:1)
    at fn (/Users/xin/dev/nodejs/OnlineTools/node_modules/webpack/lib/Compilation.js:492:9)
    at _next1 (eval at create (/Users/xin/dev/nodejs/OnlineTools/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:21:1)
    at eval (eval at create (/Users/xin/dev/nodejs/OnlineTools/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:37:1)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v18.12.1

The package.json file contains:

"dependencies": {
    "@marko/build": "^4.2.5",
    "chromedriver": "^107.0.3",
    "compression": "^1.7.4",
    "express": "^4.17.1",
    "jquery": "^3.5.1",
    "marked": "^4.2.3",
    "purecss": "^3.0.0",
    "raptor-pubsub": "^1.0.5",
    "raptor-util": "^3.1.0",
    "serve-static": "^1.14.1",
    "source-map": "^0.7.4",
    "source-map-support": "^0.5.21",
    "sourcemap-validator": "^2.1.0",
    "whatwg-fetch": "^3.0.0",
    "yasm": "^0.1.2"
  },
  "devDependencies": {
    "@marko/webpack": "^9.3.0",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.2",
    "css-minimizer-webpack-plugin": "^4.2.2",
    "file-loader": "^6.2.0",
    "ignore-emit-webpack-plugin": "^2.0.2",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "marko": "^5.22.0",
    "marko-cli": "^7.1.0",
    "mini-css-extract-plugin": "^2.7.0",
    "spawn-server-webpack-plugin": "^6.2.2",
    "svg-url-loader": "^8.0.0",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.0",
    "webpack-dev-server": "^4.11.1"
  }

[alexander-akait]

Can you provide reproducible repo?

[xd-dw]

pls refer to https://github.com/indux/OnlineTools with command npm run dev i'm using Node.js v18.12.1

[alexander-akait]

@DylanPiercey friendly ping

The bug is in @marko/webpack/plugin, you have multiple version of webpack-sources.

Here - https://github.com/marko-js/webpack/blob/master/src/plugin/index.ts#L3.

For webpack@5 you should not use import { ReplaceSource } from "webpack-sources"; (because you can have multiple version of webpack-sources and they can have incompatibilities between versions), you need to use this stuff:

const sources = compiler.webpack ? compiler.webpack.sources : require("webpack-sources");
const instance = new sources.ReplaceSource(...options);

[DylanPiercey]

@alexander-akait appreciate the ping. Will make the change on our end!

[xd-dw]

After upgrading to "@marko/webpack": "^9.3.1", issue resolved, close this issue.

Thank you ALL!