After updating NextJS and React - an unexpected error happened when trying to resolve

MichaelGorski commented 3 years ago

[x] I HAVE READ THE FAQ AND MY PROBLEM WAS NOT DESCRIBED THERE
[x] I WILL GIVE 10$ TO CHARITY IF MY SOLUTION WAS ACTUALLY IN THE README/FAQ

Are you trying to transpile a local package or an npm package? local package

Describe the bug After updating my package I can't resolve the paths in my project. I read the FAQ, went step by step and it is not working.

Expected behavior Resolve the custom paths when defining it.

Setup

Next.js version: "^10.1.3",
next-transpile-modules version: "next-transpile-modules": "^6.4.1",
Node.js version: v16.0.0
npm/yarn version: 7.11.1
Operating System: macOS Big Sur 11.2.3
Webpack 4 or 5: both not working

Additional context I started on stackoverflow a topic, couldn't get any answers. I deleted folders, installed it again, nothing is working.

Error: next-transpile-modules - an unexpected error happened when trying to resolve "common" Error: Can't resolve 'common' in '/Users/user/development/viboa-landingpage/packages/landing' at getPackageRootDirectory (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-transpile-modules/src/next-transpile-modules.js:136:15) at Array.map () at withTM (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-transpile-modules/src/next-transpile-modules.js:145:34) at /Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/compose.js:100:23 at Array.forEach () at composePlugins (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/compose.js:77:11) at /Users/user/development/viboa-landingpage/packages/landing/node_modules/next-compose-plugins/lib/index.js:22:38 at normalizeConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/next-server/server/config-shared.js:1:1558) at loadConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/next-server/server/config.js:8:158) at async NextServer.loadConfig (/Users/user/development/viboa-landingpage/packages/landing/node_modules/next/dist/server/next.js:1:2962)

my next.config.js

const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  'common',
  { debug: true }
]);
// const withOptimizedImages = require('next-optimized-images');
// const withFonts = require('next-fonts');
// const withVideos = require('next-videos');
const withImages = require('next-images');
const path = require('path');

const nextConfig = {
  future: {
    webpack5: true
  },
  webpack: (config, { isServer, webpack }) => {
    // Note: we provide webpack above so you should not `require` it
    // Perform customizations to webpack config

    config.plugins.push(new webpack.EnvironmentPlugin(process.env));

    config.optimization.minimize = false;

    config.module.rules.push(
      {
        test: /\.svg$/,
        issuer: {
          test: /\.(js|ts)x?$/
        },
        use: ['@svgr/webpack']
      },
      {
        test: /\.(webm|ogg|mp3|wav|mpe?g)$/i,
        exclude: config.exclude,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: config.inlineImageLimit,
              fallback: 'file-loader',
              publicPath: `${config.assetPrefix}/_next/static/images/`,
              outputPath: `${isServer ? '../' : ''}static/images/`,
              name: '[name]-[hash].[ext]',
              esModule: config.esModule || false
            }
          }
        ]
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // Options
                    }
                  ]
                ]
              }
            }
          }
        ]
      }
      // {
      //   test: /\.(mp4|webm|ogg|swf|ogv)$/,
      //   use: {
      //     loaders: [
      //       {
      //         test: /\.html$/,
      //         loader: 'html-loader?attrs[]=video:src'
      //       },
      //       {
      //         test: /\.mp4$/,
      //         loader: 'url?limit=10000&mimetype=video/mp4'
      //       }
      //     ]
      //   }
      // }
    );

    if (isServer) {
      config.externals = ['react', ...config.externals];
    }

    config.resolve.alias['react'] = path.resolve(
      __dirname,
      '.',
      'node_modules',
      'react'
    );
    // config.resolve.alias = {
    //   ...config.resolve.alias,
    //   // Will make webpack look for these modules in parent directories
    //   common: require.resolve('common')
    //   // reusecore: require.resolve('packages/reusecore')
    //   // ...
    // };

    // Important: return the modified config
    return config;
  }
};

my package.json

{
  "name": "viboa-landing-page",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "export": "next build && next export",
    "now-build": "next build && next export -o dist",
    "netlify-build": "next build && next export"
  },
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "@styled-system/theme-get": "^5.1.2",
    "core-js-pure": "^3.11.0",
    "firebase-admin": "^9.6.0",
    "firebase-functions": "^3.13.2",
    "lottie-web": "^5.7.8",
    "next": "^10.1.3",
    "next-compose-plugins": "^2.2.1",
    "next-fonts": "1.5.1",
    "next-images": "^1.7.0",
    "next-optimized-images": "^2.6.2",
    "next-transpile-modules": "^6.4.1",
    "postcss-flexbugs-fixes": "^5.0.2",
    "prop-types": "^15.7.2",
    "rc-progress": "^3.1.3",
    "rc-tabs": "11.7.3",
    "react": "^17.0.2",
    "react-accessible-accordion": "3.3.4",
    "react-anchor-link-smooth-scroll": "^1.0.12",
    "react-awesome-reveal": "3.7.1",
    "react-circular-progressbar": "^2.0.4",
    "react-content-loader": "^6.0.3",
    "react-countup": "^4.3.3",
    "react-dom": "^17.0.2",
    "react-icons-kit": "^1.3.1",
    "react-id-swiper": "^4.0.0",
    "react-image": "^4.0.3",
    "react-rnd": "^10.2.4",
    "react-scrollspy": "^3.4.3",
    "react-select": "^4.3.0",
    "react-stickynode": "3.0.5",
    "sass": "^1.32.11",
    "styled-components": "^5.2.3",
    "styled-system": "5.1.5",
    "swiper": "^6.5.8"
  },
  "devDependencies": {
    "@babel/plugin-proposal-do-expressions": "^7.12.13",
    "babel-plugin-styled-components": "^1.12.0",
    "file-loader": "^6.2.0",
    "html-loader": "^2.1.2",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-svgo": "^9.0.0",
    "next-videos": "^1.4.0",
    "postcss": "^8.1.7",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "url-loader": "^4.1.1"
  }
}

when removing the (["...."]) it is not crashing anymore but then I get errors like these:

error - ../common/src/components/Box/index.js Module parse failed: Unexpected token (14:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | const Box = ({ children, ...props }) => { > <BoxWrapper {...props}>{children}; | }; |

martpie commented 3 years ago

Please re-read the README/FAQ, the solution is there

martpie commented 3 years ago

Can you paste the package.json of common here?

MichaelGorski commented 3 years ago

common -> package.json

{ "name": "common", "version": "1.0.0", "private": true }

martpie commented 3 years ago

Yep, so the solution is in the README and the changelog ;)

Sorry for not giving away the answer here, but it's a good exercise to read readmes carefully :p

MichaelGorski commented 3 years ago

@martpie thanks for your reply. Still working on it... Yet I didn't figure it out what is wrong. I've read the readme since 2 days and tried any aspects of it. Any hits where I should watch more carefully?

martpie commented 3 years ago

Check the notes under the examples there: https://github.com/martpie/next-transpile-modules#examples

MichaelGorski commented 3 years ago

Well I looked at the examples and I tried before and added again main field in package.json, i commented out and just used withTM(....), still getting the same errors.. I try... X)

martpie commented 3 years ago

You main field need to target a specific module, it cannot be just a random string. Basically, require('common') needs to resolve to a real javascript module.

make sure common is in your app node_modules
make sure require('common') works and return a real module

martpie commented 3 years ago

by the way, there is a note about Lerna in case you haven't seen it.

MichaelGorski commented 3 years ago

@martpie Thanks for that! But still I face issues and I was already at that peak where I see and have the common folder in my node_modules. But still I get tons of errors like I don't have any loaders for image files or tons of other failures. I mean everything worked before but now nothing is working.

viboa-landing-page: Module parse failed: Unexpected character '�' (1:0)
viboa-landing-page: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
viboa-landing-page: (Source code omitted for this binary file)
viboa-landing-page: Error: Cannot find module '/Users/user/development/viboa-landingpage/packages/landing/.next/server/pages-manifest.json'
viboa-landing-page: Require stack:
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/api-utils.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/server/next.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/server/lib/start-server.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/cli/next-dev.js
viboa-landing-page: - /Users/user/development/viboa-landingpage/node_modules/next/dist/bin/next
viboa-landing-page:     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
viboa-landing-page:     at Function.mod._resolveFilename (/Users/user/development/viboa-landingpage/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
viboa-landing-page:     at Function.Module._load (node:internal/modules/cjs/loader:773:27)
viboa-landing-page:     at Module.require (node:internal/modules/cjs/loader:1012:19)
viboa-landing-page:     at require (node:internal/modules/cjs/helpers:93:18)
viboa-landing-page:     at getPagePath (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js:1:657)
viboa-landing-page:     at requirePage (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js:1:1062)
viboa-landing-page:     at loadComponents (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js:1:795)
viboa-landing-page:     at DevServer.findPageComponents (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:77:296)
viboa-landing-page:     at DevServer.renderErrorToHTML (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:139:209)
viboa-landing-page:     at DevServer.renderErrorToHTML (/Users/user/development/viboa-landingpage/node_modules/next/dist/server/next-dev-server.js:35:1147)
viboa-landing-page:     at runMicrotasks (<anonymous>)
viboa-landing-page:     at processTicksAndRejections (node:internal/process/task_queues:96:5)
viboa-landing-page:     at async DevServer.render (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:75:236)
viboa-landing-page:     at async Object.fn (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:59:580)
viboa-landing-page:     at async Router.execute (/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/router.js:25:67) {
viboa-landing-page:   code: 'MODULE_NOT_FOUND',
viboa-landing-page:   requireStack: [
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/api-utils.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/server/next.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/server/lib/start-server.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/cli/next-dev.js',
viboa-landing-page:     '/Users/user/development/viboa-landingpage/node_modules/next/dist/bin/next'
viboa-landing-page:   ]
viboa-landing-page: }

Anyway. Thanks for your help and feedback! I have to figure it out. Its still confusing.

martpie commented 3 years ago

Can you post a debug log? (CF. readme)

martpie commented 3 years ago

The easiest thing for me is if you could share a reproduction of the bug, otherwise, I cannot really act on anything ;)

