SyntaxError when importing 3rd party component (with CSS file) #267
Comments
|
any news on this ? |
|
The code is open-source, feel free to investigate issues yourself too. |
|
@mtree I think when on If you are on I had a similar issue recently when using |
|
I'm having the exact same issue, did anyone managed to overcome this? Thanks in advance! |
|
I found this? https://spectrum.chat/thread/ba3668b1-f0b1-42a6-9c71-d7d9d3b67f04?m=MTU0MDMxMjAyODUyMA== Put this somewhere near the top of your next.config.js to fix the issue: if (typeof require !== "undefined") {
require.extensions[".less"] = () => {};
require.extensions[".css"] = (file) => {};
} |
|
@mrcoles thanks for posting your solution! Can you help me here? Here is how my next.config.js look like and I still get the following error: |
|
@sakhmedbayev at the top of the file, not the top of your exports. For example, with the project I was doing, my full const withCSS = require("@zeit/next-css");
const withSass = require("@zeit/next-sass");
const withMDX = require("@zeit/next-mdx")();
// https://spectrum.chat/thread/ba3668b1-f0b1-42a6-9c71-d7d9d3b67f04
if (typeof require !== "undefined") {
require.extensions[".less"] = () => {};
require.extensions[".css"] = file => {};
}
const _cfg = (cfg, extra) => Object.assign(cfg || {}, extra);
const _css = cfg => withCSS(_cfg(cfg, {}));
const _sass = cfg => withSass(_cfg(cfg));
const _mdx = cfg =>
withMDX(
_cfg(cfg, {
webpack: (config, options) => {
config.module.rules.push({
test: /\.ya?ml$/,
use: "js-yaml-loader"
});
return config;
}
})
);
// combine uses reduce, so left to right fns are inner to outer wrapping
const _combine = fns => fns.reduce((result, fn) => fn(result), {});
module.exports = _combine([_mdx, _sass, _css]);I haven’t looked at this in a while, but I was also unhappy with how you have to wrap everything in a very nested way and tried setting up something with the const _combine = (fns, cfg) => fns.reduce((result, fn) => fn(result), cfg || {});
module.exports = _combine([_mdx, _sass, _css], {
webpack: (config, options) => {
config.module.rules.push({
test: /\.ya?ml$/,
use: "js-yaml-loader"
});
return config;
}
});You can ignore all this extra stuff and just move the relevant code to the top of our file outside of the export 😉 |
|
Thank you a lot, @mrcoles! It works great even with next.js with Typescript! |
|
@ngocketit @mrcoles solution with require only partially solves the problem, at least for me when using amplify it would load the components but not the styles. I've got it working eventually by matching the names of the classes. const withTypescript = require('@zeit/next-typescript')
const withOffline = require('next-offline')
const withCSS = require('@zeit/next-css');
const withPlugins = require('next-compose-plugins');
if (typeof require !== "undefined") {
require.extensions[".css"] = () => {};
}
module.exports = withPlugins([
[withCSS, {
cssModules: false, // setting to false to prevent any extra stuff added to the class name apart of localIdentName
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[name]__[local]___[hash:base64:5]", // this was taken from amplify ui webpack config
}
}],
[withTypescript],
[withOffline]
]); |
|
Hello! I ran into the a similar problem and was able to make it work by either using the solution from the spectrum thread, or adding Everything seems to work well locally in either dev or prod mode, however I would like to be able to export this to static HTML. When I try to export though, this happens: The minute I remove the component as a dependency, export works just fine .. I have tried all the things, nothing works. Any tips, please? |
|
Hi, thanks for creating an issue. We currently recommend using nextjs.org/docs/basic-features/built-in-css-support as the plugins have been deprecated in favor of the built-in support. |
I'm just trying some basic integration with AWS Amplify. I don't really need these styles so I consider ability to ignore them as a problem solver - but I haven't found any working solution yet... Error occurs when compiling for the client.
The text was updated successfully, but these errors were encountered: