My directory structure is as follows:
projectRoot
├── project-server
│ ├── src
│ └── pom.xml
├── project-ui
│ ├── tsconfig.json
│ └── src
│ └── file.ts. (imports ./file.js)
My problem is that project-server
uses the transpiled js files and such needs the .js
extension to resolve the files. I'm using webpack-dev-server for development and using ts-loader
but I'm getting the error that:
Module not found: Error: Can't resolve './file.js' in
'/projectRoot/project-ui/src'
The following is my webpack.config.js
:
module.exports = {
entry: './project-ui/src/file1.ts',
mode: "development",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
},
... other rules
]
},
resolve: {
extensions: ['.js', '.ts'],
}
My tsconfig.json
has configuration specific to where project-server
needs the js files. Namely,
"outDir": "../project-server/src/main/resources/static"
So I'm unsure how to configure Webpack/ts-loader to correctly resolve the import statement.
ts-loader doesn't natively support having imports with a .js extension so this project https://github.com/softwareventures/resolve-typescript-plugin provides the extra step required to make this work.