Can't Build Next v9 With Non-React Components

[DovahBrownies]

Bug report

Describe the bug

After upgrading from v8.9 to v9, Next will refuse to build my project because of the presence of non-react components. There doesn't seem to be a setting I can add in next's config to get around this, forcing me to completely destructure my pages. Isn't there a way to disabled automatic static optimization?
Spectrum question here.

Error:

> Build error occurred
Error: automatic static optimization failed: found pages without a React Component as default export in

proceeded by the list of all the files that aren't react components (AKA the style and test files).

To Reproduce

I have setup a file structure as such:

/pages
└── /MyPage
    └── index.js // Standard React exported page
    └── styles.js // EmotionJS styling for this specific page
    └── MyPage.test.js // Jest test file

Simply run next build or yarn build

Expected behavior

To build normally, like in Next v8.

[timneutkens]

This is not a bug and expected behavior. In Next.js 8 it would actually build and expose MyPage.test.js and styles.js as pages, which slow down builds and are accessible publicly.

The main constraint of Next.js is that pages are pages.

[zxiest]

Hello @timneutkens ; so there's no workaround to this? ie: Next not exposing these files?

[timneutkens]

@zxiest this has been discussed many times in different GitHub issues. You shouldn't put components into pages as it:

• Slows down builds, as every file is a page
• Exposes the files publicly
• Affects code splitting in a negative way

Most recent discussion is here #4315 (comment)

[zxiest]

Thanks for the link. We shall restructure accordingly.

[zxiest]

Rethinking this, would it not be possible to add an ignorePattern (different name of course) by which Next can ignore *.test.js or *.style.js ?

This should not harm build speeds, not expose the files publicly (obviously this needs to be supported), and not harm code splitting.

It's very annoying having to separate the files in many directories and looking for them every time you need to do an edit. I am a big fan of convention over configuration coming from the Rails world but have noticed it's much more efficient to keep component assets in the same directory.

[timneutkens]

This has been discussed many times before as said and that still introduces security issues etc.

You can keep pages only to expose routes though and then keep a separate directory with a structure that you want.

[zxiest]

Thank you for taking the time to respond =)

This is what we have ended up doing. We're following this structure outside the /pages directory and using /pages for the aforementioned purpose only.

[istarkov]

But what to do with relay generated files placed under __generated__ subfolder? Having that we use queries at pages level?

[istarkov]

And yes relay-compiler allow to use one folder for this files, but we have hundreds of such. Not easy to import, find etc. So using __generated__ subfolder is the main and possibly only option for us. Ive read links above and don't understand how ignored!!! files can somehow affect anything?

[istarkov]

For now I excluded __generated__ files using webpack config option

    webpack: (config /* : any */) => {
      const originalEntry = config.entry;
      config.entry = async () => {
        const entries = await originalEntry();

        const keys = Object.keys(entries);
        keys.forEach(key => {
          if (key.includes('/__generated__/')) {
            delete entries[key];
          }
        });

        return entries;
      };

      return config;
    },
  })

So can be used as a solution