Bug report
What is the current behavior?
When using extention .js as part of an import (fully-specified ESM import), webpack fails to create a bundle if the file imported have extention .tsx
This shouldnt be like this based on the comment of RyanCavanaugh
in this issue microsoft/TypeScript#41887 (comment)
"TypeScript doesn't modify JavaScript code you write, the import path you write should be the one you want to appear in the output .js file"
If the current behavior is a bug, please provide the steps to reproduce.
I created a repo showing this unexpected behavior
this repo was tested with both ts-loader and babel-loader
https://github.com/Josehower/webpack-babel-test
- clone the repo and install dependencies
- use command
$yarn start
import { test } from './test.js';
console.log('Hello Webpack Project.');
test();jose fernando hower@DESKTOP-FHTIMFT MINGW64 /D/upleveled-softwork/webpack-test (main)
$ yarn start
yarn run v1.22.5
$ webpack serve --config ./webpack.config.js --mode development
i ｢wds｣: Project is running at http://localhost:8080/
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\upleveled-softwork\webpack-test\dist
× ｢wdm｣: asset bundle.js 367 KiB [emitted] (name: main)
runtime modules 706 bytes 4 modules
cacheable modules 336 KiB
modules by path ./node_modules/webpack-dev-server/ 21.2 KiB
modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
modules by path ./node_modules/webpack-dev-server/node_modules/ 296 bytes 2 modules
modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
modules by path ./node_modules/querystring/*.js 4.51 KiB 3 modules
modules by path ./node_modules/webpack/hot/ 1.42 KiB
./node_modules/webpack/hot/emitter.js 75 bytes [built] [code generated]
./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
modules by path ./node_modules/url/*.js 23.1 KiB
./node_modules/url/url.js 22.8 KiB [built] [code generated]
./node_modules/url/util.js 314 bytes [built] [code generated]
./node_modules/webpack/hot/ sync nonrecursive ^\.\/log$ 170 bytes [built] [code generated]
ERROR in ./src/index.tsx 1:0-33
Module not found: Error: Can't resolve './test.js' in 'D:\upleveled-softwork\webpack-test\src'
resolve './test.js' in 'D:\upleveled-softwork\webpack-test\src'
using description file: D:\upleveled-softwork\webpack-test\package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
using description file: D:\upleveled-softwork\webpack-test\package.json (relative path: ./src/test.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\upleveled-softwork\webpack-test\src\test.js doesn't exist
*
Field 'browser' doesn't contain a valid alias configuration
D:\upleveled-softwork\webpack-test\src\test.js* doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\upleveled-softwork\webpack-test\src\test.js.js doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
D:\upleveled-softwork\webpack-test\src\test.js.ts doesn't exist
.tsx
Field 'browser' doesn't contain a valid alias configuration
D:\upleveled-softwork\webpack-test\src\test.js.tsx doesn't exist
as directory
D:\upleveled-softwork\webpack-test\src\test.js doesn't exist
webpack 5.36.0 compiled with 1 error in 2410 ms
i ｢wdm｣: Failed to compile.
- use command
$yarn tsc --noEmit
jose fernando hower@DESKTOP-FHTIMFT MINGW64 /D/upleveled-softwork/webpack-test (main)
$ yarn tsc --noEmit
yarn run v1.22.5
$ D:\upleveled-softwork\webpack-test\node_modules\.bin\tsc --noEmit
✨ Done in 1.49s.
What is the expected behavior?
-
In the example repo yarn start should succesfully create a bundle.
-
Webpack should be able to recognize the files imported and create a bundle even if the import statements with the extention .js point files that have the extention .tsx
Other relevant information:
OS: Windows 10 10.0.19041
CPU: (4) x64 Intel(R) Core(TM) i5-7400 CPU @ 3.00GHz
Binaries:
Node: 16.0.0 - ~\AppData\Local\Temp\yarn--1619542324765-0.4257021548777624\node.CMD
Yarn: 1.22.5 - ~\AppData\Local\Temp\yarn--1619542324765-0.4257021548777624\yarn.CMD
npm: 7.10.0 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 90.0.4430.93
Edge: Spartan (44.19041.906.0), Chromium (90.0.818.46)
Bug report
What is the current behavior?
When using extention .js as part of an import (fully-specified ESM import), webpack fails to create a bundle if the file imported have extention .tsx
This shouldnt be like this based on the comment of RyanCavanaugh
in this issue microsoft/TypeScript#41887 (comment)
If the current behavior is a bug, please provide the steps to reproduce.
I created a repo showing this unexpected behavior
this repo was tested with both
ts-loaderandbabel-loaderhttps://github.com/Josehower/webpack-babel-test
$yarn start$yarn tsc --noEmitWhat is the expected behavior?
In the example repo
yarn startshould succesfully create a bundle.Webpack should be able to recognize the files imported and create a bundle even if the import statements with the extention .js point files that have the extention .tsx
Other relevant information: