I recentley migrated from grunt to webpack and I can't figure how to require/import my templates. I have looked at several similar issues with no luck.
Here is my webpack.config file:
var webpack = require('webpack');
var globby = require('globby');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: {
app: globby.sync(['./app/app.js','./app/app.run.js', './app/app.config.js', './app/**/*.js']),
styles: globby.sync(['./content/styles/*.css']),
images: globby.sync(['./content/images/*.*']),
vendor: [
// removed to save space
]
},
output: {
filename: './scripts/[name].bundle.js',
path: path.join(__dirname, "public")
},
devServer: {
port: 1384,
contentBase: './public/'
},
// Enable sourcemaps for debugging webpack's output.
devtool: 'source-map',
module: {
rules: [
{ test: /\.less$/,
loader: "less-loader",
include: path.resolve(__dirname, "content", "styles", "less")
},
{
test: /\.html$/,
use: [
{
loader: 'ngtemplate-loader',
options: {
angular: true,
},
},
{
loader: 'raw-loader',
},
{
loader: 'html-loader'
},
{
loader: "ngtemplate!html?module=myTemplates&relativeTo=" +
(path.resolve(__dirname, './app/**'))
},
],
/*
exclude: [/node_modules/]
*/
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
},
{
test: /\.(ico)$/,
loader: "url-loader?name=./[name].[ext]",
include: path.resolve(__dirname, "content", "images")
},
{
test: /\.(jpg|jpeg|gif|png|tiff|svg)$/,
loader: "file-loader?name=./images/[name].[ext]",
include: path.resolve(__dirname, "content", "images")
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?minetype=application/font-woff&name=./fonts/[name].[ext]'
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
},
{
test: require.resolve('adal-angular/lib/adal'),
loader: 'expose-loader?AuthenticationContext'
},
{
test: /\.js$/,
enforce: "pre",
loader: 'source-map-loader'
}
],
},
plugins: [
new webpack.DefinePlugin({
ADMIN_API_URL: JSON.stringify('http://localhost:41118/api/'),
API_URL: JSON.stringify('http://localhost:32605/api/'),
GLOBAL_ADMIN_URL: JSON.stringify('https://adminapi.tradesolution.no/')
}),
new HtmlWebpackPlugin({
template: './app/layout.ejs',
filename: 'index.html'
}),
new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: './scripts/vendor.bundle.js' }),
new ExtractTextPlugin({ filename: './styles/[name].bundle.css' }),
/*new CleanWebpackPlugin(['public'], {
verbose: false
}),
*/
new AssetsPlugin({
filename: 'webpack.assets.json',
path: './public/scripts',
prettyPrint: true
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
"window.AuthenticationContext": "AuthenticationContext",
_: 'underscore'
}),
],
externals: [
{ xmlhttprequest: '{XMLHttpRequest:XMLHttpRequest}' }
],
}
The public folder builds as it should with .js, styles, images etc. But simple navigation results in this error:
ERROR in ./app/app.config.js
Module not found: Error: Can't resolve 'app/varegruppe/templates/index.html' in 'C:\Users\oystein\work\EPD.SPA\EpdSPA\app'
# ./app/app.config.js 50:25-71
Here is an example of how the routes are defined:
$routeProvider.when('/produkteier', {
templateUrl: require('app/produkteier/templates/view.html')
})
Using this plugin I managed to copy all the html files in to the public directory, with the following config:
var CopyWebpackPlugin = require('copy-webpack-plugin');
new CopyWebpackPlugin([
{from: './app/**/*.html', to: './'}
])
Related
Currently, my yarn build script generates 2 files, main.[hash].js and main.[hash].css. Is there any way that I can bundle even my css file to the main.[hash].js so that I only have one js file?
Here are my config files:
webpack.common.js
const webpack = require('webpack');
module.exports = {
entry: {
main: './src/index.js',
vendor: './src/vendor.js',
},
module: {
rules: [
{
test: /\.html$/,
use: ['html-loader'],
},
{
test: /\.(svg|png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'imgs',
},
},
},
{
enforce: 'pre',
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
cache: true,
emitWarning: true,
failOnError: true,
},
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery',
}),
],
};
webpack.dev.js
const path = require('path');
const merge = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin({
template: './src/template.html',
}),
],
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
],
},
});
webpack.prod.js
const path = require('path');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'production',
output: {
filename: '[name].[contentHash].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
minimizer: [
new OptimizeCssAssetsPlugin(),
new TerserPlugin(),
new HtmlWebpackPlugin({
template: './src/template.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true,
removeComments: true,
},
}),
],
},
plugins: [
new MiniCssExtractPlugin({filename: '[name].[contentHash].css'}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader, // 3. Extract css into files
'css-loader', // 2. Turns css into commonjs
'sass-loader', // 1. Turns sass into css
],
},
],
},
});
I have also tried adding some plugins to achieve this but had not had any luck so far.
If there is a plugin or some other way that you have, please help me with it.
I am using vuejs in wordpress theme, everything is properly setup and working.
npm run build works perfectly and creates dist and wordpress picks up all content from it.
What's the issue then?
npm run dev also works in the console but when I made any change in a vue template it compiles but IT DOES NOT SHOW UPDATED OUTPUT.
Please guide and help.
webpack.config.dev.js
const path = require('path');
const webpack = require('webpack');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env.example')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env.example'),
path.resolve(__dirname, '../.env'),
);
}
module.exports = (options = {}) => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: 'http://localhost:9000/',
filename: 'js/[name].js',
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?indentedSyntax&sourceMap',
scss: 'vue-style-loader?sourceMap!css-loader?sourceMap!sass-loader?sourceMap',
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
exclude: /node_modules/,
},
{
test: /\.js|\.vue$/,
use: [{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
}, ],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
use: [
'vue-style-loader?sourceMap',
'css-loader?sourceMap',
'postcss-loader?sourceMap',
'sass-loader?sourceMap',
],
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
},
exclude: /node_modules/,
},
{
test: /\.json$/,
loader: 'json-loader',
},
],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.optimize.ModuleConcatenationPlugin(),
],
devServer: {
compress: true,
contentBase: path.join(__dirname, '../dist'),
headers: {
'Access-Control-Allow-Origin': 'http://localhost',
},
hot: true,
public: 'localhost:9000',
port: 9000,
overlay: {
errors: true,
warnings: true,
},
},
devtool: 'eval-source-map',
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
watch: options.watch === 'true',
};
return config;
};
webpack.vue.build.js
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const StyleLintPlugin = require('stylelint-webpack-plugin');
const fs = require('fs');
const autoprefixer = require('autoprefixer');
if (fs.existsSync(path.resolve(__dirname, '../.env')) === true) {
fs.renameSync(
path.resolve(__dirname, '../.env'),
path.resolve(__dirname, '../.env.example'),
);
}
module.exports = () => {
const config = {
entry: {
admin: './src/admin.js',
public: './src/public.js',
},
output: {
path: path.resolve(__dirname, '../dist'),
publicPath: '',
filename: 'js/[name].js',
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
sass: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
scss: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader?sourceMap!sass-loader?sourceMap',
}),
},
preserveWhitespace: false,
postcss: [autoprefixer()],
},
},
{
test: /\.js$/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
{
test: /\.js|\.vue$/,
use: [
{
loader: 'eslint-loader',
options: {
configFile: path.resolve(__dirname, '../.eslintrc.json'),
},
},
],
enforce: 'pre',
exclude: /node_modules/,
},
{
test: /\.(s)?css$/,
loader: ExtractTextPlugin.extract({
fallback: 'vue-style-loader?sourceMap',
use: 'css-loader!postcss-loader!sass-loader',
}),
},
{
test: /\.png|\.jpg|\.gif|\.svg|\.eot|\.ttf|\.woff|\.woff2$/,
loader: 'file-loader',
query: {
name: '[hash].[ext]',
outputPath: 'static/',
publicPath: '../',
},
exclude: /node_modules/,
},
],
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../'),
verbose: true,
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [autoprefixer()],
context: '/',
},
}),
new ExtractTextPlugin('css/[name].css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"',
},
}),
new StyleLintPlugin({
configFile: path.resolve(__dirname, '../.stylelintrc.json'),
syntax: 'scss',
files: ['**/*.s?(a|c)ss', '**/*.vue'],
}),
new webpack.optimize.ModuleConcatenationPlugin(),
],
externals: {
jquery: 'jQuery',
},
resolve: {
alias: {
PublicJSUtilities: path.resolve(
__dirname,
'../src/public/js/utilities',
),
PublicCSSAbstracts: path.resolve(
__dirname,
'../src/public/css/abstracts',
),
PublicImg: path.resolve(__dirname, '../src/public/img'),
masonry: 'masonry-layout',
isotope: 'isotope-layout',
},
},
};
return config;
};
Screenshot to get some idea about folder structure:
http://prntscr.com/n0cbg1
add --watch in start field in package.json file.
or use this command for executing:
npm run build -- --watch
I have posted my Webpack configs below for a production environment. I am attempting to use background-image: url(../img/chevron-thin-right.svg); in one of my SCSS files but it is being resolved to background-image: url([object Module]) and therefore not working. I am trying to port a purely SCSS and HTML project into a react app being bundled by Webpack so this above approach used to work. Any fixes would be greatly appreciated.
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: './public/index.html',
favicon: './public/favicon.ico',
hash: true,
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf)$/,
use: {
loader: 'file-loader?limit=100000&name=images/[name].[ext]'
}
},
{
test: /\.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{
removeTitle: true,
removeComments: true
}
],
floatPrecision: 2
}
}
}
]
}
]
}
};
webpack.prod.js
const merge = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const common = require('./webpack.common.js');
const path = require('path');
const autoprefixer = require('autoprefixer');
module.exports = {};
module.exports = merge(common, {
mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
}
},
plugins: [
new CleanWebpackPlugin(['dist']),
new MiniCssExtractPlugin({
filename: '[name].css'
})
],
module: {
rules: [
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true,
root: path.resolve(__dirname),
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
'browsers': ['last 2 versions', 'ie >= 10'],
}),
],
sourceMap: true,
},
},
{
loader: 'sass-loader',
options: {
outputStyle: 'compressed',
sourceMap: true,
includePaths: [
'./src/client/style/scss',
],
},
}
]
}
]
}
});
In case anybody else is looking for an answer I was able to solve it. It was due to not loading the associated SVG through the url-loader. Another problem arose when adding svg back in because my inline SVGs I wanted to use as React components were running into errors as they were now going through the url-loader instead of my react-svg-loader.
Below is the working webpack.common.js and webpack.prod.js stayed the same. The solution was to differentiate my inline and external SVGs by turning all inline extensions from .svg to .inline.svg and adjusting webpack config accordingly
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const outputDirectory = 'dist';
module.exports = {
entry: './src/client/index.js',
output: {
path: path.join(__dirname, outputDirectory),
filename: 'bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: './public/index.html',
favicon: './public/favicon.ico',
hash: true,
filename: 'index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/,
exclude: /\.inline.svg$/,
use: {
loader: 'url-loader?limit=1000&name=images/[name].[ext]'
}
},
{
test: /\.inline.svg$/,
use: [
"babel-loader",
{
loader: "react-svg-loader",
options: {
svgo: {
plugins: [
{
removeTitle: true,
removeComments: true
}
],
floatPrecision: 2
}
}
}
]
}
]
}
};
Probably this is a total beginner question.
I am unable to call jQuery from within an aurelia model. I'm using the JavaScript Services SPA template. Any call to jQuery fails. I tried different approaches to fix this, but was unable to get it to work.
following are the related files :
webpack.config.js
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var AureliaWebpackPlugin = require('aurelia-webpack-plugin');
var bundleOutputDir = './wwwroot/dist';
module.exports = {
resolve: { extensions: [ '.js', '.ts' ] },
entry: { 'app': 'aurelia-bootstrapper-webpack' }, // Note: The aurelia-webpack-plugin will add your app's modules to this bundle automatically
output: {
path: path.resolve(bundleOutputDir),
publicPath: '/dist',
filename: '[name].js'
},
module: {
loaders: [
{ test: /\.ts$/, include: /ClientApp/, loader: 'ts-loader', query: { silent: true } },
{ test: /\.html$/, loader: 'html-loader' },
{ test: /\.css$/, loaders: [ 'style-loader', 'css-loader' ] },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
{ test: /\.json$/, loader: 'json-loader' }
]
},
plugins: [
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
new AureliaWebpackPlugin({
root: path.resolve('./'),
src: path.resolve('./ClientApp'),
baseUrl: '/'
})
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
new webpack.optimize.UglifyJsPlugin()
])
};
webpack.config.vendor.js
var isDevBuild = process.argv.indexOf('--env.prod') < 0;
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('vendor.css');
module.exports = {
resolve: {
extensions: [ '.js' ]
},
module: {
loaders: [
{ test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' },
{ test: /\.css(\?|$)/, loader: extractCSS.extract(['css-loader']) }
]
},
entry: {
vendor: [
'aurelia-event-aggregator',
'aurelia-fetch-client',
'aurelia-framework',
'aurelia-history-browser',
'aurelia-logging-console',
'aurelia-pal-browser',
'aurelia-polyfills',
'aurelia-route-recognizer',
'aurelia-router',
'aurelia-templating-binding',
'aurelia-templating-resources',
'aurelia-templating-router',
'bootstrap',
'bootstrap/dist/css/bootstrap.css',
'jquery'
],
},
output: {
path: path.join(__dirname, 'wwwroot', 'dist'),
publicPath: '/dist/',
filename: '[name].js',
library: '[name]_[hash]',
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
new webpack.DllPlugin({
path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
name: '[name]_[hash]'
})
].concat(isDevBuild ? [] : [
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } })
])
};
and the TypeScript model
import { $, jQuery} from 'jquery';
export class Home {
private a: jQuery;
attached() {
alert("begin");
this.a = $("body"); // this line fails
alert("end");
}
}
The comment from Kelly did the trick:
Try importing it like import * as $ from 'jquery';
I want to load module from variable string
var abc = './../containers/BlankContainer';
require(abc);
but it cannot find module, so I install 'require-from-string' module from npm.
Now when I build it's giving error
ERROR in ./~/require-from-string/index.js
Module not found: Error: Cannot resolve module 'module' in D:\Nilay\RnD\node_modules\require-from-string
# ./~/require-from-string/index.js 3:13-30
I found it is webpack issue, here is my webpack config:
const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin')
var entry = [path.resolve(__dirname, 'app/bootstrap.js')];
var output = {
path: path.resolve(__dirname, 'public/dist'),
filename: 'bundle-[name].js',
publicPath: "dist/"
};
var modules = {
loaders: [
{ test: /\.json$/, loader: "json-loader" },
{ test: /\.js$/,
loader: ['babel-loader'], exclude: /node_modules/, query: { cacheDirectory: 'babel_cache', presets: ['react', 'es2015'] } },
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader") },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.(woff|woff2)$/, loader: "file-loader" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" }
]
};
var plugins = [
new ExtractTextPlugin("bundle.css"),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ // minimize/compress all js chunks
compress: { warnings: false },
mangle: false,
sourcemap: false,
beautify: false,
dead_code: true
})
]
module.exports = {
entry: entry,
output: output,
stats: { colors: true },
watch: true,
module: modules,
plugins: plugins,
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
resolve: {
modules: [path.resolve(__dirname, '/app/routes'), 'node_modules/'],
descriptionFiles: ['package.json'],
extensions: ['', '.js', '.ts']
}
};
How can I resolve it?