Issues with paths when attempting to use `all.min.css` with NextJS

dextermb commented 6 years ago

Describe the problem

When attempting to load in CSS the way shown in the next-css example errors are thrown. They seem to be down to paths?

Errors

These are not all the errors as some seem to be repeated.

Initial error

 ERROR  Failed to compile with 21 errors                                             9:15:20 AM

 error  in ./node_modules/@fortawesome/fontawesome-pro/css/all.min.css

Module build failed: 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)
    at doBuild.e (/Users/dexter/Documents/projects/mx5.trade/web/node_modules/webpack/lib/Norma
lModule.js:303:19)
    at runLoaders (/Users/dexter/Documents/projects/mx5.trade/web/node_modules/webpack/lib/Norm
alModule.js:209:11)
    at /Users/dexter/Documents/projects/mx5.trade/web/node_modules/loader-runner/lib/LoaderRunn
er.js:370:3
    at iterateNormalLoaders (/Users/dexter/Documents/projects/mx5.trade/web/node_modules/loader
-runner/lib/LoaderRunner.js:211:10)
    at /Users/dexter/Documents/projects/mx5.trade/web/node_modules/loader-runner/lib/LoaderRunn
er.js:202:4
    at /Users/dexter/Documents/projects/mx5.trade/web/node_modules/enhanced-resolve/lib/CachedI
nputFileSystem.js:70:14
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

Font path error

This seems to happen for multiple fonts

 error  in ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-brands-400.ttf

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)

 @ ./node_modules/@fortawesome/fontawesome-pro/css/all.min.css 7:63679-63719
 @ ./pages/_app.jsx
 @ multi ./pages/_app.jsx

SVG path error

This seems to happen for multiple SVGs

 error  in ./node_modules/@fortawesome/fontawesome-pro/webfonts/fa-light-300.svg

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg">

 @ ./node_modules/@fortawesome/fontawesome-pro/css/all.min.css 7:64384-64423
 @ ./pages/_app.jsx
 @ multi ./pages/_app.jsx

What did you expect?

I'd expect to be able to import the CSS without having any issues. I am using the CSS library and React as I wanted to write my own wrapper for the icons; is there a way to import ALL icons from the Pro package into react-fontawesome?

What version and implementation are you using?

Version: ^5.2.0

[ ] SVG with JS
[x] Web Fonts with CSS
[ ] SVG Sprites
[ ] On the Desktop

Bug report checklist

[x] I have filled out as much of the above information as I can
[ ] I have included a test case because my odds go way up that the team can fix this when I do
[x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

tagliala commented 6 years ago

Hi!

Thanks for being part of the Font Awesome Community.

Could you please open this issue in the Font Awesome Pro repo at https://github.com/FortAwesome/Font-Awesome-Pro?

If you don't have access to the above repository, please make sure you have linked your Font Awesome Account to your GitHub account at https://fontawesome.com/account/services

dextermb commented 6 years ago

@tagliala Can do!

nogamenofun98 commented 3 years ago

i got similar issue when run npm run deploy and the command stop when processing all.min.css

[publish]
[publish] ERROR in ./node_modules/@fortawesome/fontawesome-free/css/all.min.css
[publish] Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
[publish] ModuleParseError: Module parse failed: Unexpected character '' (1:4)
[publish] You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
[publish] (Source code omitted for this binary file)
[publish]     at handleParseError (D:\WebstormProjects\customer-frontend-flareact\node_modules\webpack\lib\NormalModule.js:469:19)
[publish]     at D:\WebstormProjects\customer-frontend-flareact\node_modules\webpack\lib\NormalModule.js:503:5
[publish]     at D:\WebstormProjects\customer-frontend-flareact\node_modules\webpack\lib\NormalModule.js:358:12
[publish]     at D:\WebstormProjects\customer-frontend-flareact\node_modules\loader-runner\lib\LoaderRunner.js:373:3
[publish]     at iterateNormalLoaders (D:\WebstormProjects\customer-frontend-flareact\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
[publish]     at Array.<anonymous> (D:\WebstormProjects\customer-frontend-flareact\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
[publish]     at Storage.finished (D:\WebstormProjects\customer-frontend-flareact\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
[publish]     at D:\WebstormProjects\customer-frontend-flareact\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
[publish]     at D:\WebstormProjects\customer-frontend-flareact\node_modules\graceful-fs\graceful-fs.js:123:16
[publish]     at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:63:3)
[publish] webpack --config node_modules/flareact/configs/webpack.client.config.js --out ./out --mode production && wrangler publish exited with code 2
[
  {
    command: {
      command: 'webpack --config node_modules/flareact/configs/webpack.client.config.js --out ./out --mode production && wrangler publish',
      name: 'publish',
      prefixColor: '',
      env: [Object]
    },
    index: 0,
    exitCode: 2
  }
]

i installed postcss and postcss-loader, but it still failed to deploy.

Below is my flareact.config.js

module.exports = {
    webpack: (config, options) => {
        config.module.rules.push(
            {
                test: /\.(svg)$/,
                use: [
                    { loader: "file-loader", options: {} },
                    { loader: "svg-url-loader", options: {} },
                ],
            },
            {
                test: /\.(ttf|eot|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                use: [
                    { loader: "file-loader", options: {} },
                    {
                        loader: "url-loader",
                        options: {
                            limit: 10000,
                        },
                    },
                ],
            }
        );
        config.node = {
            fs: "empty",
        };

        return config;
    },
};

tagliala commented 3 years ago

Hi @nogamenofun98

Please open a new issue by filling out a bug report template

Please also provide a reproducible reduced test case, that will help in debugging. Please reduce the number of dependencies and third-party script/stylesheets to the minimum possible

FortAwesome / Font-Awesome