search

martpie / next-transpile-modules

Next.js plugin to transpile code from node_modules. Please see: https://github.com/martpie/next-transpile-modules/issues/291
MIT License
1.13k stars 85 forks source link

Not working since next@10.2.1 #220

Closed stubar closed 1 year ago

stubar commented 3 years ago

Are you trying to transpile a local package or an npm package? npm package (country-list)

Describe the bug I can see the changes in the node_modules folder of my local package, I see the Next js white triangle so it senses a change but it is not visible in the browser. If I restart the server it is still no visible. The module change is only visibly after wiping the .next folder and restarting server. I originally tried our local component library but I have proven this to be an issue with a public library too (https://www.npmjs.com/package/country-list) I chose something easy to demonstrate.

To Reproduce Steps to reproduce the behavior (a reproduction is even better): install Next next@10.2.2 or above (including 11) install https://www.npmjs.com/package/country-list set next config to 

const withTM = require('next-transpile-modules')(['country-list']); // pass the modules you would like to see transpiled

module.exports = withTM({  future: {
        webpack5: true
    }});

add <div> {getName('TW')}</div> in a page edit node_modules/country-list/data.json change the name of Taiwan

Expected behavior Taiwan should update to new value

Setup

Additional context Add any other context about the problem here.

martpie commented 3 years ago

Do you have a reproduction on a repo I could check?

Please also check the changelog for Next 11, future.webpack5 has been moved to the root of the config.

stubar commented 3 years ago

OK I didn't spot that. If I stay on webpack in v4 in Next 10.2.2 or 11 it works. So it's a combination being on 10.2.2 or greater and using Webpack

  1. I will create a repo.

On Tue, Jun 22, 2021 at 1:07 PM Pierre de la Martinière < @.***> wrote:

Do you have a reproduction on a repo I could check?

Please also check the changelog for Next 11, future.webpack5 has been moved to the root of the config.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/martpie/next-transpile-modules/issues/220#issuecomment-865927082, or unsubscribe https://github.com/notifications/unsubscribe-auth/AASM67652TJK77MFNF5YWE3TUB4JHANCNFSM47CCPHHQ .

martpie commented 3 years ago

Did you see the compatibility table on the README file, and the changelog? Because I'm not exactly sure there's any issue here 😄

stubar commented 3 years ago

Yes I did check the compatibility table I tried next 11 with next-transpile-modules 8 and Next 10.2.2 with next-transpile-modules 7

stubar commented 3 years ago

Here is a demo repo https://github.com/stubar/next-transpile-modules-poc

aselcuk commented 2 years ago

"next": "^11.0.0" and "next-transpile-modules": "^8.0.0", is working on development mode but on vercel deploy getting error image

martpie commented 2 years ago

Can you show here your package.json?

aselcuk commented 2 years ago

common project

{
  "name": "@monorepo/common",
  "version": "1.0.0",
  "description": "Next.js based common project for monorepo",
  "author": "Ali SELÇUK",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.21.1",
    "bowser": "^2.11.0",
    "classnames": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.12.2",
    "rxjs": "^7.3.0"
  },
  "devDependencies": {
    "typescript": "^4.3.5"
  }
}

main project

{
  "name": "@monorepo/desktop",
  "version": "1.0.0",
  "description": "Next.js based desktop project",
  "author": "Ali SELÇUK",
  "license": "ISC",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {
    "@types/react": "^17.0.19",
    "babel-plugin-jsx-control-statements": "^4.1.0",
    "typescript": "^4.3.5"
  },
  "dependencies": {
    "@hookform/resolvers": "^2.8.0",
    "bowser": "^2.11.0",
    "classnames": "^2.3.1",
    "next": "^11.0.0",
    "next-compose-plugins": "^2.2.1",
    "next-transpile-modules": "^8.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.12.2",
    "rxjs": "^7.3.0",
    "sass": "^1.38.0",
    "yup": "^0.32.9"
  }
}

next.config.js

const withTM = require('next-transpile-modules')(['@monorepo/common']);

const withPlugins = require('next-compose-plugins');

// next.js configuration
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  }
};

module.exports = withPlugins([withTM], nextConfig);

everything it's okey on development but vercel deploy getting error

martpie commented 2 years ago

@aselcuk you don't have @monorepo/common in your main project dependencies, so it can't be resolved.

aselcuk commented 2 years ago

this project is a monorepo project and using npm(7) workspaces. Also development mode running perfect but vercel throwing an error, root package.json file below

{
  "name": "monorepo",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "private": true,
  "workspaces": [
    "common",
    "desktop",
    "mobile"
  ],
  "scripts": {
    "lint": "eslint ./**/*.{ts,tsx}",
    "lint:fix": "eslint --fix ./**/*.{ts,tsx}",
    "lint:staged": "lint-staged",
    "stylelint": "stylelint **/*.scss",
    "stylelint:fix": "stylelint **/*.scss --fix",
  },
  "lint-staged": {
    "*.{ts,tsx}": "npm run lint",
    "*.{css,scss}": "npm run stylelint"
  },
  "devDependencies": {
    "@svgr/cli": "^5.5.0",
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "eslint": "^7.32.0",
    "eslint-config-next": "^11.1.0",
    "eslint-plugin-import": "^2.24.1",
    "eslint-plugin-react": "^7.24.0",
    "lint-staged": "^11.1.2",
    "stylelint": "^13.13.1",
    "stylelint-config-standard": "^22.0.0"
  }
}
martpie commented 2 years ago

You always need to specify your dependencies directly for each of your workspace apps. Also,

You can see an example with yarn workspaces here, but npm workspaces work the same:

https://github.com/martpie/monorepo-typescript-next-the-sane-way/blob/7ad81395dcd826b8c9f45b6b722631c84715996d/website/package.json#L19

This is most likely a setup issue, not a next-transpile-modules issue.

aselcuk commented 2 years ago

I finally solved the problem, after upgrading the next.js and next-transpile-module versions in the project, there was a problem with deploy. After deleting the package.lock.json file and deploying again, the problem was fixed.

stubar commented 2 years ago

Any updates on this issue?

martpie commented 2 years ago

There has been some noise due to other users complaining about unrelated issues, I'll have a look at your reproduction just after I complete #235

martpie commented 2 years ago

@stubar Currently on it, can you provide a reproduction with a local package rather than a npm package?

I have just tested a yarn workspace setup and hot reload works correctly on local packages.

stubar commented 2 years ago

I'm not sure what you mean by local package. Do you mean with yarn link?

martpie commented 2 years ago

I am not sure to understand your issue. The recommended way to use ntm is to have a Workspace setup (yarn or npm workspaces).

yarn link is not officially supported as it's 99.95% of the time a bad practice and should be used for development/testing, not production. Some feature may work (transpilation), but some others may not (HMR).

If you need to see a setup with yarn workspaces, you can check the test folder of npm, or you can have a look at https://github.com/martpie/monorepo-typescript-next-the-sane-way

stubar commented 2 years ago

OK for the record I'm not using yarn link or any workspaces solution. Just a plain old private npm component library.