MichaelGorski commented 3 years ago

you mean to set the debug flag to true and post?

> viboa-landing-page@1.0.0 dev
> NODE_OPTIONS='--inspect' next

Debugger listening on ws://127.0.0.1:9229/7247c457-9fb0-46be-a082-bdf8bdbee489
For help, see: https://nodejs.org/en/docs/inspector
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
next-transpile-modules - the following paths will get transpiled:
  - /Users/michaelgorski/development/viboa-landingpage/packages/landing
next-transpile-modules - the following paths will get transpiled:
  - /Users/michaelgorski/development/viboa-landingpage/packages/landing
(node:3840) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/michaelgorski/development/viboa-landingpage/node_modules/next/node_modules/postcss/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/_app.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/_document.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/_app.js
info  - Using external babel configuration from /Users/michaelgorski/development/viboa-landingpage/packages/landing/babel.config.js
error - /Users/michaelgorski/development/viboa-landingpage/node_modules/common/src/assets/image/favicon.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
next-transpile-modules - the following paths will get transpiled:
  - /Users/michaelgorski/development/viboa-landingpage/packages/landing
event - build page: /
wait  - compiling...
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Navbar/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Banner/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/AppSlider/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Features/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Dashboard/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/ProductSlide/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/DesignedAndBuilt/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/PricingPolicy/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/TeamPortfoilo/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Testimonial/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Newsletter/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Footer/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Banner/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Navbar/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/AppSlider/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Features/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Dashboard/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/ProductSlide/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/DesignedAndBuilt/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/TeamPortfoilo/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Testimonial/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/PricingPolicy/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Newsletter/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Footer/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Newsletter/newsletter.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Newsletter/newsletter.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/AppSlider/appSlider.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/AppSlider/appSlider.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Banner/banner.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Features/features.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/DesignedAndBuilt/designedAndBuilt.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/ProductSlide/productSlide.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Navbar/navbar.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/TeamPortfoilo/teamPortfolio.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Testimonial/testimonial.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Dashboard/dashboard.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/PricingPolicy/pricingPolicy.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Footer/footer.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/AppSlider/appSlider.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/AppSlider/appSlider.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/TeamPortfoilo/teamPortfolio.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Features/features.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/DesignedAndBuilt/designedAndBuilt.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Newsletter/newsletter.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Newsletter/newsletter.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Banner/banner.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Footer/footer.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/PricingPolicy/pricingPolicy.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/appModern.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/ProductSlide/productSlide.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Testimonial/testimonial.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Dashboard/dashboard.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/AppModern/Navbar/navbar.style.js
error - /Users/michaelgorski/development/viboa-landingpage/node_modules/common/src/assets/image/appModern/video-2.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
event - build page: /_error
wait  - compiling...
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/_error.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/pages/_error.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/Error/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/Error/index.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/Error/error.style.js
next-transpile-modules - transpiled: /Users/michaelgorski/development/viboa-landingpage/packages/landing/containers/Error/error.style.js
error - /Users/michaelgorski/development/viboa-landingpage/node_modules/common/src/assets/image/appModern/banner2.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
Error: Cannot find module '/Users/michaelgorski/development/viboa-landingpage/packages/landing/.next/server/pages-manifest.json'
Require stack:
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/api-utils.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/lib/start-server.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/cli/next-dev.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.mod._resolveFilename (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Function.Module._load (node:internal/modules/cjs/loader:773:27)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at getPagePath (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js:1:657)
    at requirePage (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js:1:1062)
    at loadComponents (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js:1:795)
    at DevServer.findPageComponents (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:77:296)
    at DevServer.renderErrorToHTML (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:139:209)
    at DevServer.renderErrorToHTML (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next-dev-server.js:35:1147)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async DevServer.renderToHTML (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:138:1281)
    at async DevServer.renderToHTML (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next-dev-server.js:35:578)
    at async DevServer.render (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:75:236) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/lib/start-server.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/cli/next-dev.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/bin/next'
  ]
}
Error: Cannot find module '/Users/michaelgorski/development/viboa-landingpage/packages/landing/.next/server/pages-manifest.json'
Require stack:
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/api-utils.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/lib/start-server.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/cli/next-dev.js
- /Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:940:15)
    at Function.mod._resolveFilename (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Function.Module._load (node:internal/modules/cjs/loader:773:27)
    at Module.require (node:internal/modules/cjs/loader:1012:19)
    at require (node:internal/modules/cjs/helpers:93:18)
    at getPagePath (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js:1:657)
    at requirePage (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js:1:1062)
    at loadComponents (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js:1:795)
    at DevServer.findPageComponents (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:77:296)
    at DevServer.renderErrorToHTML (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:139:209)
    at DevServer.renderErrorToHTML (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next-dev-server.js:35:1147)
    at async DevServer.render (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:75:236)
    at async Object.fn (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:59:580)
    at async Router.execute (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/router.js:25:67)
    at async DevServer.run (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:69:1042)
    at async DevServer.handleRequest (/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js:34:504) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/require.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/next.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/server/lib/start-server.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/cli/next-dev.js',
    '/Users/michaelgorski/development/viboa-landingpage/node_modules/next/dist/bin/next'
  ]
}
error - /Users/michaelgorski/development/viboa-landingpage/node_modules/common/src/assets/image/favicon.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

