Fails to compile

[astara303]

Q&A

Operating System: linux Node Version: 14.16.0 Framework Version: 1.61.2 Plugin Version: 3.8.4 SDK Version: 2.3.2 Components Core Version: 1.1.2 Components CLI Version: 1.6.0

• OS: Mac
• Browser: Chrome
• Version: 102.0.5005.61
• Method of installation: npm
• Swagger-UI version: 3.52.5
• Swagger/OpenAPI version: swagger2openapi: 6.2.1

Describe the bug you're encountering

When trying to make any update to my repository, I receive this error in my pipeline when trying to deploy:

Failed to compile. ./node_modules/swagger-ui-react/swagger-ui.css 1:0 Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

.swagger-ui{color:#3b4151;

This has never happened before, and we've been running our documentation portal with swagger-ui for quite some time. Nothing had changed on the portal since the last successful update. But we are not able to make any updates to the repository- even a simple text change update.

To reproduce...

Here is my package-json:

{ "name": "---", "version": "2.0.1", "description": "---", "scripts": { "dev": "next", "build": "next build", "build:data": "node build-scripts/", "test": "jest", "test:watch": "jest --watch", "test:coverage": "jest --coverage", "test:ci": "jest --ci --coverage", "lint": "eslint '**/*.js' --fix", "deploy:init": "serverless create_domain --stage $ENV", "deploy": "serverless deploy -v --stage $ENV", "updatedocs": "node index", "destroy": "npm run destroy:domain && npm run destroy:serverless", "destroy:domain": "serverless delete_domain --stage $ENV", "destroy:serverless": "---" }, "repository": { "type": "git", "url": "---" }, "keywords": [ "node", "react", "nextjs", "express", "markdown", "raml" ], "contributors": [ "---" ], "license": "ISC", "homepage": "---", "dependencies": { "@apidevtools/swagger-parser": "10.0.3", "axios": "0.24.0", "btoa": "^1.2.1", "cacheable-response": "1.9.1", "core-js": "3.8.3", "cross-fetch": "3.1.4", "fs": "0.0.1-security", "isomorphic-unfetch": "3.0.0", "js-cookie": "2.2.1", "json-to-pretty-yaml": "1.2.2", "lodash": "4.17.15", "marked": "0.7.0", "mobx": "6.0.5", "moment": "2.24.0", "next": "9.1.4", "next-compose-plugins": "2.2.0", "next-cookies": "2.0.3", "next-images": "1.2.0", "raw-loader": "3.1.0", "react": "16.14.0", "react-dom": "16.14.0", "react-hook-form": "3.29.4", "react-markdown": "4.2.2", "react-onclickoutside": "6.9.0", "redoc": "2.0.0-rc.45", "serverless-tag-api-gateway": "1.0.0", "styled-components": "5.2.1", "styled-jsx": "3.2.4", "swagger-ui-react": "3.52.5", "uglifyjs-webpack-plugin": "2.2.0" }, "devDependencies": { "babel-core": "6.26.3", "babel-eslint": "10.0.3", "babel-jest": "24.9", "babel-plugin-lodash": "3.3.4", "babel-polyfill": "6.26.0", "babel-preset-env": "1.7.0", "babel-preset-react": "6.24.1", "enzyme": "3.10.0", "enzyme-adapter-react-16": "1.15.1", "eslint": "6.6.0", "eslint-config-airbnb": "18.0.1", "eslint-config-prettier": "6.7.0", "eslint-plugin-babel": "5.3.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jest": "23.0.4", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-prettier": "3.1.1", "eslint-plugin-react": "7.16.0", "frontmatter-markdown-loader": "3.1.0", "jest": "24.9.0", "jest-transform-stub": "2.0.0", "prettier": "1.19.1", "react-addons-test-utils": "15.6.2", "react-test-renderer": "16.12.0", "serverless": "1.61.2", "serverless-api-compression": "1.0.1", "serverless-domain-manager": "3.3.1", "serverless-nextjs-plugin": "2.4.4", "stylelint": "12.0.0", "stylelint-order": "3.1.1", "webpack-cli": "3.3.10" }, "browserslist": [ "last 2 major versions", "> 1%", "maintained node versions", "not dead", "ie > 10" ] }

Expected behavior

I expect to be able to update the repository. The bug is pointing to a color within your package- not something I've changed on the repository.

[ceoshikhar]

I have started facing build issues as well. My swagger-ui-react version has been 4.9.0 for the last 5 months but I have started getting these errors since today

[ceoshikhar]

Update: updated webpack to v5 and this error is no longer coming up.

[afilina]

I know nothing of the npm ecosystem. Where do I update webpack?

[ceoshikhar]

try

 npm update webpack

for more info

[afilina]

Ok I did, this doesn't solve the issue. Fails with exactly the same message. I ended up going for a SaaS instead.

[cammurray]

I'm also seeing this now too,

Updating webpack by running 'npm update webpack' has no effect.

./node_modules/swagger-ui-react/swagger-ui-es-bundle-core.js 15073:25 Module parse failed: Unexpected token (15073:25) You may need an appropriate loader to handle this file type. | T = (0, p.default)(e = (0, ft.default)((0, p.default)(a).call(a, function (e, t) { | var r = t.get("in");

        return e[r] ?? (e[r] = []), e[r].push(t), e;

| }, {}))).call(e, function (e, t) { | return (0, h.default)(e).call(e, t);

[slaweet]

I also faced this issue. The last version that didn't have this error is swagger-ui 4.13.0, so I reverted to that version.

[eak24]

I am also seeing this, and so needing to pin version to 4.13.0

[marvinthepa]

Another victim here. Using swagger-ui-react. I guess this is caused by 2eaa6c10e424433c7f5dd5c8554729a6f46b9730, as it changes the artifact to es2015. See #6291 . I would think this could be worked around by adopting our babel config, but I do not know how. Please advise :pray: .

[marvinthepa]

I found a workaround for our project, maybe it helps someone else: Adding two additional babel plugins in babel.config.js:

    plugins: [
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-transform-for-of',

[crochik]

The issue it seems to be the use of ?? ... by just changing the only instance of it on swagger-ui-react/swagger-ui-es-bundle-core.js I can build again my project.

I didn't look hard enough on how to make a proper fix but a simple search of the repo points to https://github.com/swagger-api/swagger-ui/blob/75c78b029382596824614b15ec7233dbd69f6e66/src/core/components/parameters/parameters.jsx#L129

I wouldn't be surprised if a change there will fix the issue.

[mfabricanti]

I'm getting this error too. The newest version I can use successfully is v4.13.0.

Using v4.13.1 already got the build error message:

./node_modules/swagger-ui-react/swagger-ui-es-bundle-core.js 14235:21
Module parse failed: Unexpected token (14235:21)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|             T = (0, p.default)(e = (0, ft.default)((0, p.default)(r).call(r, (e, t) => {
|         const r = t.get("in");
>         return e[r] ??= [], e[r].push(t), e;
|       }, {}))).call(e, (e, t) => (0, h.default)(e).call(e, t), []);
|

[marcodarko]

Having the exact same issue with swagger-editor as well, I tried upgrading webpack, and running the recommended requirements and just can't get it work.

[nikitakoliadin]

Any updates on this issue ?

[char0n]

Hi everybody,

SwaggerUI@3 or SwaggerUI@4 is no longer supported. Please use SwaggerUI@5. SwaggerUI@5 is fully compatible with webpack@5 and builds on webpack@5 config-less - which means no webpack config is needed to build SwaggerUI@5, it just builds with webpack defaults on MAINTENANCE, ACTIVE and CURRENT Node.js versions (at this point they are v18, v20, v22).

We maintain a list of bundlers & tools that we know SwaggerUI@5 works with: https://github.com/swagger-api/swagger-ui/wiki/Seamless-Integration-with-Bundlers-&-Test-Tools

One one of those supported bundlers is webpack@5: https://github.com/swagger-api/swagger-ui/wiki/Seamless-Integration-with-Bundlers-&-Test-Tools#webpack5

You can use the integration repo (https://github.com/char0n/swagger-ui-webpack) to verify what I've just written above.