Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html' #90

azizj1 · 2018-09-11T18:37:23Z

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:

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.

The text was updated successfully, but these errors were encountered:

shockey · 2018-09-11T18:45:23Z

Looks like this error is coming from here:

swagger-ui-express/index.js

Line 32 in cdb6d96

var html = fs.readFileSync(__dirname + '/indexTemplate.html');

which is strange, it would appear that __dirname is empty.

@azizj1, can you edit node_modules/swagger-ui-express/index.js and add a console.log(__dirname) before the line I linked to, and share the output?

azizj1 · 2018-09-11T18:53:12Z

I added console.log('__dirname=' + __dirname); and got the output of __dirname=/

azizj1 · 2018-09-11T18:56:45Z

I got it to work. I updated my webpack.config.js and added the following:

const config = {
    node: {
        __dirname: true
    },

And now, __dirname=node_modules\swagger-ui-express

Thank you!

azizj1 · 2018-09-11T19:30:34Z

One more issue unfortunately, along the same vein. When I build with a libraryTarget of commonjs2, i.e.,:

const config = {
    mode: DEBUG ? 'development' : 'production',
    target: 'node',
    node: {
        __dirname: true
    },
    entry: DEBUG ?
        { 'local': './src/bin/www.ts' } :
        { 'lambda': './src/bin/lambda.ts' }
    ,
    output: {
        path: BUILD_DIR,
        filename: '[name].js',
        publicPath: '/',
        ... DEBUG ? {} : {
            libraryTarget: 'commonjs2'
        }
    },

I get a runtime error:

module initialization error: Error
at Object.fs.openSync (fs.js:646:18)
at Object.fs.readFileSync (fs.js:551:33)
at s (/var/task/lambda.js:536:1323)
at Object.setup (/var/task/lambda.js:536:2433)
at Object.<anonymous> (/var/task/lambda.js:296:57091)
at n (/var/task/lambda.js:1:186)
at Object.module.exports.Object.defineProperty.value (/var/task/lambda.js:296:56347)
at n (/var/task/lambda.js:1:186)
at /var/task/lambda.js:1:986
at Object.<anonymous> (/var/task/lambda.js:1:997)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)

Any thoughts on that?

I was able to console.log and get that __dirname=node_modules\swagger-ui-express, but I'm still crashing unfortunately.

azizj1 · 2018-09-11T19:43:30Z

Update: I wrapped the var html = fs.readFileSync(__dirname + '/indexTemplate.html'); in a try/catch to get more details on the error:

  var html = null;
  try {
    html = fs.readFileSync(__dirname + '/indexTemplate.html');
    console.log('done reading html!');
    console.log(html);
  } catch (e) {
    console.log('error reading sync of indexTemplate.html: ' + JSON.stringify(e));
  }

And I got the following error:

2018-09-11T19:40:35.247Z	8cb71427-b5fa-11e8-bfad-196a00a45e9d	error reading sync of indexTemplate.html:
{
    "errno": -2,
    "code": "ENOENT",
    "syscall": "open",
    "path": "node_modules\\swagger-ui-express/indexTemplate.html"
}

Now I'm a little unsure of where to go from here.

scottie1984 · 2018-09-11T20:24:02Z

I am no webpack expert and can only point you to this thread which may or may not help webpack/webpack#1599

shockey · 2018-09-11T20:38:50Z

@azizj1, try webpack: false instead of webpack: true in your config.

Per the docs:

true: The dirname of the input file relative to the context option.

false: The regular Node.js __dirname behavior. The dirname of the output file when run in a Node.js environment.

I believe we need the latter here in order for the indexTemplate behavior to work.

shockey · 2018-09-11T20:40:42Z

That said... I'm not 100% sure that swagger-ui-express will work with Webpack at all, since swagger-ui-express uses the filesystem at runtime.

Is there any particular reason you're using webpack to compile a Node.js application? Generally, you'd use webpack to produce bundles for single-page applications - curious what your use case here is.

azizj1 · 2018-09-11T21:38:54Z

Yea, I'm ready to concede that it's not going to work with webpack. :( I was able to get it running locally just fine, but on my dev environment, hitting the /docs endpoint gave the following console error:

The server is returning the files, just the content of the files is all messed up:

…ger-ui-express. Could not get it to work on dev or prod. See scottie1984/swagger-ui-express#90

shockey · 2018-09-11T22:50:11Z

If I was to hazard a guess I'd say that express.static isn't playing nice with the bundling:

swagger-ui-express/index.js

Line 88 in cdb6d96

return express.static(swaggerUi.getAbsoluteFSPath(), opts)

I see you have a lot of other things going on in your app (TypeScript, Babel, etc)... consider setting up a test repo with only webpack, express, and Swagger UI Express, and try to reproduce your issue there. With so many parts, it could be anything.

azizj1 · 2018-09-11T23:48:13Z

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.

scottie1984 · 2019-01-19T21:28:38Z

Does the library target not need to be umd as described here: https://blog.atj.me/2017/10/bundle-lambda-functions-using-webpack/

elitsi · 2019-07-31T17:27:37Z

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' ]) ]

WeslyG · 2019-11-20T21:29:19Z

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.

I try to test node.__dirname = true, but did not get the expected result, apparently this is due to the features of my build

module.exports = {
  mode: 'development',
  watch: true,
  watchOptions: {
    aggregateTimeout: 100
  },
  node: {
    global: true,
    __dirname: true,
  },
  devtool: 'eval',
  entry: ['./app.js'],
  target: 'node',
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader'
      }
    }]
  },
  plugins: [
    new NodemonPlugin(),
    new Dotenv(),
    new CleanWebpackPlugin(['build/*'])
  ],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.dev.js'
  },
};

