Currently, I am working on a Typescript testcase that requires static XML data loaded from a file within the project. The issue arises when using webpack in a node/typescript setup where Visual Studio Code's typescript is not aligned with the project's typescript version.
The problematic line (as per VSC) causing confusion is as follows (both the testcase and xml file reside in the same directory):
import data from './app.config.xml';
In order to address import related issues within the project, I had to take the following steps (Importing Other Assets):
1) Make sure to use raw-loader in webpack for handling xml files:
module: {
rules: [
{
test: /\.xml$/i,
use: 'raw-loader'
},
2) Declare a module in a declaration file located at ./lib/declarations.d.ts
declare module '*.xml' {
const content: string;
export default content;
}
3) Include this declaration file in the types property of tsconfig
"types": [
"mocha", "node", "./lib/declarations"
],
While trying to import in my test case, I encountered the error message:
Cannot find module './app.config.xml'.ts(2307)
This discrepancy between VSC's TypeScript and the actual project build versions has left me puzzled, especially because both are running on version 3.7.2. Despite the successful build, seeing errors in VSC can be bothersome when it's not in sync with the project environment. This inconsistency is uncommon based on my prior experience with TypeScript harmony across environments, making it harder to pinpoint the cause. Resetting my repository and rebuilding did not resolve the issue.
In VSC, I am utilizing the "Typescript Extension Pack (0.2.0)" which comprises TSLine, TypeScript Hero, json2ts, Move TS, Path Intellisense, Tyescript Impoerter, Prettier, and Debugger for Chrome. However, none of these extensions seem responsible for the reported error; it appears to be stemming directly from VSC's built-in Typescript support.
For reference, here's an overview of my tsconfig:
{
"compilerOptions": {
"allowJs": true,
"alwaysStrict": true,
"esModuleInterop": true,
"module": "commonjs",
"moduleResolution": "Node",
"noImplicitAny": true,
"sourceMap": true,
"strictNullChecks": true,
"target": "es5",
"types": [
"mocha", "node", "./lib/declarations"
],
"lib": [
"es5",
"es2015",
"es6",
"dom"
]
},
"include": [
"lib/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
and webpack configuration:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
devtool: 'source-map',
mode: 'development',
entry: ['./tests/all-tests-entry.js', './lib'],
target: 'node',
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.xml$/i,
use: 'raw-loader'
},
{ test: /\.ts(x?)$/, loader: 'ts-loader' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
resolve: {
extensions: ['.ts', '.js', '.json']
},
watchOptions: {
ignored: /node_modules/
},
output: {
filename: 'test-bundle.js',
sourceMapFilename: 'test-bundle.js.map',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs'
}
};
and all-tests-entry.js file:
var context = require.context('./', true, /.spec.ts$/);
context.keys().forEach(context);
module.exports = context;
Lastly, below is a depiction of the project structure with relevant files:
/project-root/
tsconfig.json
webpack.config.test.ts
/project-root/lib/
declaration.d.ts
/project-root/tests/
widget.class.spec.ts
app.config.xml
Referencing the error being flagged by VSC even with all extensions turned off: