Typescript and absolute import paths in server bundle #1202

New Issue

fergalmoran · 2025-08-09T17:19:15Z

fergalmoran commented

2025-08-09 17:19:15 +00:00

Originally created by @MrCrimp on 12/7/2016

I'm scratching my head, hoping someone can point me in the right direction.

After upgrade to TypeScript 2.1 and webpack2-beta27, I've started using non-relative imports, aka

import * from 'store/foo'

with the help of TsConfig settings


 // when importing with relative path 'some/module', start from web root directory
    "baseUrl": ".",

    // instruct the compiler to try resolve; starting from root with baseUrl
    "paths": {
      "*": [
        "*"
      ]
    }

For webpack client bundles this works great, offering a more refactor friendly approach then the relative imports.

Now, for server rendering, using aspnet-prerendering@2, I'm getting webpack errors (ts-loader?) like

Module not found: Error: Can't resolve 'store/foo' in 'C:(......)\app\shared\feature\bar' @ ./app/shared/feature/bar.tsx

From
What I've tried:

using resolve.modules
resolve.alias
removing (tsconfig) "module": "es2015" (tree-shaking) but to no luck.

Server bundle config


var serverBundle = {
    resolve: { 
      mainFields: ['main'],
      extensions: [ '.js', '.jsx', '.ts', '.tsx' ],
      alias:{
        app: path.resolve(__dirname, 'app')
      },
      modules: [
           path.resolve(__dirname, '.'),
           path.resolve(__dirname, 'app'),
           path.resolve(__dirname, 'node_modules')           
        ]
    },
    module: {
        rules: [
            { test: /\.json$/, include: /app/, loader: 'json-loader' },
            { test: /\.tsx?$/, include: /app/, loader: 'babel-loader' },
            { test: /\.tsx?$/, include: /app/, loader: 'ts-loader', query: { silent: true } },
            { test: /\.scss$/, exclude: [ /(node_modules)/], loader: 'style-loader!css-loader!sass-loader' },
            { test: /\.png$/, loader: "url-loader?limit=100000" }
        ]    
    },
    entry: { 'server': './app/infrastructure/boot-server.tsx' },
    plugins: [
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('../wwwroot/dist/vendor-manifest.json'),
            sourceType: 'commonjs2',
            name: './vendor'
        })
    ],
    output: {
        libraryTarget: 'commonjs',
        path: path.join(__dirname, '../wwwroot', 'dist'),
        filename: '[name].js'
    },
    target: 'node',
    devtool: 'inline-source-map'
};

*Originally created by @MrCrimp on 12/7/2016* I'm scratching my head, hoping someone can point me in the right direction. After upgrade to TypeScript 2.1 and webpack2-beta27, I've started using non-relative imports, aka `import * from 'store/foo' ` with the help of TsConfig settings ``` // when importing with relative path 'some/module', start from web root directory "baseUrl": ".", // instruct the compiler to try resolve; starting from root with baseUrl "paths": { "*": [ "*" ] } ``` **For webpack client bundles this works great**, offering a more refactor friendly approach then the relative imports. ----- Now, for server rendering, **using aspnet-prerendering@2**, I'm getting webpack errors (ts-loader?) like >Module not found: Error: Can't resolve 'store/foo' in 'C:\(......)\app\shared\feature\bar' @ ./app/shared/feature/bar.tsx From What I've tried: - using resolve.modules - resolve.alias - removing (tsconfig) "module": "es2015" (tree-shaking) but to no luck. Server bundle config ``` var serverBundle = { resolve: { mainFields: ['main'], extensions: [ '.js', '.jsx', '.ts', '.tsx' ], alias:{ app: path.resolve(__dirname, 'app') }, modules: [ path.resolve(__dirname, '.'), path.resolve(__dirname, 'app'), path.resolve(__dirname, 'node_modules') ] }, module: { rules: [ { test: /\.json$/, include: /app/, loader: 'json-loader' }, { test: /\.tsx?$/, include: /app/, loader: 'babel-loader' }, { test: /\.tsx?$/, include: /app/, loader: 'ts-loader', query: { silent: true } }, { test: /\.scss$/, exclude: [ /(node_modules)/], loader: 'style-loader!css-loader!sass-loader' }, { test: /\.png$/, loader: "url-loader?limit=100000" } ] }, entry: { 'server': './app/infrastructure/boot-server.tsx' }, plugins: [ new webpack.DllReferencePlugin({ context: __dirname, manifest: require('../wwwroot/dist/vendor-manifest.json'), sourceType: 'commonjs2', name: './vendor' }) ], output: { libraryTarget: 'commonjs', path: path.join(__dirname, '../wwwroot', 'dist'), filename: '[name].js' }, target: 'node', devtool: 'inline-source-map' }; ```

fergalmoran closed this issue

2025-08-09 17:19:15 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1202