試したこと

・ node_modules を再インストール
・ https://qiita.com/tomipetit/items/412efdb51d02db1eb1bb を参考に、webpackでsnap.svgを利用する場合の記述法を真似た。
・公式サイト( http://snapsvg.io/start/ )のチュートリアルを途中まで進めた。(もちろんコンパイルができず動作確認自体できず)

エラー内容

ERROR in ./node_modules/snapsvg/dist/snap.svg.js
Module build failed (from ./node_modules/imports-loader/dist/cjs.js):
ValidationError: Invalid options object. Imports Loader has been initialized using an options object that does not match the API schema.
 - options should be one of these:
   object { imports, … } | object { wrapper, … } | object { additionalCode, … }
   Details:
    * options has an unknown property 'this'. These properties are valid:
      object { imports, … } | object { wrapper, … } | object { additionalCode, … }
    * options has an unknown property 'fix'. These properties are valid:
      object { imports, … } | object { wrapper, … } | object { additionalCode, … }
    * options misses the property 'imports' | should be any non-object.
    * options misses the property 'wrapper' | should be any non-object.
    * options misses the property 'additionalCode' | should be any non-object.
    at validate (/Users/hoge/pug-webpack/node_modules/webpack/node_modules/schema-utils/dist/validate.js:104:11)
    at Object.getOptions (/Users/hoge/pug-webpack/node_modules/webpack/lib/NormalModule.js:502:19)
    at Object.loader (/Users/hoge/pug-webpack/node_modules/imports-loader/dist/index.js:23:24)
 @ ./src/js/main.js 2:0-27 6:12-16

ソースコード

json
1
2# package.json
3
4{
5		"name": "frontend",
6		"version": "1.0.0",
7		"main": "index.js",
8		"license": "MIT",
9		"scripts": {
10				"dev": "gulp Pug:Serve & webpack serve --config webpack.dev.js",
11				"build": "gulp Pug:Build & webpack --config webpack.prod.js",
12				"Lint:js": "eslint './src/**/*.{ts,js}' --fix",
13				"Prettier": "prettier --write './src/**/*.{ts,js}'",
14				"Flow": "flow"
15		},
16		"devDependencies": {
17				"@babel/cli": "^7.13.16",
18				"@babel/core": "^7.14.0",
19				"@babel/preset-env": "^7.14.1",
20				"@babel/preset-flow": "^7.13.13",
21				"autoprefixer": "^10.2.5",
22				"babel-eslint": "^10.1.0",
23				"babel-loader": "^8.2.2",
24				"css-loader": "^5.2.4",
25				"css-minimizer-webpack-plugin": "^2.0.0",
26				"csscomb-loader": "^0.0.2",
27				"eslint": "^7.26.0",
28				"eslint-config-airbnb": "^18.2.1",
29				"eslint-import-resolver-webpack": "^0.13.0",
30				"eslint-loader": "^4.0.2",
31				"eslint-plugin-flowtype": "^5.7.2",
32				"eslint-plugin-import": "^2.22.1",
33				"eslint-plugin-jsx-a11y": "^6.4.1",
34				"eslint-plugin-react": "^7.23.2",
35				"eslint-plugin-react-hooks": "^4",
36				"flow-bin": "^0.150.1",
37				"gulp": "^4.0.2",
38				"gulp-notify": "^4.0.0",
39				"gulp-plumber": "^1.2.1",
40				"gulp-pug": "^4.0.1",
41				"gulp-sass": "^4.1.0",
42				"html-webpack-plugin": "^5.3.1",
43				"imports-loader": "^2.0.0",
44				"mini-css-extract-plugin": "^1.6.0",
45				"node-sass-package-importer": "^5.3.2",
46				"postcss-loader": "^5.2.0",
47				"postcss-sort-media-queries": "^3.9.10",
48				"prettier": "^2.2.1",
49				"pug": "^3.0.2",
50				"pug-plain-loader": "^1.1.0",
51				"sass": "^1.32.12",
52				"sass-loader": "^11.0.1",
53				"style-loader": "^2.0.0",
54				"terser-webpack-plugin": "^5.1.1",
55				"ts-loader": "^9.1.2",
56				"typescript": "^4.2.4",
57				"webpack": "^5.36.2",
58				"webpack-cli": "^4.7.0",
59				"webpack-dev-server": "^3.11.2",
60				"webpack-merge": "^5.7.3",
61				"webpack-remove-empty-scripts": "^0.7.1"
62		},
63		"dependencies": {
64				"destyle.css": "^2.0.2",
65				"react": "^17.0.2",
66				"react-dom": "^17.0.2",
67				"snapsvg": "^0.5.1",
68				"vue": "^2.6.12"
69		}
70}
71

javascript
1
2# webpack.common.js
3
4const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
6
7/* ----- パス設定 ----- */
8const path = require('path');
9
10const dir = {
11  src: path.join(__dirname, 'src'),
12  dist: path.join(__dirname, 'dist'),
13};
14
15/* ----- js rules ----- */
16const jsRules = {
17
18  // *----- js | lint -----*
19  jsLint: {
20    test: /.(ts|js|vue)$/,
21    exclude: /node_modules/,
22
23    // ビルド前に構文チェック
24    enforce: 'pre',
25    loader: 'eslint-loader',
26    options: {
27
28      // 構文エラーがあった場合はfixする
29      fix: true,
30
31    },
32  },
33
34  // *----- js | compile -----*
35  jsCompile: {
36    test: /.(ts|js|vue)$/,
37    exclude: /node_modules/,
38    loader: 'babel-loader',
39  },
40
41  // *----- typescript | compile -----*
42  tsCompile: {
43    test: /.ts$/,
44    exclude: /node_modules/,
45    use: 'ts-loader',
46  },
47
48};
49
50/* ----- css rules ----- */
51const cssRules = {
52
53  // *----- css, scss, sass | compile -----*
54  test: /.(scss|sass|css)$/,
55  exclude: /node_modules/,
56  use: [
57
58    MiniCssExtractPlugin.loader,
59    {
60      // css を js にバンドル
61      loader: 'css-loader',
62      options: {
63
64        // オプションでCSS内のurl()メソッドの取り込みを禁止する
65        url: false,
66
67        // 0 => no loaders (default);
68        // 1 => postcss-loader;
69        // 2 => postcss-loader, sass-loader
70        importLoaders: 2,
71
72      },
73    },
74
75    'csscomb-loader',
76    'postcss-loader',
77    'sass-loader',
78
79  ],
80
81};
82
83/* ----- snapsvg rules ----- */
84const snapsvgRules = {
85
86  test: require.resolve('snapsvg'),
87  use: [
88    {
89      loader: 'imports-loader',
90      options: {
91        this: '>window',
92        fix: '>module.exports=0',
93      },
94    },
95  ],
96
97};
98
99/* ----- 設定 ----- */
100module.exports = {
101
102  entry: {
103
104    main: path.resolve(dir.src, 'js/main.js'),
105    sub: path.resolve(dir.src, 'js/sub.js'),
106    style: path.resolve(dir.src, 'scss/index.scss'),
107
108  },
109
110  output: {
111
112    // 生成先のディレクトリ
113    path: dir.dist,
114
115    // 生成されるファイル名( 出力されるのをbundle )
116    filename: '[name].bundle.js',
117
118  },
119
120  resolve: {
121
122    // import文のパス指定に node_modules を省略できるようにする
123    modules: ['node_modules'],
124
125    // 拡張子を省略できるようにする
126    extensions: ['.ts', '.js', '.vue'],
127
128    alias: {
129      snapsvg: 'snapsvg/dist/snap.svg.js',
130    },
131
132  },
133
134  module: {
135    rules: [
136      jsRules.jsLint,
137      jsRules.jsCompile,
138      jsRules.tsCompile,
139      snapsvgRules,
140      cssRules,
141    ],
142  },
143
144  plugins: [
145
146    new MiniCssExtractPlugin({
147      filename: '[name].bundle.css',
148    }),
149
150    new RemoveEmptyScriptsPlugin(),
151
152  ],
153
154};

javascript
1
2# webpack.prod.js
3
4const { merge } = require('webpack-merge');
5const TerserPlugin = require('terser-webpack-plugin');
6const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
7const commonConfig = require('./webpack.common');
8
9module.exports = merge(commonConfig, {
10
11  mode: 'production',
12
13  optimization: {
14
15    splitChunks: {
16
17      cacheGroups: {
18
19        vendor: {
20          chunks: 'initial',
21          test: /node_modules/,
22          name: 'vendor',
23        },
24
25      },
26    },
27
28    minimizer: [
29
30      new CssMinimizerPlugin(),
31
32      new TerserPlugin({
33        extractComments: false,
34        terserOptions: {
35
36          output: {
37            comments: false,
38            beautify: false,
39          },
40
41          compress: {
42            drop_console: true,
43          },
44
45        },
46      }),
47
48    ],
49
50  },
51});

javascript
1
2// ./js/main.js
3
4import Vue from 'vue/dist/vue.min';
5import Snap from 'snapsvg';
6
7new Vue({
8
9  mounted() {
10    const s = Snap('#svg');
11    const bigCircle = s.circle(150, 150, 100);
12    bigCircle.attr({
13      fill: '#bada55',
14      stroke: '#000',
15      strokeWidth: 5,
16    });
17    const smallCircle = s.circle(100, 150, 70);
18    s.group(smallCircle, s.circle(200, 150, 70));
19  },
20
21}).$mount('#app');

行動規範の内容に同意します

回答1件

エラーメッセージのとおりです。imports-loaderに指定しているオプションが正しくありません（推測ですが、バージョンの違うimports-loader向けのオプションを書いてしまったようにも見受けられます）。

正しい書式はこちらにあります。

投稿2021/05/08 14:37

maisumakun

総合スコア145184

matsuo_basho

2021/05/08 14:39

早速ご回答いただきありがとうございます！試してみます！

maisumakun

2021/05/08 14:41 編集

snap.svg自体の最終更新が4年前と、プロジェクトとして停止状態です。 https://github.com/adobe-webplatform/Snap.svg 「すでにsnap.svgで書かれたものを触るための環境構築」というのでなければ、新規に手を出さないほうが賢明かと思います。

matsuo_basho

2021/05/08 14:46

なんと、、！！そこまでお調べいただきありがとうございます！では、snap.svgを辞めて第二候補だったsvg.jsを利用したいと思います。もしご存知でしたらお伺いしたいのですが、こちらのサイト( https://myfootballkit.jp/ )の○など幾何学模様のものを表現したいのですが、こういったものを表現するためにおすすめなライブラリなどはご存知でしょうか？

行動規範の内容に同意します