React и NextJS: сбой анализа модуля: неожиданный токен - PullRequest
Новая
       9

React и NextJS: сбой анализа модуля: неожиданный токен

0 голосов
/ 02 октября 2018

Для моего WebApp я использую React с NextJS.Для оптимальной загрузки графики я использую плагин NextJS next-optimized-images.Но этот плагин не работает правильно.

Например, я импортировал изображение, подобное этому: 

import logo from '../../static/app-logo.svg';

, и я пытаюсь использовать их в теге <image>, например: 

<img src={logo} height="24" width="115.5" alt="app-logo"></img>
//or so
<img src={require('../../static/app-logo.svg')} />

Я получаю сообщение об ошибке: 

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

Но, тем не менее, это работает: 

const setbgImage = {
    backgroundImage: `url('../../static/background.jpg')`
};

<section className="welcomePageWelcome" style={setbgImage}>

Мой next.config.js выглядит так: 

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

module.exports = withPlugins([
    [optimizedImages, {
      /* config for next-optimized-images */
    }],
    withCSS()
  ]);

Я уже написал разработчику, но, к сожалению, пока не получил ответа.Я надеюсь, что вы можете помочь мне в дальнейшем.

PS: я ранее использовал плагин next-images.Однако изображения с next-optimized-images загружаются намного быстрее.Так что я бы лучше использовал плагин.

1 Ответ

0 голосов
/ 16 октября 2018

Вы можете загрузить изображения, настроив nextJS.Внести следующие изменения в next.config.js 

const withCSS = require('@zeit/next-css');
const withSASS = require('@zeit/next-sass');
const withOptimizedImages = require('next-optimized-images');

module.exports = withOptimizedImages(withCSS(withSASS ({
       cssModules: true
})));
...