Currently, I am working on a TypeScript file named index.ts which includes some JavaScript code. The main functionality involves importing Bootstrap CSS and templates.
import
'../node_modules/bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
import * as templates from './templates';
document.body.innerHTML = templates.main;
const mainElement = document.body.querySelector('.b4.main');
const alertsElement = document.body.querySelector('.b4-alerts');
mainElement.innerHTML = templates.welcome;
alertsElement.innerHTML = templates.alert;
However, when running my project using webpack dev server, an error occurs:
Module not found: Error: Can't resolve './templates' in '/Users/BorisGrunwald/Desktop/Node/b4-app/app'
Even though both files (index.ts and templates.ts) are located in the same folder, the system fails to locate "templates.ts."
Displayed below is a snapshot illustrating the structure of my project:
https://i.sstatic.net/hHdWK.png
For reference, included here is a snippet of my webpack configuration:
'use strict';
const path = require('path');
const distDir = path.resolve(__dirname,'dist');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './app/index.ts',
output: {
filename: 'bundle.js',
path: distDir
},
devServer: {
contentBase:distDir,
port:60800
},
plugins: [
new HtmlWebpackPlugin({
title: 'Better Book Bundle Builder'
}),
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery'
})
],
module: {
rules: [{
test:/\.ts$/,
loader:'ts-loader'
},{
test: /\.css$/,
use:['style-loader','css-loader']
},{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
loader:'url-loader?limit=100000'
}]
}
};
The contents of templates.ts are as follows:
export const main = `
<div class="container">
<h1>B4 - Book Bundler</h1>
<div class="b4-alerts"></div>
<div class="b4-main"></div>
</div>
`;
export const welcome = `
<div class="jumbotron">
<h1>Welcome!</h1>
<p>B4 is an application for creating book bndles</p>
</div>
`;
export const alert = `
<div class="alert alert-success alert-dismissible fade in"
role="alert">
<button class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success!</strong> Bootstrap is working
</div>
`;
If anyone can identify what might be causing the issue, your insights would be greatly appreciated!