Issue implementing Stylable with NextJS #1212
Comments
|
Sorry for the delay in responding and thanks for opening this issue. We've played around a bit with NextJS to see what can be done. In this case, NextJS comes pre-configured with multiple loaders that target CSS files (error-loader, ignore-loader, file-loader, css-loader) under different circumstances. Because loaders are resolved before plugins in webpack this means that unfortunately you cannot simply add one more exclude configuration for Stylable to work. I've opened a new issue (#1216) to add support for an additional file suffix (say, A more fragile solution that we have been able to get working in the meanwhile is to iterate over the entire configuration tree and insert exclusions for This solution seems to work, though we do see NextJS do all sorts of optimizations in the background. You can try running ahead with this, and let us know if you end up breaking on another issue down the line.
|
|
Thanks @tomrav - great to see progress being made towards integrating with NextJS. That being said, I tried adding your temp solution to next.config.js and got the following error (This was tested on a blank NextJS project as well) It's similar to the errors I was getting before. Is there anything else missing from your implementation? |
|
I was able to reproduce the latest error by adding At this point I'd say this is more of a NextJS issue, and less one where we are a contributing factor. We found a way of directly importing a stylable component from its In order to get this to work, you'll need to add our node require hook (
const StylableWebpackPlugin = require("@stylable/webpack-plugin");
const { attachHook } = require("@stylable/node");
attachHook();
module.exports = {
webpack: (config) => {
// Fixes npm packages that depend on `fs` module
config.node = {
fs: "empty",
};
safelyWalkJSON(config.module, insertStCssExclude(/\.st\.css$/));
config.plugins.push(
new StylableWebpackPlugin({
includeDynamicModulesInCSS: false,
})
);
return config;
},
};
function insertStCssExclude(stRegex) {
return (key, value) => {
if (value && value.test) {
if (value.test.toString().includes("css")) {
if (value.exclude && Array.isArray(value.exclude)) {
value.exclude.push(stRegex);
} else if (value.exclude instanceof RegExp) {
value.exclude = [value.exclude, stRegex];
} else if (typeof value.exclude === "function") {
value.exclude = [value.exclude, stRegex];
} else if (value.exclude) {
throw new Error("unknown exclude pattern: " + value.exclude);
} else {
value.exclude = [stRegex];
}
}
}
};
}
function safelyWalkJSON(obj, visitor, path = [], visited = new Set()) {
for (var key in obj) {
const currentPath = [...path, key];
if (visited.has(obj[key])) {
continue;
} else {
visited.add(obj[key]);
}
const res = visitor(key, obj[key], currentPath);
if (res === false) {
continue;
}
if (typeof obj[key] === "object") {
safelyWalkJSON(obj[key], visitor, currentPath, visited);
}
}
}
// server.js
const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
require("@stylable/node").attachHook();
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true);
handle(req, res, parsedUrl);
}).listen(3000, (err) => {
if (err) throw err;
console.log("> Ready on http://localhost:3000");
});
});If you've done all of these, the project should work in both development and production modes. |
|
Yeah, I mentioned this to the wsr guys last week - https://github.com/wix/wix-style-react/issues/5429#issuecomment-644871702 I tried your suggestion and got still the same error.
Correct me if I'm wrong, but I thought they had already upgraded to Stylable v3 - https://github.com/wix/wix-style-react/pull/5528#event-3428200197 |
|
They rolled back the upgrade in version |
|
The API for importing the webpack plugin was changed from a default import to a named one in the transition from v1 to v3. v1 import syntax: v3 import syntax: Edit: I've removed my first configuration example above as that one wasn't targeted at v1 and the one below it is more encompassing anyway. |
|
@McZenith Are you saying this worked for you? I had encountered the issue with StylableWebpackPlugin not being a constructor, but I was aware import syntax change, what I meant earlier was that the error continued being the same. This is a blank (brand new NextJS) project - I just added wsr and stylable, and tried importing a single component into the project. |
|
I went back and read your comment more carefully - I had missed this:
I reimported now and it's all good! Thanks so much. I'll play around with it a bit more and report back if I find anything else. |
|
Thanks again @tomrav - in wsr, some components still use .scss instead of Stylable. Take as an example adding the MarketingLayout component which includes some Layout-related components which still rely on scss - when adding those, we'd get: I took a look at the style.scss and seems like valid scss, What would be the approach here without breaking anything else? Normally, in NextJS I'd add the paths containing the scss files but that isn't working here. Adding a rule (overwriting the Built-in CSS support), I'm assuming wouldn't be the correct approach (and it didn't work anyway) Your guidance once again would be appreciated. |
|
I tried playing around with it a bit but haven't reached any good results. This isn't related to Stylable anymore and I don't have the same level of experience with sass and its toolset. The NextJS issue I mentioned above seems to be all about working with global css. It looks like they are aware of the issue and marked it for the next iteration. |
|
I'm closing this issue for now - if you encounter any more troubles getting Stylable to work please reopen this issue or submit a new one. |
|
Thanks Tom for your help! |
I've been trying to set up Stylable and wix-style-react within a NextJS project and have had no luck doing so. Based on the documentation it seems we'd only need the Stylable webpack plugin but still I'm encountering issues and hope you guys could help.
NextJS has its own webpack config and the way to pass additional rules or config is explained here: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config - nothing too out of the ordinary.
We just need to append rules or plugins to it. In this case, I append the stylable plugin with some config options, which I understand is the only build tool necessary to parse .st.css files (that is until a proper webpack loader is implemented which I saw as an experimental branch).
Here's my webpack config (or next.config.js as is known in a NextJS project)
if OutputCSS is not set then it seems like the .st.css file is not parsed and webpack complains about unexpected token in .root - if set to true, then I get the following error:
UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'outputAst' of undefinedIt's worth noting the way NextJS handles css. As explained here: https://nextjs.org/docs/basic-features/built-in-css-support and that out of the box NextJS server renders the app.
NextJS supports CSS modules for component level styling, any global styles must go under a file called _app.js. But with Stylable files, once it sees a .st.css files it believes is a global file as it ends in .css files. So even, if I add:
{ test: /\.css$/, exclude: /\st\.css$/, use: ['style-loader', 'css-loader'] }, I still get:Again, any help or direction you guys could provide would be greatly appreciated.
The text was updated successfully, but these errors were encountered: