4

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.

amosq
  • 81
  • 1
  • 8

2 Answers2

4

Update as of 2022-10-20

Webpack v5.74.0 was released in July 2022, and it includes a new resolve.extensionAlias option which provides a solution to this problem.

For example:

resolve: {
    extensionAlias: {
        '.js': ['.js', '.ts'],
    },
}

Answer as at 2021-09-01

I'm dealing with basically the same issue at the moment. I'm afraid I don't have a good answer for you, though I have found a discussion from 2017 that said ts-loader doesn't support this behaviour:

https://github.com/microsoft/TypeScript/issues/16577#issuecomment-343649391

If support has been added since then, I haven't been able to find any details on it yet.

I have had some success though with setting up aliases in my webpack.config.js's resolve.alias section, so relative paths to certain files using .js are resolved by Webpack to the .ts equivalents. For example:

alias: {
    './file-processing.js': './file-processing.ts',
},

But this is a very clunky solution that's not at all scalable.

Klesun
  • 12,280
  • 5
  • 59
  • 52
Mark Hanna
  • 3,206
  • 1
  • 17
  • 25
  • 1
    Not sure if this is helpful to you but there was discussion about this in the TypeStrong repo to allow imports to have a .js extension https://github.com/TypeStrong/ts-loader/issues/465#issuecomment-909445205 and commenters are saying that this project https://github.com/softwareventures/resolve-typescript-plugin provides the extra step to allow it to work. – amosq Sep 02 '21 at 13:53
  • Thanks @amosq, that discussion is about exactly the issue I'm running into but I hadn't found it despite days of searching for a solution, and it definitely looks useful (and it's something of a relief to see that I'm not the only person running into this problem). I see that suggestion you mentioned only popped up a couple of days ago. I'll give that `resolve-typescript-plugin` a go and report back once I've been able to try it out. – Mark Hanna Sep 02 '21 at 20:14
  • Thanks again @amosq, I've just tried that plugin and it has solved this problem for me. If you'd like to add it as an answer instead of a comment I'd be happy to mark it as the accepted answer. If not I'll add it myself tomorrow for anyone else who runs across this question. – Mark Hanna Sep 03 '21 at 00:03
  • Sorry, I was clearly lost when I posted that last comment. I thought this discussion was on [my related question](https://stackoverflow.com/questions/69008462/importing-es-modules-for-typescript-webpack-and-jasmine), instead of my response to this question. Oops! – Mark Hanna Sep 05 '21 at 20:20
  • I'm back to working on the project where I had this issue and I'm trying the plugin, however I'm getting a segfault when I try to launch webpack. Could you possibly link your webpack config and/or your package.json? – amosq Nov 24 '21 at 18:41
  • 1
    Here's a link to my base project on GitHub @amosq: [base-package](https://github.com/cipscis/base-package) – Mark Hanna Nov 24 '21 at 23:08
3

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.

amosq
  • 81
  • 1
  • 8
  • Somewhat related to extension handling: https://stackoverflow.com/a/71544906/2954288 and the links therein. – Harald Sep 11 '22 at 06:20