Error while importing react-tweet

[bullishgopher]

Issue

Getting an error while importing react-tweet package.

CSS Modules cannot be imported from within node_modules

Versions

"react-tweet": "^3.0.4" "react": "18.2.0" "next": "13.0.0"

[MikeKratzmann]

i do have the same issue with react-xeed

[rsxdalv]

Add this to next.config.js: transpilePackages: ["react-tweet"],

[bullishgopher]

It works. Thank you

[bullishgopher]

Btw, while building the app, I am getting this type error:

2:23 Error: Unable to resolve path to module 'react-tweet'. import/no-unresolved

[rsxdalv]

I was able to build it, you can check the project here https://github.com/rsxdalv/vetra2023

On Fri, Aug 11, 2023, 5:28 PM bullishgopher @.***> wrote:

Btw, while building the app, I am getting this type error:

2:23 Error: Unable to resolve path to module 'react-tweet'. import/no-unresolved [image: image] https://user-images.githubusercontent.com/49041460/260034136-9d016254-fea5-4141-b97b-437377c51ca5.png

— Reply to this email directly, view it on GitHub https://github.com/vercel/react-tweet/issues/119#issuecomment-1674885521, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABTRXI6E5WANWGZTA3XD6VTXUY6OTANCNFSM6AAAAAA3GIKMUE . You are receiving this because you commented.Message ID: @.***>

[bullishgopher]

Ok, thanks. I resolved it by removing all my eslint rules and adding the settings from your project @rsxdalv

Previous:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    mocha: true,
    node: true,
  },
  extends: [
    "next",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "prettier",
  ],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: "module",
  },
  settings: {
    "import/resolver": {
      node: {
        extensions: [".js", ".jsx", ".ts", ".tsx"],
        moduleDirectory: ["node_modules", "."],
      },
    },
  },
  rules: {
    "import/extensions": 0,
    "react/react-in-jsx-scope": 0,
    "react/prop-types": 0,
    "react/jsx-props-no-spreading": 0,
    "react/jsx-filename-extension": [1, { extensions: [".jsx", ".tsx"] }],
    "import/no-extraneous-dependencies": [
      "error",
      {
        devDependencies: ["**/*.test.tsx", "**/*.stories.tsx", "mocks/**/*.ts"],
      },
    ],
  },
  overrides: [
    {
      files: ["hardhat.config.js"],
      globals: { task: true },
    },
    {
      files: ["scripts/**"],
      rules: { "no-process-exit": "off" },
    },
    {
      files: ["hardhat.config.js", "scripts/**", "test/**"],
      rules: { "node/no-unpublished-require": "off" },
    },
  ],
};

Now:

{
  "extends": ["next", "next/core-web-vitals"]
}