search

asnowwolf / markup-inline-loader

a webpack loader to embed svg/MathML to html
25 stars 13 forks source link

Svg needs another loader, nothing is working with me. #12

Closed MuhammadSawalhy closed 3 years ago

MuhammadSawalhy commented 3 years ago

It seems that we need another loader for my SVG files, as I got this error. I have tries raw-loader and file-loader, without any SVG loader, nothing is working.

ERROR in   Error: Child compilation failed:
  Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process th  is file. See https://webpack.js.org/concepts#loaders
  > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="curre  ntColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polyg  on points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>
  ModuleParseError: Module parse failed: Unexpected token (1:0)
  You may need an appropriate loader to handle this file type, currently no loaders are configured to process th  is file. See https://webpack.js.org/concepts#loaders
  > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="curre  ntColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-filter"><polyg  on points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon></svg>

  - NormalModule.js:803 handleParseError
    [client]/[webpack]/lib/NormalModule.js:803:19

  - NormalModule.js:904 
    [client]/[webpack]/lib/NormalModule.js:904:5

  - NormalModule.js:639 processResult
    [client]/[webpack]/lib/NormalModule.js:639:11

  - NormalModule.js:691 
    [client]/[webpack]/lib/NormalModule.js:691:5

  - LoaderRunner.js:406 
    [client]/[loader-runner]/lib/LoaderRunner.js:406:3

  - LoaderRunner.js:232 iterateNormalLoaders
    [client]/[loader-runner]/lib/LoaderRunner.js:232:10

  - LoaderRunner.js:223 Array.<anonymous>
    [client]/[loader-runner]/lib/LoaderRunner.js:223:4

  - CachedInputFileSystem.js:27 runCallbacks
    [client]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15

  - CachedInputFileSystem.js:200 
    [client]/[enhanced-resolve]/lib/CachedInputFileSystem.js:200:4

  - graceful-fs.js:123 
    [client]/[graceful-fs]/graceful-fs.js:123:16

  - Module parse failed: Unexpected token (1:0)

  - 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

  - > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="cur    rentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><lin    e x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

  - ModuleParseError: Module parse failed: Unexpected token (1:0)

  - 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

  - > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="cur    rentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><lin    e x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>

  - NormalModule.js:803 handleParseError
    [client]/[webpack]/lib/NormalModule.js:803:19

  - NormalModule.js:904 
    [client]/[webpack]/lib/NormalModule.js:904:5

  - NormalModule.js:639 processResult
    [client]/[webpack]/lib/NormalModule.js:639:11

  - NormalModule.js:691 
    [client]/[webpack]/lib/NormalModule.js:691:5

  - LoaderRunner.js:406 
    [client]/[loader-runner]/lib/LoaderRunner.js:406:3

  - LoaderRunner.js:232 iterateNormalLoaders
    [client]/[loader-runner]/lib/LoaderRunner.js:232:10

  - LoaderRunner.js:223 Array.<anonymous>
    [client]/[loader-runner]/lib/LoaderRunner.js:223:4

  - CachedInputFileSystem.js:27 runCallbacks
    [client]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15

  - CachedInputFileSystem.js:200 
    [client]/[enhanced-resolve]/lib/CachedInputFileSystem.js:200:4

  - graceful-fs.js:123 
    [client]/[graceful-fs]/graceful-fs.js:123:16

  - Module parse failed: Unexpected token (1:0)

  - 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

  - > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="cur    rentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save"><pat    h d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7     13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>

  - ModuleParseError: Module parse failed: Unexpected token (1:0)

  - 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

  - > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="cur    rentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-save"><pat    h d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7     13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>

  - NormalModule.js:803 handleParseError
    [client]/[webpack]/lib/NormalModule.js:803:19

  - NormalModule.js:904 
    [client]/[webpack]/lib/NormalModule.js:904:5

  - NormalModule.js:639 processResult
    [client]/[webpack]/lib/NormalModule.js:639:11

  - NormalModule.js:691 
    [client]/[webpack]/lib/NormalModule.js:691:5

  - LoaderRunner.js:406 
    [client]/[loader-runner]/lib/LoaderRunner.js:406:3

  - LoaderRunner.js:232 iterateNormalLoaders
    [client]/[loader-runner]/lib/LoaderRunner.js:232:10

  - LoaderRunner.js:223 Array.<anonymous>
    [client]/[loader-runner]/lib/LoaderRunner.js:223:4

  - CachedInputFileSystem.js:27 runCallbacks
    [client]/[enhanced-resolve]/lib/CachedInputFileSystem.js:27:15

  - CachedInputFileSystem.js:200 
    [client]/[enhanced-resolve]/lib/CachedInputFileSystem.js:200:4

  - graceful-fs.js:123 
    [client]/[graceful-fs]/graceful-fs.js:123:16

  - Module parse failed: Unexpected token (1:0)

  - 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

  - > <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="cur    rentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

  - ModuleParseError: Module parse failed: Unexpected token (1:0)

  - 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

  - > <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="cur    rentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">    <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>

  - NormalModule.js:803 handleParseError
    [client]/[webpack]/lib/NormalModule.js:803:19

  - NormalModule.js:904 
    [client]/[webpack]/lib/NormalModule.js:904:5

  - NormalModule.js:639 processResult
    [client]/[webpack]/lib/NormalModule.js:639:11

4 ERRORS in child compilations
webpack 5.15.0 compiled with 5 errors in 3350 ms
ℹ ｢wdm｣: Failed to compile.

Here is my configuration webpack.common.js:


const path = require('path');
// minification will be set at webpack.prod.config;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    admin: './src/admin-page/js/index.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "admin.html",
      template: './src/admin-page/index.html',
      chunks: ['admin'],
    }),
  ],
  module: {
    rules: [
      {
        test: /\.html$/,
        use: [
          'html-loader',
          'markup-inline-loader?strict=[markup-inline]',
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader, //3. Extract css into files
          'css-loader', //2. Turns css into commonjs
          'sass-loader', //1. Turns sass into css
        ],
      },
      // {
      //   test: /\.(svg|png|jpg|gif)$/,
      //   use: {
      //     loader: 'file-loader',
      //     options: {
      //       name: '[name].[contenthash].[ext]',
      //       outputPath: 'assets',
      //     },
      //   },
      // },
    ],
  },
};

let htmlMinifyOption = {
  removeAttributeQuotes: true,
  collapseWhitespace: true,
  removeComments: true,
};

process.env.NODE_ENV === 'production' &&
  (exports.plugins[0].minify = htmlMinifyOption);
MuhammadSawalhy commented 3 years ago

Here is how I typed my <img>:

<img markup-inline src='../common-assets/icons/search.svg'></img>
asnowwolf commented 3 years ago

Here is how I typed my <img>:

<img markup-inline src='../common-assets/icons/search.svg'></img>

try to replace single quotes(') with double quotes(")

MuhammadSawalhy commented 3 years ago

try to replace single quotes(') with double quotes(")

It works, thank you.