Next.js 8 and RNW Transpilation Issues

[dcalhoun]

Bug report

Describe the bug

TL;DR: I need to transpile ESM source with Next.js, but I am unable to get it working with Next.js 8

I am attempting to transpile react-native-web source inside of my Next.js project. I succeeded at doing this in the past (see older Next.js RNW example). With Next.js 8, transpiling is no longer working. Note, the current Next.js + RNW example circumvents this issue by not transpiling at all (i.e. it relies on the CJS modules, not the ESM).

I have a test case that includes individual commits for attempted usage of custom webpack config, usage of next-transpile-modules, and usage of babel config only.

For the first two approaches (webpack and next-transpile-modules), the compilation fails with the following error:

Click to view error details

TypeError: (0 , _compile.classic) is not a function
    at /Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:8788:45
    at Array.forEach (<anonymous>)
    at Object.createCSS (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:8786:33)
    at Object.create (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:8899:35)
    at Object../node_modules/react-native-web/dist/cjs/modules/createDOMProps/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:17329:28)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Object../node_modules/react-native-web/dist/cjs/exports/createElement/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:14409:46)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Object../node_modules/react-native-web/dist/cjs/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:14708:45)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:32163:70)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Object.3 (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:32206:18)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at /Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:91:18
    at Object.<anonymous> (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:94:10)
TypeError: (0 , _compile.classic) is not a function
    at /Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:8788:45
    at Array.forEach (<anonymous>)
    at Object.createCSS (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:8786:33)
    at Object.create (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:8899:35)
    at Object../node_modules/react-native-web/dist/cjs/modules/createDOMProps/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:17329:28)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Object../node_modules/react-native-web/dist/cjs/exports/createElement/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:14409:46)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Object../node_modules/react-native-web/dist/cjs/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:14708:45)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Module../pages/index.js (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:32163:70)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at Object.3 (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:32206:18)
    at __webpack_require__ (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:23:31)
    at /Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:91:18
    at Object.<anonymous> (/Users/davidcalhoun/Sites/oss/nextjs-rnw-transpile/.next/server/static/development/pages/index.js:94:10)

For the babel-only attempt, compilation succeeds, but it is loading the CJS modules, not the ESM (i.e. it is not transpiling and merely using the already transpiled RNW source, RNW provides both).

At this point, I have been unable to determine what has changed in Next.js that is causing these issues. So, my questions are:

1. What changed in Next.js that would impact webpack config/next-transpile-modules?
2. I noticed changes to webpack externals, how does that potentially impact my goal?

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Clone and run the test case.
2. Visit the app server in the browser.

Expected behavior

The Next.js app successfully compiles react-native-web source.

System information

• OS: macOS 10.14.4
• Browser: n/a
• Version of Next.js: 8.1.0

Additional context

This was originally reported in the Spectrum community. I posted here as well due to lack of feedback and the potential that it is in fact a bug with Next.

[Aleksion]

@dcalhoun ant update on this? I have a fully working NextJS 9 repo with RNW etc. But I'm pretty sure it includes ALL of RNW meaning the bundle is... massive

[dcalhoun]

@Aleksion unfortunately, no, I have not made progress on this. My app is currently frozen on Next.js 7.x for now.

[flybayer]

@dcalhoun @Aleksion I'm able to compile and run your test RNW project by adding babel-plugin-react-native-web.

I opened a PR with the changes: https://github.com/dcalhoun/nextjs-rnw-transpile/pull/1/files

However, I'm not sure if the end result is exactly what you're looking for, but it definitely compiles and runs.

[flybayer]

I made a PR to add babel-plugin-react-native-web to solve another issue, but like I said in my previous comment I think it solves this issue too.

#9078

Please confirm.

[dcalhoun]

@flybayer thanks for the information. I don't have time to confirm the results currently, but I will report back my findings eventually. Hopefully I have time to review later this week.

[dcalhoun]

Thanks to @flybayer, I was able to resolve my issue. I don't fully understand what is happening deep down in the compilation, but including babel-plugin-react-native-web in the project's babel.config.js does resolve this issue.

I did notice one difference between the approach in this PR vs the current Next.js RNW example project. The former uses ESM for both the server and client. The latter uses CJS for the server and ESM for the client. I'm not sure if there is a downside to relying on CJS for the server, it may be fine. For my specific project, I at least need RNW's ESM for the client.

Thanks again to @flybayer for the help!

[timneutkens]

I don't believe we should close this if it's not clear what is causing the exact issue and the solution doesn't seem correct to me still. You're probably opting out of tree shaking this way for example.

[dcalhoun]

@timneutkens fair enough. I looked again at this and have discovered that upgrading Next to the latest (e.g. 9.x.x) has now addressed my original issue (i.e. the addition of babel-plugin-react-native-web is not required). I have not researched heavily enough to know where the fix was introduced in Next's version history, but my original issue is now resolved without requiring changes. Something between 8.x.x and 9.x.x changed and resolved this.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.