実現したいこと
現在、個人でスマホ向けのアプリケーションを開発しており、画面デザインを決めるためFigmaプラグイン開発を行っています。プラグイン自体の内容は伏せておきますが、大まかな流れとしてはFigmaのとある条件下である場合、そのデータをまとめてCSVで出力するというものです。
ファイルを分けを行いたかったためこちらを参考にts-loaderやwebpackの設定を行いました。
前提
TypeScriptが今回言語としては初挑戦になるので開発を行うのに自身がありませんでしたが、何とかそのデータをまとめぐらいまではプログラムを完成することができましたが、最後のCSVで出力するという部分が既存モジュールを読み込むことになるらしいのですが、そこでまさかのimportエラーに直面しました。下記は現在の設定になります。
manifest.json
1{ 2 "name": "XXX", 3 "id": "1338758441514588489", 4 "api": "1.0.0", 5 "main": "dist/main.js", 6 "capabilities": [], 7 "enableProposedApi": false, 8 "editorType": [ 9 "figma", 10 "figjam" 11 ], 12 "ui": "dist/ui.html", 13 "networkAccess": { 14 "allowedDomains": [ 15 "none" 16 ] 17 } 18}
package.json
1{ 2 "name": "XXX", 3 "version": "1.0.0", 4 "description": "XXX", 5 "main": "dist/main.js", 6 "private": true, 7 "scripts": { 8 "analyze": "npx webpack --mode production --profile --json > profile.json && npx webpack-bundle-analyzer profile.json build", 9 "build": "npx webpack --mode production", 10 "build:watch": "npx webpack --mode development --watch", 11 "lint": "npx eslint", 12 "prettier:format": "npx prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}'" 13 }, 14 "author": "", 15 "license": "", 16 "devDependencies": { 17 "@figma/plugin-typings": "^1.85.0", 18 "@types/express": "^4.17.21", 19 "@types/node": "^20.11.20", 20 "ts-loader": "^9.5.1", 21 "typescript": "^5.3.3", 22 "webpack": "^5.90.3", 23 "webpack-cli": "^5.1.4" 24 }, 25 "dependencies": { 26 "@types/fs-extra": "^11.0.4", 27 "@types/react": "^18.2.60", 28 "@types/react-dom": "^18.2.19", 29 "@types/three": "^0.161.2", 30 "react": "^18.2.0", 31 "react-dom": "^18.2.0", 32 "three": "^0.150.1" 33 } 34}
tsconfig.json
1{2 "compilerOptions": {3 // Three.jsがES5未サポートなので、割り切って比較的新しい仕様でビルドする4 "target": "ES2015",5 // TSのモジュールはES Modulesとして出力6 "module": "ES2015",7 // JSXの書式を有効に設定8 "jsx": "react-jsx",9 // node_modules からライブラリを読み込む10 "moduleResolution": "node",11 // これの設定も必要 デフォルトインポートの有効化12 "allowSyntheticDefaultImports": true,13 // 厳密モード14 "strict": true,15 "lib": [16 "ES2023",17 "DOM" 18 ],19 "typeRoots": [20 "./node_modules/@types",21 "./node_modules/@figma" 22 ],23 },24 "include": ["src/**/*.ts"],25}
webpack.config.js
1module.exports = { 2 // モード値を production に設定すると最適化された状態で、 3 // development に設定するとソースマップ有効でJSファイルが出力される 4 mode: 'development', 5 6 // ↓コメントを解除すればビルド時のエラーは消えますが、Figma実行時に「requireが使われている」というエラーが発生します。 7 //target: 'node', 8 9 // メインとなるJavaScriptファイル（エントリーポイント） 10 entry: './src/main.ts', 11 output: { 12 // 出力ファイルのディレクトリ名 13 path: `${__dirname}/dist`, 14 // 出力ファイル名 15 filename: "main.js" 16 }, 17 module: { 18 rules: [ 19 { 20 // 拡張子 .ts の場合 21 test: /\.(js|ts|tsx)$/, 22 //exclude: /node_modules/, 23 // TypeScript をコンパイルする 24 use: 'ts-loader', 25 }, 26 ], 27 }, 28 29 // import 文で .ts ファイルを解決するため 30 // これを定義しないと import 文で拡張子を書く必要が生まれる。 31 // フロントエンドの開発では拡張子を省略することが多いので、 32 // 記載したほうがトラブルに巻き込まれにくい。 33 resolve: { 34 // 拡張子を配列で指定 35 extensions: [".ts", ".tsx", ".js", ".json"], 36 //modules: [`${__dirname}/src`, 'node_modules'] 37 }, 38 // ES5(IE11等)向けの指定（webpack 5以上で必要） 39 target: ["web", "es5"], 40};
発生している問題・エラーメッセージ
PS C:\Users\XXXX> npm run build Debugger attached. > plugin@1.0.0 build > npx webpack --mode production Debugger attached. Debugger attached. assets by status 2 KiB [cached] 1 asset orphan modules 4.52 KiB [orphan] 3 modules ./src/main.ts + 3 modules 5.94 KiB [built] [code generated] ERROR in ./src/DownloadCSV.ts 1:0-25 Module not found: Error: Can't resolve 'fs' in 'C:\Users\XXXX\src' resolve 'fs' in 'C:\Users\XXXX\src' Parsed request is a module using description file: C:\Users\XXXX\package.json (relative path: ./src) Field 'browser' doesn't contain a valid alias configuration resolve as module C:\Users\XXXX\src\node_modules doesn't exist or is not a directory looking for modules in C:\Users\XXXX\node_modules single file module using description file: C:\Users\XXXX\package.json (relative path: ./node_modules/fs) no extension Field 'browser' doesn't contain a valid alias configuration C:\Users\XXXX\node_modules\fs doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration C:\Users\XXXX\node_modules\fs.ts doesn't exist .tsx Field 'browser' doesn't contain a valid alias configuration C:\Users\XXXX\node_modules\fs.tsx doesn't exist .js Field 'browser' doesn't contain a valid alias configuration C:\Users\XXXX\node_modules\fs.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration C:\Users\XXXX\node_modules\fs.json doesn't exist C:\Users\XXXX\node_modules\fs doesn't exist C:\Users\node_modules doesn't exist or is not a directory C:\node_modules doesn't exist or is not a directory @ ./src/SearchScreen.ts 2:0-38 13:20-36 @ ./src/main.ts 1:0-37 36:24-39 webpack 5.90.3 compiled with 1 error in 2429 ms Waiting for the debugger to disconnect... Waiting for the debugger to disconnect... Waiting for the debugger to disconnect...
該当のソースコード
DownloadCSV.ts
1import * as fs from 'fs'; //fsが無いって怒られている 2export class DownloadCSV{ 3 ... 4}
試したこと
原因を調べるべく、stackOverflow等のサイトで一週間ほど検索しましたが、挫折しそうです。
FigmaとWebpackの相性が悪いのかな？と勝手ですが予想していますが、原因や直し方がさっぱりでどのようにすればいいのか助言をもらいたく質問させていただきました。
ご回答のほどよろしくお願いいたします。
補足情報（FW/ツールのバージョンなど）
node v20.11.0
0 コメント