Code Monkey home page Code Monkey logo

cra-template-elements's Introduction

Elements Create React App Template

This is a Create React App Template for Stoplight Elements;

To use it, simply type npx create-react-app my-dir --template @stoplight/elements.

cra-template-elements's People

Contributors

mpodlasin avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

Forkers

terkea

cra-template-elements's Issues

CRA template crashes from scratch - polyfill

Describe the bug

When following the tutorial to create a react app from this template, it simply does not work and prompts the following error message.

...
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
 @ ./node_modules/httpsnippet/src/index.js 6:9-32
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/from/index.js 3:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/from'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/event-stream/index.js 8:11-26
 @ ./node_modules/httpsnippet/src/index.js 6:9-32
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/httpsnippet/src/index.js 10:9-31
Module not found: Error: Can't resolve 'querystring' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/httpsnippet/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
        - install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "querystring": false }
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/httpsnippet/src/index.js 18:10-24
Module not found: Error: Can't resolve 'url' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/httpsnippet/src'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/map-stream/index.js 5:13-37
Module not found: Error: Can't resolve 'stream' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/map-stream'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/event-stream/index.js 10:10-31
 @ ./node_modules/httpsnippet/src/index.js 6:9-32
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/string_decoder/node_modules/safe-buffer/index.js 4:13-30
Module not found: Error: Can't resolve 'buffer' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/string_decoder/node_modules/safe-buffer'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "buffer": require.resolve("buffer/") }'
        - install 'buffer'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "buffer": false }
 @ ./node_modules/string_decoder/lib/string_decoder.js 24:13-42
 @ ./node_modules/split/index.js 7:14-53
 @ ./node_modules/event-stream/index.js 12:12-28
 @ ./node_modules/httpsnippet/src/index.js 6:9-32
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/through/index.js 1:13-30
Module not found: Error: Can't resolve 'stream' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/through'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/event-stream/index.js 7:14-32
 @ ./node_modules/httpsnippet/src/index.js 6:9-32
 @ ./node_modules/@stoplight/elements-core/index.mjs 20:0-38 499:24-35
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/@stoplight/elements/index.mjs 12:0-89
Module not found: Error: Can't resolve '@stoplight/http-spec/oas2' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/@stoplight/elements'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@stoplight/http-spec/oas2' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/@stoplight/elements/index.mjs 13:0-89
Module not found: Error: Can't resolve '@stoplight/http-spec/oas3' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/@stoplight/elements'
Did you mean 'index.js'?
BREAKING CHANGE: The request '@stoplight/http-spec/oas3' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

ERROR in ./node_modules/abort-controller/polyfill.mjs 2:0-46
Module not found: Error: Can't resolve './dist/abort-controller' in '/Users/maurolucchini/Desktop/code/ebsi/api-catalog-3/node_modules/abort-controller'
Did you mean 'abort-controller.mjs'?
BREAKING CHANGE: The request './dist/abort-controller' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@stoplight/json-schema-ref-parser/lib/resolvers/http.js 5:0-36
 @ ./node_modules/@stoplight/json-schema-ref-parser/lib/options.js 14:21-48
 @ ./node_modules/@stoplight/json-schema-ref-parser/lib/normalize-args.js 3:16-36
 @ ./node_modules/@stoplight/json-schema-ref-parser/lib/index.js 8:22-49
 @ ./node_modules/@stoplight/elements-core/index.mjs 46:0-59 4619:11-28 4621:11-28
 @ ./node_modules/@stoplight/elements/index.mjs 1:0-393 174:6-21 178:6-19 239:32-36 244:52-56 253:25-40 258:27-40 263:29-42 266:33-43 316:25-29 399:16-32 453:53-68 456:8-18 465:215-225 473:63-86 614:47-54 728:25-39 729:26-51 744:27-40 772:27-40 778:29-54 800:17-27 800:29-39 800:41-64 800:66-84 800:86-109
 @ ./src/App.js 4:0-42 12:35-38
 @ ./src/index.js 7:0-24 11:33-36

14 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.68.0 compiled with 14 errors and 35 warnings in 31535 ms

To Reproduce

  1. Given the Stoplight documentation > Elements > Using with React
  2. Run npx create-react-app my-dir --template @stoplight/elements
  3. Run cd my-dir && yarn run start

Expected behavior

Get a Hello World message.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.