Unable to build with webpack

[YoshiWalsh]

I'm using kuroshiro in my Angular project. I'm using kuroshiro-analyzer-kuromoji so that I can run it in-browser.

If I do ng serve it works perfectly, but if I do ng build I get the following error:

> ng build   

chunk {main} main-es2015.js, main-es2015.js.map (main) 35.3 kB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 264 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5-es2015.js, polyfills-es5-es2015.js.map (polyfills-es5) 617 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 341 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 5.26 MB [initial] [rendered]
Date: 2019-09-05T12:39:41.942Z - Hash: 136bafa03f0ff6134096 - Time: 10028ms

ERROR in ./node_modules/kuromoji/src/loader/DictionaryLoader.js
Module not found: Error: Can't resolve 'path' in 'D:\git\myproject\node_modules\kuromoji\src\loader'

Since it works with ng serve I'm sure there's a simple way to fix this by tweaking my webpack configuration. Unfortunately I don't know enough about webpack to work out what that change would be.

I can see that other people are having this same problem, but they all seem to be facing it with React Native.

Any help would be greatly appreciated, thanks!

[HoanNNC]

I getting same issue and i fixed it ok.

1. npm install path-browserify

2. edit tsconfig.json "paths": { "path": [ "./node_modules/path-browserify" ] },

3. copy folder dist of [node_modules/kuromoji/dist] in to [src/assets/dist] folder of angular project

4. edit or create file typings.d.ts in the root angular project [/src/typing.d.ts] with flowing code `declare module 'kuroshiro' { export function init(options?: { dicPath?: string }, callback?: (err?: any) => void): void; export function init(callback?: (err?: any) => void): void;

   export function convert(str: string, options?: { to?: 'hiragana' | 'katakana' | 'romaji', } & ConvertOptions): string;

   export function toHiragana(str: string, options?: ConvertOptions): string;

   export function toKatakana(str: string, options?: ConvertOptions): string;

   export function toRomaji(str: string, options?: ConvertOptions): string;

   export function toKana(str: string, options?: ConvertOptions): string;

   export function isHiragana(str: string): boolean;

   export function isKatakana(str: string): boolean;

   export function isRomaji(str: string): boolean;

   export function isKanji(str: string): boolean;

   export function hasHiragana(str: string): boolean;

   export function hasKatakana(str: string): boolean;

   export function hasKanji(str: string): boolean;

   interface ConvertOptions { mode?: 'normal' | 'spaced' | 'okurigana' | 'furigana', delimiter_start?: string, delimiter_end?: string }

}

declare class KuromojiAnalyzer { constructor(dictPath?: { dictPath: string }); init(): Promise; parse(str: string): Promise; }

declare module "kuroshiro-analyzer-kuromoji" { export default KuromojiAnalyzer; }`

5. edit init of kuroshiro flowing code: const autokana = new (kuroshiro as any).default await autokana.init(new KuromojiAnalyzer.default({dictPath: 'assets/dict/'})); // Convert what you want: const result = await autokana.convert("大澤", { to: "hiragana" }); console.log(result);

i use angular 12+