Search code examples
javascripttypescriptwebpackts-loader

Webpack/ts-loader import with .js extension not resolving

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.

Solution

  • 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.