swagger-ui-express: Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html'

I have an Express app built via webpack 4.17.2. It works great until I add swagger-ui-express (v4.0.1). I added swagger to my express app by doing:

import * as swaggerUi from 'swagger-ui-express';
import * as swaggerDoc from './swagger.json';
// ...
app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerDoc));

As soon as I do that, my webpack build crashes with the following error:

None I’ve uploaded a gist with more details on the configuration: webpack.config.js, app.ts, and relevant info from package.json. And another gist with just the swagger.json.

Node: 8.9.4

Any help would be appreciated.

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 3
Comments: 18 (8 by maintainers)

Commits related to this issue

remove swagger - only got it to work locally using raw-loader in swagger-ui-express. Could not get it to work on dev or prod. See https://github.com/scottie1984/swagger-ui-express/issues/90 — committed to azizj1/google-calendar-analytics by azizj1 6 years ago

Most upvoted comments

I can confirm that @elitsi 's solution worked for me.

So I added this to the webpack config:

   node: {
        __dirname: false
    },
    plugins: [
        new CopyWebpackPlugin([
            'node_modules/swagger-ui-dist/swagger-ui.css',
            'node_modules/swagger-ui-dist/swagger-ui-bundle.js',
            'node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js',
            'node_modules/swagger-ui-dist/favicon-16x16.png',
            'node_modules/swagger-ui-dist/favicon-32x32.png'
        ])
    ]

The swagger-dist files have to be next to the lambda handler file.

Whenever I try this, I got this error

Argument of type 'string[]' is not assignable to parameter of type 'CopyPluginOptions'. Property 'patterns' is missing in type 'string[]' but required in type 'CopyPluginOptions'.ts(2345)

Most likely the CopyWebpackPlugin changed their implementation. I got it working by replacing it with this

plugins: [
    new CopyWebpackPlugin({
        patterns: [
            './node_modules/swagger-ui-dist/swagger-ui.css',
            './node_modules/swagger-ui-dist/swagger-ui-bundle.js',
            './node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js',
            './node_modules/swagger-ui-dist/favicon-16x16.png',
            './node_modules/swagger-ui-dist/favicon-32x32.png'
        ]
    })
]

JoshuaAlzate on Aug 8, 2023

I have managed to make swagger-ui work with AWS Lambda. Using ‘CopyWebpackPlugin’ you could copy swagger static files into the root directory of the lambda function.

Also, __dirname in the webpack configurations should be false. This way, when swagger will get the absolute path for serving the files, it will server them from the function dir.

In the webpack.config.js file, inside “plugins” , insert the following - plugins: [ new CopyWebpackPlugin([ '../../../node_modules/swagger-ui-express/indexTemplate.html.tpl', '../../../node_modules/swagger-ui-express/swagger-ui-init.js.tpl', '../../../node_modules/swagger-ui-dist/swagger-ui.css', '../../../node_modules/swagger-ui-dist/swagger-ui-bundle.js', '../../../node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js', '../../../node_modules/swagger-ui-dist/favicon-16x16.png', '../../../node_modules/swagger-ui-dist/favicon-32x32.png' ]) ]

elitsi on Jul 31, 2019

I can confirm that @elitsi 's solution worked for me.

So I added this to the webpack config:

   node: {
        __dirname: false
    },
    plugins: [
        new CopyWebpackPlugin([
            'node_modules/swagger-ui-dist/swagger-ui.css',
            'node_modules/swagger-ui-dist/swagger-ui-bundle.js',
            'node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js',
            'node_modules/swagger-ui-dist/favicon-16x16.png',
            'node_modules/swagger-ui-dist/favicon-32x32.png'
        ])
    ]

The swagger-dist files have to be next to the lambda handler file.

Berger92 on Jan 24, 2020

I can confirm that @elitsi 's solution worked for me.

So I added this to the webpack config:

   node: {
        __dirname: false
    },
    plugins: [
        new CopyWebpackPlugin([
            'node_modules/swagger-ui-dist/swagger-ui.css',
            'node_modules/swagger-ui-dist/swagger-ui-bundle.js',
            'node_modules/swagger-ui-dist/swagger-ui-standalone-preset.js',
            'node_modules/swagger-ui-dist/favicon-16x16.png',
            'node_modules/swagger-ui-dist/favicon-32x32.png'
        ])
    ]

The swagger-dist files have to be next to the lambda handler file.

@Berger92 - was thinking off adding this to the Readme for future webpack users.

scottie1984 on Apr 2, 2020

So locally, it only works when I have node.__dirname = true in my webpack.config.js. On AWS lambda (which has a libraryTarget of commonjs2, it doesn’t work with node.__dirname = true, =false, or mock, which is ultimately what I need it for.

azizj1 on Sep 11, 2018