Getting breaking change errors for reactjs project

[trnchawla]

I initiated a new react project using npx create-react-app journalist_karmadigest --template typescript command. I added rssparser as a dependency but when I run it gives me below errors:

ERROR in ./node_modules/rss-parser/lib/parser.js 3:13-28
Module not found: Error: Can't resolve 'http' in '/Users/tarun/sources/journalist_karmadigest/node_modules/rss-parser/lib 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: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

ERROR in ./node_modules/rss-parser/lib/parser.js 4:14-30 Module not found: Error: Can't resolve 'https' in '/Users/tarun/sources/journalist_karmadigest/node_modules/rss-parser/lib' 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: { "https": require.resolve("https-browserify") }' - install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/rss-parser/lib/parser.js 6:12-26 Module not found: Error: Can't resolve 'url' in '/Users/tarun/sources/journalist_karmadigest/node_modules/rss-parser/lib' 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 } ERROR in ./node_modules/safe-buffer/index.js 3:13-30 Module not found: Error: Can't resolve 'buffer' in '/Users/tarun/sources/journalist_karmadigest/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 } ERROR in ./node_modules/xml2js/lib/parser.js 35:17-47 Module not found: Error: Can't resolve 'timers' in '/Users/tarun/sources/journalist_karmadigest/node_modules/xml2js/lib' 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: { "timers": require.resolve("timers-browserify") }' - install 'timers-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "timers": false }

I tried various solution but not able to solve it, please suggest a way to resolve this issue.

[towfiqi]

To fix this issue, Install these packages: timers-browserify , stream-browserify , url
And then add this to your webpack.config.js file:

        resolve: {
            ....
            fallback: {
                http: false,
                https: false,
                "url": require.resolve("url/"),
                "timers": require.resolve("timers-browserify"),
                "stream": require.resolve("stream-browserify")
            },
        },

[matdev]

I installed the packages, but I cannot find webpack.config.js file. Where is it located ?

[towfiqi]

@matdev Its probably because you are using create-react-app which does not have a webpack config file. I would suggest you to not use the package though, since it has not been update. I myself found this rss parser and using it in my project. Working great so far: https://github.com/nasa8x/rss-to-json/blob/master/src/parse.ts

[matdev]

@matdev Its probably because you are using create-react-app which does not have a webpack config file. I would suggest you to not use the package though, since it has not been update. I myself found this rss parser and using it in my project. Working great so far: https://github.com/nasa8x/rss-to-json/blob/master/src/parse.ts

Sounds good, but I get this error
TypeError: (0 , i.default) is not a function at t.default (index.js:17:1)

I'm calling this from javascript code by the way. Could it be related ?

[towfiqi]

yeah you can't use typescript code in a js file.

You need to convert that ts code to js code. Use this tool:
https://transform.tools/typescript-to-javascript

[matdev]

yeah you can't use typescript code in a js file.

You need to convert that ts code to js code. Use this tool: https://transform.tools/typescript-to-javascript

Converting the code calling parse() into js throws the same error.

You mean I should convert the whole rss-to-json package into js ?
Any other solution ?

[towfiqi]

No. You don't have to convert the whole repo.

But instead of copying the parser function like I did, you can simply use the npm package directly: https://github.com/nasa8x/rss-to-json/tree/master

[matdev]

Using the npm package direcly is what I did initially, and I got the TypeError: (0 , i.default) is not a function at t.default (index.js:17:1)
How to avoid converting the whole repo to js ?