Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

You may need an additional loader to handle the result of these loaders. #13

Closed
burakkgunduzz opened this issue Mar 20, 2023 · 6 comments

Comments

@burakkgunduzz
Copy link

burakkgunduzz commented Mar 20, 2023

What version of this package are you using?
"next-translate-plugin": "^2.0.2"

What operating system, Node.js, and npm version?
v18.15.0

What happened?
after I upgraded next-translate and added next-translate-plugin my builds started to fail. Everything works correctly in development server but I am not able to build my app. I am using nx monorepo and all the stack trace and errors points to my lib folders interestingly. Everything was working before with next v12.1.5 and next-translate v1.4.0

What did you expect to happen?
It should of work.

Are you willing to submit a pull request to fix this bug?
No


**Stack Trace

File was processed with these loaders:
 * ../../node_modules/next-translate-plugin/lib/cjs/loader.js
You may need an additional loader to handle the result of these loaders.
| 
|   return (
>     <div className={cx([styles.embla, options.wrapperClass])}>
|       <div className={styles.embla__viewport} ref={viewportRef}>
|         <div className={styles.embla__container}>

Import trace for requested module:
../../libs/core/components/web/ImageSlider/index.js
../../libs/core/components/web/index.js

if I downgrade next version to 13.1.1 (from v13.2.4)then I get the below error

info  - Collecting page data .Error: You can not use getInitialProps with getStaticProps. To use SSG, please remove your getInitialProps
    at /Users/burakgunduz/Documents/development/work/fg-client/node_modules/next/dist/build/utils.js:913:19
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Span.traceAsyncFn (/Users/burakgunduz/Documents/development/work/fg-client/node_modules/next/dist/trace/trace.js:79:20)
info  - Collecting page data .
 >  NX   Failed to collect page data for /_error```
@aralroca
Copy link
Owner

Thanks to report it @burakkgunduzz, would you create a reproducible repo about this issue to take a look what is happening? Thanks a lot!

@burakkgunduzz
Copy link
Author

Hey @aralroca thanks for your attention! I will try to create in a day or two hopefully.

@burakkgunduzz
Copy link
Author

Hi @aralroca, I reproduced the error. You can clone this repo => https://github.com/burakkgunduzz/next-translate-with-libs if I module.exports = withNx(nextTranslate(nextConfig)); in next.config.js then both nx serve (development server) nx run build works correctly. However, if module.exports = nextTranslate(withNx(nextConfig)); serve and build fails with the error below. (Which is understandable, the order matters in next.config.js exports)

Failed to compile.

../../libs/burak/src/lib/burak.js
Module parse failed: Unexpected token (4:4)
File was processed with these loaders:
 * ../../node_modules/next-translate-plugin/lib/cjs/loader.js
You may need an additional loader to handle the result of these loaders.
| export function Burak(props) {
|   return (
>     <div className={styles['container']}>
|       <h1>Welcome to Burak!</h1>
|     </div>

Import trace for requested module:
../../libs/burak/src/lib/burak.js
../../libs/burak/src/index.js

On the other hand, I was not able to fix my problem in my original repo by swicthing the position of nextTranslate in next.config. It runs development server but still throws error when try to build. I am sharing my next.config.js below.

const nextTranslate = require('next-translate-plugin')
const { withSentryConfig } = require('@sentry/nextjs')
const withNx = require('@nrwl/next/plugins/with-nx')
const withPWA = require('next-pwa')({
  dest: process.env.VERCEL_ENV ? '../../public' : 'public',
  disable: process.env.NODE_ENV === 'development',
  register: true,
  skipWaiting: true
})

const localeSubpaths = {}

const nextConfig = nextTranslate(
  withPWA({
    webpack: (config, options) => {
      return config
    },
    sentry: {
      hideSourceMaps: true
    },
    publicRuntimeConfig: {
      localeSubpaths
    },
    images: {
      domains: [
        'example.com'
      ]
    },
    nx: {
      svgr: false
    }
  })
)

const sentryWebpackPluginOptions = {
  silent: process.env.VERCEL_ENV ? false : true,
  dryRun: process.env.VERCEL_ENV ? false : true,
  include: './dist/apps/example/.next'
}

module.exports = withSentryConfig(withNx(nextConfig), sentryWebpackPluginOptions)

@burakkgunduzz
Copy link
Author

burakkgunduzz commented Mar 21, 2023

PS: when I remove imports from lib in my example repo, everything works correctly again. Wondering, if it is related with libs and monorepo structure? Further investigating.

@burakkgunduzz
Copy link
Author

Seems like a breaking change in next.js and it affected nx. I am giving some links for further info. Please take a look and close this issue if you are sure that this bug is not related with next-translate-plugin. @aralroca
=> vercel/next.js#46374 (comment)
=> nrwl/nx#15214

@burakkgunduzz
Copy link
Author

I was able to successfully build my apps after upgrading to latest nx version and exporting my next.config as

module.exports = async (phase) => {
  let updatedConfig = plugins.reduce((acc, fn) => fn(acc), nextConfig);
  updatedConfig = await withNx(updatedConfig)(phase);
  updatedConfig = withSentryConfig(updatedConfig, sentryWebpackPluginOptions);
  return updatedConfig;
}

for further info nrwl/nx#15794
Also, I am closing this issue since this is not a problem related to next-translate-plugin

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants