Next.js 8 and RNW Transpilation Issues

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.

[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!

[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.