There's a recent change in the architecture of Webpack CLI placing the server facility into @webpack-cli/serve. I'm not sure if my issue is due to that but at the moment it's hard to find info on that as the searches tend to be on the old syntax (if I interpret the issue correctly, which I might very well not due to ignorance).
My package.json has the following dependencies and scripts.
"scripts": {
"go": "webpack serve", ...
"build": "webpack --mode production"
},
"dependencies": {
"@types/react": "^16.4.14",
"@types/react-dom": "^16.0.7",
"awesome-typescript-loader": "^5.2.1",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"typescript": "^3.0.3",
"webpack": "^4.19.0"
},
"devDependencies": {
"@webpack-cli/serve": "^0.1.0",
"webpack-cli": "^3.1.0"
}
When I execute npm run build, it works as expected. However, when I execute npm run go, I get an error that I can't interpret, let alone know how to resolve.
C:\Source\Poc\react-poc-02\node_modules\webpack-cli\bin\prompt-command.js:108 require(pathForCmd).default(...args); // eslint-disable-line ^ TypeError: require(...).default is not a function at promptForInstallation (C:\Source\Poc\react-poc-02\node_modules\webpack-cli\bin\prompt-command.js:108:30) at C:\Source\Poc\react-poc-02\node_modules\webpack-cli\bin\cli.js:45:37 at Object. (C:\Source\Poc\react-poc-02\node_modules\webpack-cli\bin\cli.js:530:3) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) ...
It seems that there's a syntax issue in one of the Webpack packages, which I find unlikely. I rather believe that I'm missing something but I can't tell really what.
I have the following configs for Webpack
const webpack = {
entry: './src/client/index.tsx',
mode: "development",
output: {
filename: 'target/bundle.js',
},
resolve: { extensions: ['.ts', '.tsx', '.js', '.json'] },
module: {
rules: [{
test: /\.[t]sx?$/,
include: /src/,
use: [{
loader: "awesome-typescript-loader",
options: { configFileName: "tsconfig.json" }
}]
}]
}
};
module.exports = webpack;
and Typescript
{
"compilerOptions": {
"outDir": "./target/",
"sourceMap": true,
"skipLibCheck": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./src/**/*"
],
"exclude": [
"node_modules"
]
}