質問内容
プログラミング初心者です。
現在、ブラウザ上でテキストの校正ができるツールを作っています。
webpack5を使い、TextlintのKernelと自作のJSをビルドして使おうと思っているのですが、何度やってもChromeのコンソール上で process is not defined
と出てしまいうまく動作しません。
webpack5ではprocessを自分でインストールしないといけないと見たのでnpm installしてみたのですがそれでも変わらず…
個人的にはtextlintで使われているassert関係でエラーが起きているような気がしていますが、どれだけ探しても情報が見つからずお手上げ状態です。
環境
webpack 5.68.0
webpack-cli 4.9.2
textlint 12.1.0
エラーメッセージ
util.js:123 Uncaught ReferenceError: process is not defined at eval (util.js:123:1) at Object../node_modules/util/util.js (my-bundle.js:2428:1) at __webpack_require__ (my-bundle.js:2495:42) at eval (assertion_error.js:192:16) at Object../node_modules/assert/build/internal/assert/assertion_error.js (my-bundle.js:791:1) at __webpack_require__ (my-bundle.js:2495:42) at eval (assert.js:54:22) at Object../node_modules/assert/build/assert.js (my-bundle.js:780:1) at __webpack_require__ (my-bundle.js:2495:42) at eval (textlint-kernel.js:5:64)
ソースコード
javascript/webpack.config.js
1const path = require('path'); 2const staticFs = require('babel-plugin-static-fs'); 3const webpack = require('webpack'); 4 5module.exports = { 6 entry: { 7 'textlint': './index.js', 8 }, 9 output: { 10 path: path.resolve(__dirname, 'bundle'), 11 filename: 'my-bundle.js', 12 libraryTarget: 'commonjs' 13 }, 14 resolve: { 15 fallback: { 16 assert: require.resolve("assert"), 17 process: require.resolve("process/browser"), 18 os: require.resolve('os-browserify/browser'), 19 path: require.resolve('path-browserify'), 20 util: require.resolve('util'), 21 } 22 }, 23 module: { 24 rules: [ 25 { 26 test: /\.m?js$/, 27 use: [ 28 { 29 loader: 'babel-loader', 30 options: { 31 plugins: [ 32 [ 33 staticFs, 34 { 35 target: 'browser', 36 dynamic: false, 37 }, 38 ], 39 ], 40 presets: [ 41 ['@babel/preset-env', { 42 useBuiltIns: 'entry', 43 corejs: 3, 44 }] 45 ] 46 }, 47 }, 48 ], 49 }, 50 ], 51 }, 52 devServer: { 53 static: { directory: path.join(__dirname, 'bundle') }, 54 open: true, 55 } 56}
javascript/textlinter.js
1import { TextlintKernel } from '@textlint/kernel'; 2 3export default class Linter { 4 constructor() { 5 kernel = new TextlintKernel(); 6 lint_options = { 7 ext: '.txt', 8 plugins: [ 9 { 10 pluginId: "text", 11 plugin: require("@textlint/textlint-plugin-text") 12 } 13 ], 14 rules: [ 15 { 16 ruleId: "preset-japanese", 17 rule: require('textlint-rule-preset-japanese') 18 } 19 ] 20 }; 21 } 22 23 lintText(text) { 24 return kernel.lintText(text, lint_options); 25 } 26 27} 28
json/package.json
1{ 2 "name": "rowlint", 3 "version": "1.0.0", 4 "description": "", 5 "main": "index.js", 6 "scripts": { 7 "test": "echo \"Error: no test specified\" && exit 1", 8 "build": "webpack --mode development", 9 "start": "webpack-dev-server --mode development" 10 }, 11 "author": "", 12 "license": "ISC", 13 "dependencies": { 14 "@textlint/kernel": "^12.1.0", 15 "assert": "^2.0.0", 16 "os-browserify": "^0.3.0", 17 "path-browserify": "^1.0.1", 18 "process": "^0.11.10", 19 "textlint-rule-no-todo": "^2.0.1", 20 "textlint-rule-preset-japanese": "^7.0.0" 21 }, 22 "devDependencies": { 23 "@babel/core": "^7.17.2", 24 "@babel/preset-env": "^7.16.11", 25 "babel-loader": "^8.2.3", 26 "babel-plugin-static-fs": "^3.0.0", 27 "textlint": "^12.1.0", 28 "textlint-rule-prh": "^5.3.0", 29 "webpack": "^5.68.0", 30 "webpack-cli": "^4.9.2", 31 "webpack-dev-server": "^4.7.4" 32 } 33}
補足
エラーが発生しているのがutil.jsだったので、該当ライブラリをインストールしてみましたが結果は全く変わらずでした。
assert.jsを無効化してもprocess is not definedというエラーは変わらずです。
以上、よろしくお願いいたします。
あなたの回答
tips
プレビュー