{"action":"closed","issue":{"url":"https://api.github.com/repos/seek-oss/treat/issues/48","repository_url":"https://api.github.com/repos/seek-oss/treat","labels_url":"https://api.github.com/repos/seek-oss/treat/issues/48/labels{/name}","comments_url":"https://api.github.com/repos/seek-oss/treat/issues/48/comments","events_url":"https://api.github.com/repos/seek-oss/treat/issues/48/events","html_url":"https://github.com/seek-oss/treat/issues/48","id":473796869,"node_id":"MDU6SXNzdWU0NzM3OTY4Njk=","number":48,"title":"File layout doesn't seem to play nice with Next.js","user":{"login":"wyattanderson","id":492216,"node_id":"MDQ6VXNlcjQ5MjIxNg==","avatar_url":"https://avatars3.githubusercontent.com/u/492216?v=4","gravatar_id":"","url":"https://api.github.com/users/wyattanderson","html_url":"https://github.com/wyattanderson","followers_url":"https://api.github.com/users/wyattanderson/followers","following_url":"https://api.github.com/users/wyattanderson/following{/other_user}","gists_url":"https://api.github.com/users/wyattanderson/gists{/gist_id}","starred_url":"https://api.github.com/users/wyattanderson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/wyattanderson/subscriptions","organizations_url":"https://api.github.com/users/wyattanderson/orgs","repos_url":"https://api.github.com/users/wyattanderson/repos","events_url":"https://api.github.com/users/wyattanderson/events{/privacy}","received_events_url":"https://api.github.com/users/wyattanderson/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2019-07-28T23:18:45Z","updated_at":"2019-07-28T23:56:21Z","closed_at":"2019-07-28T23:56:20Z","author_association":"NONE","body":"Howdy! First off, thanks for this project. So far, it's been a pleasure to use. Getting it set up with [Next.js](https://nextjs.org) was generally painless:\r\n\r\n```\r\nconst TreatPlugin = require('treat/webpack-plugin');\r\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\r\n\r\nmodule.exports = {\r\n  webpack: (config, {isServer}) => {\r\n    config.plugins.push(\r\n      new TreatPlugin({\r\n        outputLoaders: [MiniCssExtractPlugin.loader],\r\n        outputCSS: !isServer,\r\n      }),\r\n      new MiniCssExtractPlugin()\r\n    );\r\n\r\n    return config;\r\n  },\r\n};\r\n```\r\n\r\nI've run into a tricky situation though, where Next.js barfs when building the site for production due to its opinionated approach to file storage. In a simple Next.js app, you'd have `pages/index.js` as the index page for your application. The corresponding Treat file for this would be, presumably, `pages/index.treat.js`. This works fine in development, but when building for production (when Next.js tries to determine the layout of your application for routing or whatever), you run into this error:\r\n\r\n```\r\n> Build error occurred\r\nError: automatic static optimization failed: found page without a React Component as default export in\r\npages/index.treat\r\n\r\nSee https://err.sh/zeit/next.js/page-without-valid-component for more info.\r\n```\r\n\r\nBummer. Things I've tried to fix this:\r\n- `export default () = > null` in my `pages/index.treat.js` file to shut up the error: no dice, Treat complains (probably rightly) that I'm exporting a `function`.\r\n- Try to change the Next.js `pageExtensions` configuration option to somehow exclude `.treat.js` files: no dice, there's no Next.js configuration option for excluding files this way. Maybe there needs to be one. I don't think this would be a problem for corresponding `pages/index.css` or `pages/index.scss` files, though.\r\n- Save the treat file for `pages/index.js` in `styles/index.treat.js`. Works, but doesn't feel great having the treat files in a separate directory.\r\n- My current workaround: setting `TreatPlugin.test` to `/.treat.jsx$/`, setting Next.js's `pageExtensions` to `['js']`, and naming my treat files `.treat.jsx`. This works, but feels like a hacky workaround. It at least lets me keep my treat files in the same directory, though.\r\n\r\nAnywho, I'm not totally certain what the right fix is. I'm not super familiar with Next.js, nor am I extremely experienced with Treat so far, so I thought I'd raise the issue and see what thoughts folks had. My gut tells me that adding a configuration option to Next.js to ignore files matching a certain pattern might be the right approach."}}
{"actor":{"display_login":"wyattanderson"}}