Next-plugins: iam noob, i use like doc but wont work, help

[selique]

when i try use sass plugin:

./styles/style.scss Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js): ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)

[Timer]

Hey @selique, could you please post the contents of ./styles/style.scss? This will help us figure out what's going on.

[selique]

@Timer

[selique]

my package.json

[selique]

i need solid exemple for use

[Timer]

Could you please provide your Git repo for us to clone? It'd help diagnosing the issue way quicker.

[selique]

Could you please provide your Git repo for us to clone? It'd help diagnosing the issue way quicker.

https://github.com/selique/next-site-exemple

[pseudoramble]

I'm experiencing a similar issue as well. Unfortunately I don't have a repo to share right this moment, but some more specific details in my scenario:

package.json

"@zeit/next-css": "^1.0.1",
"next": "^8.0.0"

next.config.js

const withCSS = require('@zeit/next-css');
module.exports = withCSS();

I'm importing a CSS from an internal component lib stylesheet. It includes quite a bit of code.

Part of the error I'm seeing:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Is there any extra logging that can be flipped on to debug? I'm glad to try and dig up some more info. I'll also share if I figure out how to make it work.

[pseudoramble]

Sorry - I got ahead of myself adding the above comment. I found a fix here: https://github.com/zeit/next-plugins/issues/273. Basically it needs a workaround for font-loading and some images as well. It looks like it eventually might go into next-css. I'm not sure if this helps with next-sass though. Might be worth a check!

[selique]

i discovery the problem, its a loader fonts

i try solution with this short part

{ test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: "file-loader", options: { name: "[name].[ext]", outputPath: "fonts/" } } ] }

i modify my next.config.js to

`const path = require("path");
const withSass = require("@zeit/next-sass");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const nextConfig = withSass({
webpack(config, options) {
config.module.rules.push(
{
test: /.(raw)(\?v=[0-9].[0-9].[0-9])?$/,
use: "raw-loader"
},
{
test: /.(woff(2)?|ttf|eot|svg)(\?v=\d+.\d+.\d+)?$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "fonts/"
}
}
]
}
);
config.module.rules.push({
type: "javascript/auto",
test: /.modernizrrc(.json)?$/,
use: ["expose-loader?Modernizr", "modernizr-loader", "json-loader"]
});
config.resolve = {
alias: {
modernizr$: path.resolve(__dirname, ".modernizrrc.json")
}
};
if (config.mode === "production") {
if (Array.isArray(config.optimization.minimizer)) {
config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
}
}
return config;
}
});

nextConfig.exportPathMap = () => {
return {
"/": { page: "/" }
};
};

module.exports = nextConfig;
`

[selique]

do not worked fix this with modifications, but now i know origin of trouble, if u can help

[selique]

i found the solution for fix this

> config.module.rules.push({
>       test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
>       use: {
>         loader: "url-loader",
>         options: {
>           limit: 100000,
>           publicPath: "./",
>           outputPath: "static/",
>           name: "[name].[ext]"
>         }
>       }
>     });

[selique]

my final code:
next.config.js

const path = require("path");
const withSass = require("@zeit/next-sass");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const withFonts = require("next-fonts");

module.exports = withFonts({
  assetPrefix: "https://example.com",
  webpack(config, options) {
    return config;
  }
});
const nextConfig = withSass({
  webpack(config, options) {
    config.module.rules.push({
      test: /\.(raw)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      use: "raw-loader"
    });
    config.module.rules.push({
      type: "javascript/auto",
      test: /\.modernizrrc(\.json)?$/,
      use: ["expose-loader?Modernizr", "modernizr-loader", "json-loader"]
    });
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: "url-loader",
        options: {
          limit: 100000,
          publicPath: "./",
          outputPath: "static/",
          name: "[name].[ext]"
        }
      }
    });
    config.resolve = {
      alias: {
        modernizr$: path.resolve(__dirname, ".modernizrrc.json")
      }
    };
    if (config.mode === "production") {
      if (Array.isArray(config.optimization.minimizer)) {
        config.optimization.minimizer.push(new OptimizeCSSAssetsPlugin({}));
      }
    }
    return config;
  }
});

nextConfig.exportPathMap = () => {
  return {
    "/": { page: "/" }
  };
};

module.exports = nextConfig;