Integrating into a Webpack 2 project

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]

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.

[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';