Swagger-ui: Integrating into a Webpack 2 project

[olslash]

Hi @shockey

Let me first summarize our earlier conversation about the issues i ran into bundling swagger-ui into a webpack-2 project.

• did npm install swagger-ui
• I tried to do the obvious import Swagger from 'swagger-ui'
  
  
  
  • results in build error:
  
  

ERROR in ./~/yaml-js/lib/yaml.js
Module not found: Error: Can't resolve 'fs' in '/project-path/node_modules/yaml-js/lib'

• I added a webpack stub for node/fs, like what's in swagger-ui's own webpack config:

node: {
    fs: 'empty'
  },

-

• this resulted in the build succeeding, but my app wouldn't load, due to the error:
  Uncaught Error: Cannot find module "."
• and a bunch of warnings showed up in the console:

./~/yaml-js/lib/yaml.js
require.extensions is not supported by webpack. Use a loader instead.

-

• this is because yaml-js uses require.extensions to register itself as a yaml loader for node.js's require, which is different from webpack's.

• i used webpack.ProvidePlugin to stub require.extensions to null:

new webpack.ProvidePlugin({
  'require.extensions': null
})

-

• this cleared the warnings, but the "Cannot find module" error remained.
• i was not able to find a way to fix that error.

so what ended up working for me is simply using the swagger-ui-dist package.
import SwaggerUI, { presets } from 'swagger-ui-dist/swagger-ui-bundle';

I used swagger-ui-bundle, the full dist file with all dependencies loaded, because in that case the yaml-js dependency was already resolved by swagger's webpack 1 build.

I'd love to help get a true webpack 2 build working if possible, given the limitations of yaml-js, but for now I'm satisfied and this seems to be working fine.

[shockey]

Hey again, @olslash!

Is your webpack2 project available anywhere? I'm going to dig into this soon, but it would save me some time to not need to build out a test project.

[olslash]

sorry, it's not -- work project

best you could do i guess is start with a webpack2 boilerplate :)

[shockey]

@olslash, I think https://github.com/swagger-api/swagger-ui/pull/3281 solves your issue!

Also, that PR was just a formality - if you do a fresh npm install of your project you should pick up [email protected]. Let me know how it fares 😄

[olslash]

thanks! Will have a look as soon as i get a chance

[shockey]

@olslash, bump 😄 let me know if you get a chance to give this a try.

[olslash]

hey @shockey -- just tried, and it works great!

replaced:

import { SwaggerUIBundle } from 'swagger-ui-dist';
const { presets } = SwaggerUIBundle;
import 'swagger-ui-dist/swagger-ui.css';

with

import SwaggerUIBundle from 'swagger-ui';
const { presets } = SwaggerUIBundle;
import 'swagger-ui/dist/swagger-ui.css';

[shockey]

Awesome! Glad to hear it.

I'm going to close this since the problem is solved, feel free to open a ticket if you come across any other issues.