«Неверный или неожиданный токен» в Node Express SSR импорта изображений - PullRequest
Новая
       34

«Неверный или неожиданный токен» в Node Express SSR импорта изображений

0 голосов
/ 15 сентября 2018

Я использую url-loader как часть процесса сборки моего веб-пакета, и он правильно перемещает файлы изображений (или создает строки Base64 DataURL) для любых файлов изображений, которые я import храню в моих JS-файлах, например: 

import appleTouchIcon from '../../static/images/apple-touch-icon.png';

Однако при рендеринге на стороне сервера в NodeJS (с Express) я вижу следующую ошибку: 

/Users/jfender/Workspace/generetic/static/images/apple-touch-icon.png:1
(function (exports, require, module, __filename, __dirname) { �PNG
                                                              ^

SyntaxError: Invalid or unexpected token
    at createScript (vm.js:74:10)
    at Object.runInThisContext (vm.js:116:10)
    at Module._compile (module.js:533:28)
    at Module._extensions..js (module.js:580:10)
    at Object.newLoader [as .js] (/Users/jfender/Workspace/generetic/node_modules/pirates/lib/index.js:88:7)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)

Это моя конфигурация веб-пакета: 

module.exports = {
  entry: './applications/responsive/browser.js',
  output: {
    path: path.resolve(__dirname, 'static'),
    publicPath: config.get('app.assetPath'),
    filename: path.join('generated', `${appName}-responsive.js`),
    chunkFilename: path.join(
      'generated',
      'chunks',
      `${appName}-[name]-${packageJson.version}.js`
    ),
  },
  devtool: 'inline-source-map',
  plugins: [
    new CleanWebpackPlugin(['static/generated']),
    new MiniCssExtractPlugin({
      filename: path.join('generated', `generetic.css`),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.(woff|ttf|svg)$/,
        exclude: [/images/],
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'generated/fonts/',
            },
          },
        ],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        exclude: [/fonts/],
        use: [
          {
            loader: 'url-loader?emitFile=false',
            options: {
              limit: 8192,
              outputPath: 'generated/images/',
            },
          },
          'image-webpack-loader',
        ],
      },
    ],
  },
};
...