Блог

Главная - Вопросы по программированию - Настройка следующего файла.config

Настройка следующего файла.config

#reactjs #next.js #semantic-ui-react

#reactjs #next.js #семантический-пользовательский интерфейс-реагировать

Вопрос:

Я использую Next.js и хочу добавить react-semantic-ui, чтобы использовать один из их компонентов для входа.

Во внешнем интерфейсе я получаю эту ошибку: Не удалось скомпилировать

 ./node_modules/semantic-ui-css/semantic.min.css
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)

Это компонент входа в систему:

 import React from 'react'
import { Button, Form, Grid, Header, Image, Message, Segment } from 'semantic-ui-react'

const Login = () => (
  /* login JSX markup */
)

export default Login

Это мой next.config.js

   module.exports = {
  webpack: (config, { dev }) => {
    config.module.rules.push(
      {
        test: /.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /.s[a|c]ss$/,
        loader: 'sass-loader!style-loader!css-loader'
      },
      {
        test: /.(png|svg|eot|otf|ttf|woff|woff2)$/,
        use: {
          loader: "url-loader",
          options: {
            limit: 100000,
            publicPath: "./",
            outputPath: "static/",
            name: "[name].[ext]"
          }
        }
      },
      {
        test: [/.eot$/, /.ttf$/, /.svg$/, /.woff$/, /.woff2$/],
        loader: require.resolve('file-loader'),
        options: {
          name: '/static/media/[name].[hash:8].[ext]'
        }
      }
    )
    return config
  }
}

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

Это мой package.js

   {
  "name": "create-next-example-app",
  "scripts": {
    "dev": "nodemon server/index.js",
    "build": "next build",
    "start": "NODE_ENV=production node server/index.js"
  },
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongoose": "^5.4.19",
    "morgan": "^1.9.1",
    "next": "^8.0.3",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.86.0"
  },
  "devDependencies": {
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.10",
    "sass-loader": "^7.1.0",
    "url-loader": "^1.1.2"
  }
}

Я где-то читал, что вы должны включить _document.js в каталог pages. 

 // _document is only rendered on the server side and not on the client side
// Event handlers like onClick can't be added to this file

// ./pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
            <link rel='stylesheet' 
                  href='//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css'
            />
        </Head>
        <body className="custom_class">
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Это действительно так сложно?

Обновить

Существует альтернативный способ заставить это работать. При запуске вашего следующего приложения вы получаете папку компонентов, которая включает в себя head.js и nav.js файл.

The head.js в конечном счете файл аналогичен <head></head> тегу в HTML . Или я должен сказать, что это то, для чего head.js компилируется. В любом случае, вы можете просто добавить это туда:

 <link
  rel="stylesheet"
  href="//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"
/>

и это сработает.

Но, как я уже сказал, вы все еще не можете импортировать модули следующим образом:

 import 'semantic-ui-css/semantic.min.css'

Комментарии:

1. Ваше приложение обычно компилируется с использованием CSS, в котором нет @import инструкций?

2. @NinoFiliu Он вообще не компилируется….

3. Ошибка может исходить из Webpack. Ознакомьтесь с этой статьей , в которой отлично объясняются загрузчики webpack — что это такое, зачем они нужны и как их использовать. В вашем случае ваша ошибка выглядит так, как будто Webpack обнаружил файл CSS, но у него не было необходимых загрузчиков конфигурации, чтобы «понять» его.

4. @NinoFiliu Спасибо, мой друг, я посмотрю. Бьюсь об заклад, где-то есть место, где вам нужно явно настроить Webpack.

Ответ №1:

На случай, если кто-то использует next-compose-plugins и получает вышеуказанную ошибку, вот исправление: 

 const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
const withPlugins = require('next-compose-plugins');

// fix: prevents error when .css files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.css'] = (file) => {};
}

const nextConfig = {
  target: 'server',
  webpack: (config, { dev }) => {
    config.module.rules.push({
      test: /.(raw)(?v=[0-9].[0-9].[0-9])?$/,
      use: 'raw-loader'
    });

    return config;
  }
};

module.exports = withPlugins([withImages, withCSS({target: 'serverless',
  webpack (config) {
    config.module.rules.push({
      test: /.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 8192,
          publicPath: '/_next/static/',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    })
    return config
  }})], nextConfig);

Ответ №2:

Похоже, мне пришлось сделать следующее, чтобы заставить это работать:

Меняю мой next.config.js файл на:

 const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  webpack: function (config) {
    config.module.rules.push({
      test: /.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]'
        }
      }
    })
    return config
  }
})

И выполнение npm i css-loader file-loader url-loader -D сделало свое дело.

Однако я озадачен тем, зачем css-loader file-loader нужны? Я привык к конфигурациям webpack, где вы явно добавляете загрузчики (как мы добавляем url-loader выше)… Мне не нужно было этого делать!