@azizj1 - How did you manage to make it work on the local machine?
"webpack": "^4.39.1",
node 12 (latest)

Berger92 · 2020-01-24T11:40:48Z

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.

scottie1984 · 2020-04-02T19:10:09Z

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.

JoshuaAlzate · 2020-07-23T06:52:03Z

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'
        ]
    })
]

scottie1984 · 2021-11-30T09:30:07Z

Closing with solution

azizj1 added a commit to azizj1/google-calendar-analytics that referenced this issue Sep 11, 2018

remove swagger - only got it to work locally using raw-loader in swag…

32bce7c

…ger-ui-express. Could not get it to work on dev or prod. See scottie1984/swagger-ui-express#90

marcelfalliere mentioned this issue Feb 8, 2019

Should not rely on filesystem in order to be compatible with bundling system (webpack, ...) #114

Closed

fguitton mentioned this issue Feb 19, 2019

Reactivate Swagger UI once bundling issues are solved dsi-icl/optimise#286

Closed

Pietrox mentioned this issue Sep 17, 2019

Webpack is returning __dirname as '/' nestjs/ng-universal#143

Closed

scottie1984 mentioned this issue Apr 2, 2020

The stylesheet ../swagger-ui.css was not loaded because its MIME type #173

Closed

This was referenced Apr 16, 2020

swagger-ui-css-resource-not-found-in-production-mode #174

Closed

SwaggerUIBundle is not defined with webpack build #176

Closed

kaipaysen mentioned this issue Jun 15, 2020

This doesn't work #192

Closed

scottie1984 closed this as completed Nov 30, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html' #90

Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html' #90

azizj1 commented Sep 11, 2018

shockey commented Sep 11, 2018

azizj1 commented Sep 11, 2018

azizj1 commented Sep 11, 2018 •

edited

Loading

azizj1 commented Sep 11, 2018 •

edited

Loading

azizj1 commented Sep 11, 2018

scottie1984 commented Sep 11, 2018

shockey commented Sep 11, 2018

shockey commented Sep 11, 2018 •

edited

Loading

azizj1 commented Sep 11, 2018

shockey commented Sep 11, 2018

azizj1 commented Sep 11, 2018 •

edited

Loading

scottie1984 commented Jan 19, 2019 •

edited

Loading

elitsi commented Jul 31, 2019 •

edited

Loading

WeslyG commented Nov 20, 2019

Berger92 commented Jan 24, 2020 •

edited

Loading

scottie1984 commented Apr 2, 2020

JoshuaAlzate commented Jul 23, 2020 •

edited

Loading

scottie1984 commented Nov 30, 2021

Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html' #90

Swagger UI + Webpack: no such file or directory, open 'C:\indexTemplate.html' #90

Comments

azizj1 commented Sep 11, 2018

shockey commented Sep 11, 2018

azizj1 commented Sep 11, 2018

azizj1 commented Sep 11, 2018 • edited Loading

azizj1 commented Sep 11, 2018 • edited Loading

azizj1 commented Sep 11, 2018

scottie1984 commented Sep 11, 2018

shockey commented Sep 11, 2018

shockey commented Sep 11, 2018 • edited Loading

azizj1 commented Sep 11, 2018

shockey commented Sep 11, 2018

azizj1 commented Sep 11, 2018 • edited Loading

scottie1984 commented Jan 19, 2019 • edited Loading

elitsi commented Jul 31, 2019 • edited Loading

WeslyG commented Nov 20, 2019

Berger92 commented Jan 24, 2020 • edited Loading

scottie1984 commented Apr 2, 2020

JoshuaAlzate commented Jul 23, 2020 • edited Loading

scottie1984 commented Nov 30, 2021

azizj1 commented Sep 11, 2018 •

edited

Loading

azizj1 commented Sep 11, 2018 •

edited

Loading

shockey commented Sep 11, 2018 •

edited

Loading

azizj1 commented Sep 11, 2018 •

edited

Loading

scottie1984 commented Jan 19, 2019 •

edited

Loading

elitsi commented Jul 31, 2019 •

edited

Loading

Berger92 commented Jan 24, 2020 •

edited

Loading

JoshuaAlzate commented Jul 23, 2020 •

edited

Loading