Can't resolve 'fs' - NEXT.js

[tonymanuel]

When I import tw from "twin.macro" in my NEXT.js application, it throws me the following error. Could you please tell me how can I get rid of this error.

[ben-rogerson]

Sure, check out this next config for the fix.
New: This isn't needed in newer versions of next. If you're seeing errors, try removing your .next folder and restarting your dev process.

[ben-rogerson]

@rodmartinezmedina Do the next examples work for you? Perhaps you could compare against those examples to see where the issue is.

[OladetounJed]

Hello @ben-rogerson , I am getting the "can't resolve module 'fs'" error but seems the next.config.js You are referring to in the thread has been deleted.

[ben-rogerson]

Yeah that's for an older version of next - You no longer need the customisations in next.config.js.
Here are the deleted next.config.js customisations.

Edit: On a recent next js project, I still needed the fix below.
Seems dependant on certain plugins/packages you use.

// next.config.js
module.exports = {
  webpack: config => {
    // Unset client-side javascript that only works server-side
    config.resolve.fallback = { fs: false, module: false, path: false }
    return config
  },
}

[aroc]

Sadly, this doesn't work for me. I'm running nextjs 12.0.7 and twin 2.8.2 with webpack 5. If I add this to my webpack config, I get can't resolve module 'os'. If I additionally add os: false to the webpack config code then I get the error: MacroError: The macro you imported from "undefined" is being executed outside the context of compilation with babel-plugin-macros. This indicates that you don't have the babel plugin "babel-plugin-macros" configured correctly. Please see the documentation for how to configure babel-plugin-macros properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/user.md

[aroc]

Ok using this babel config has worked for me:
facebook/relay#2648 (comment)

[rodmartinezmedina]

Thanks a lot for your reply. Solved it. Somehow the next.config.js was not working at first. Now everything's working fine. Amazing package. Thanks so much. Rodrigo Martinez | Frontend Developer | UI-UX | Product Design

…

On Wed, May 12, 2021 at 11:07 PM Ben Rogerson ***@***.***> wrote: @rodmartinezmedina <https://github.com/rodmartinezmedina> Do the next examples <https://github.com/ben-rogerson/twin.examples> work for you? Perhaps you could compare against those examples to see where the issue is. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#219 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ANC6NIDKBQH74ZUC2GSDBU3TNLUYRANCNFSM4UGVASWA> .

[xairoo]

@ben-rogerson works, thanks! It's a bit confusing. I am using i18next (https://github.com/Xairoo/nextjs-i18n-static-page-starter), guess that's causing the error because of getStaticProps and/or getStaticPaths - btw. how the locales data gets loaded.

When I use next-i18next it just works out of the box. No need to update the next.config.js.

Anyway: twin.macro is awesome, thanks!

[Oyelowo]

I'm still getting the issue following this example: https://github.com/ben-rogerson/twin.examples/blob/master/storybook-emotion/.storybook/main.js

I'm combining twin.macro with storybook + emotions and nextjs(typescript)

Good job with this library! It is by far the most ergonomic CSS library I've worked with

[ben-rogerson]

@Oyelowo Thanks, I'll take a look into it.

[isurucuma]

Hi I am getting this error
I am using "fs" and "path" modules in my serverSideProps function. At first I got "fs" is not defined and then I tried editing config file by adding { fs: false, module: false, path: false } then I got the error which is in the attachment above. Could you please help me.

I have imported this markdown_utils.js inside my component

When this try to load this markdown_utils.js file from the component this error appear and component is not loaded to the browser

Thank you so much

[ben-rogerson]

Does importing path in your utils file help?

const path = require('path');