MichaelGorski commented 3 years ago

I will make a repository and I will share it. I need some time.

martpie commented 3 years ago

https://github.com/MichaelGorski/website-testing/blob/d5082e74204596a8446f9c8c207af234c88ccb2a/packages/common/package.json#L9

You are targeting a file that is outside of your package. Please target a module that is inside your package. Otherwise ntm cannot know which path to transpile

martpie commented 3 years ago

I got the hint when looking at the logs:"

next-transpile-modules - the following paths will get transpiled:
  - /Users/michaelgorski/development/viboa-landingpage/packages/landing

It should tell you instead:

next-transpile-modules - the following paths will get transpiled:
  - /Users/michaelgorski/development/viboa-landingpage/packages/landing/node_modules/common

Also, I think you are using for the wrong reasons and I encourage you to switch to npm/yarn workspaces. (cf. https://github.com/martpie/next-transpile-modules#i-have-trouble-making-it-work-with-lerna)

MichaelGorski commented 3 years ago

thank for that reply. So I guess I remove the lerna structure etc. and keep it simple? By the way, do you have paypal? I mean I can sponsor you some coffee since for the help. Is it better via here on github or paypal?

martpie commented 3 years ago

So my suggestion would be to do the following:

remove lerna
create a package.json at the root with the following content:

{
  "private": true,
  "workspaces": ["packages/*"]
}

my personal preference is to not have a package folder and to place all your apps/package at the root, but that's a preference:

{
  "private": true,
  "workspaces": ["common", "functions", "landing"]
}

make sure common and functions have a main module within their codebase, it can even be an empty index.js at the root (for example: common/index.js, with an empty module.exports)
run yarn install in the root folder -> it will install the dependencies for all your projects/packages

It should work afterwards

martpie commented 3 years ago

If you want to see an example, you can clone this repo, run yarn && yarn run setup, and go to src/__tests__/__apps__/yarn-workspaces/, and you will see an example app of Yarn workspaces

martpie commented 3 years ago

Or you can see an example here: https://github.com/vercel/next.js/tree/canary/examples/with-yarn-workspaces

MichaelGorski commented 3 years ago

Thanks a lot. looks like I will revamp the project and build it from scratch new :)!

martpie commented 3 years ago

There is a lot of misconceptions about monorepos and Next.js, I really need to update this repo https://github.com/martpie/monorepo-typescript-next-the-sane-way 😬

But once it's rolling, it's a joy to use!

MichaelGorski commented 3 years ago

sure it is :D still have to learn and figure it out. Its a process and I am really thankful you helped me! In case you didn't see, I donated you some coffee via GitHub! 😄 ☕

martpie commented 3 years ago

Thank you very much \o/

martpie / next-transpile-modules

After updating NextJS and React - an unexpected error happened when trying to resolve #194