TypeError: yaml.stringify is not a function

[erunion]

Hi there, we use swagger2openapi converting Swagger YAML files to OpenAPI JSON, and over the past week they updated their yaml dependency to 1.9.2, which has started to throw TypeError: yaml.stringify is not a function in browsers for us.

Downgrading yaml to 1.8.3 resolves the issue, and after digging in their source they just load yaml and run yaml.strinfigy. Looking at the release notes for 1.9.x I see you've made some changes to how ES module exports function for browsers, but it's not clear if we need to do anything in our Webpack config or package.json file for supporting this.

Any ideas?

[eemeli]

Could you clarify how exactly that error shows up, and which Node.js version you're using? I couldn't reproduce any error with api-explorer's tests or build using yaml 1.9.2 with Node.js 13.10.1:

$ git clone https://github.com/readmeio/api-explorer.git
$ cd api-explorer
$ npm install
$ npx lerna bootstrap
$ npm update yaml
$ npm ls yaml
api-explorer@0.0.0 /private/tmp/api-explorer
+-- swagger2openapi@6.0.3
| +-- oas-resolver@2.3.2
| | `-- yaml@1.9.2  deduped
| +-- oas-validator@4.0.3
| | +-- oas-linter@3.1.2
| | | `-- yaml@1.9.2  deduped
| | `-- yaml@1.9.2  deduped
| `-- yaml@1.9.2  deduped
`-- yaml@1.9.2

$ npm test
[...]
lerna success run Ran npm script 'test' in 9 packages in 58.6s:
lerna success - @readme/api-explorer
lerna success - @readme/api-logs
lerna success - @readme/http-status-codes
lerna success - @readme/markdown-magic
lerna success - @readme/markdown
lerna success - @readme/oas-extensions
lerna success - @readme/oas-to-har
lerna success - @readme/syntax-highlighter
lerna success - @readme/variable

$ npm run build
[...]
lerna success run Ran npm script 'build' in 3 packages in 41.0s:
lerna success - @readme/api-explorer
lerna success - @readme/api-logs
lerna success - @readme/markdown

[erunion]

I am running Node 10.16.0 and am only seeing the error in the browser. You can pull down the deps/yaml-latest branch from our project to check it out.

npm ci
npm run bootstrap
npm start

Then load up http://localhost:9966/ and you'll see the following error:

I added some debug into swagger2openapi to see what the YAML dependency it's pulling from our Webpack-compiled code looks like and got this:

[eemeli]

Okay, I see it now. Bother.

What's happening here is that swagger2openapi is doing a CommonJS require('yaml'), but yaml's package.json includes a "browser" field that's trying to be helpful and provide an ES module version for the bundler so that tree-shaking will work. This is a problem in Webpack, because for require() it presents the default export that it's getting from the ES module as an object { default }, and that's obviously not what the swagger2openapi code is expecting.

There's a Babel plugin babel-plugin-add-module-exports that fixes this in the general case, but based on a quick test that appears to cause issues with some of your other imports. Same with using the resolve.mainFields Webpack config to stop reading the "browser" field.

I think I need to switch the yaml browser endpoints to also be CommonJS; I don't think there's any other real way to fix this until Webpack starts supporting "exports".

[erunion]

Interesting. Alright!

I wonder if Webpack 5 will help to get this working right.