Библиотека JSZip и TypeScript [ошибка Can’t resolve 'jszip' при сборке webpack-ом]

Вопрос-ответ JavaScript
1

Здравствуйте,
при компиляции тайпскрипта с библиотекой jszip вылазит ошибка:

ERROR in ./src/app.ts
Module not found: Error: Can’t resolve ‘jszip’ in ‘D:\project_app\src’

jszip установлен и типизация тоже.

Делаю
import * as jszip from ‘jszip’;
ругается здесь в момент компиляции
var zip = new jszip();
до компиляции все норм, ошибок нет, объект видит свои свойства.

Проект собирается с помощью webpack, может быть проблема еще связанна с этим?

2

Тайпингзы стоят для этой библиотеки? https://www.npmjs.com/package/@types/jszip

3

Да. Ошибку выдает в процессе компиляции. У меня почему то подозрение на вебпак.

4

Попробуй использовать такую строку вместо той const jszip = require('jszip')

И если не сработает, кинь список зависимостей проекта. Я попробую воспроизвести проблему локально.

1 лайк
5

С этой строкой в vscode ошибка та же, а в консоли браузера:
app.ts:106 Uncaught Error: Cannot find module ‘JSZip’
at webpackMissingModule (app.ts:106)

106 строка:
var jszip = webpack_require(!(function webpackMissingModule() { var e = new Error(“Cannot find module ‘JSZip’”); e.code = ‘MODULE_NOT_FOUND’; throw e; }()));

"dependencies": {
    "@types/createjs": "0.0.29",
    "@types/easeljs": "^1.0.0",
    "@types/gsap": "^1.20.2",
    "@types/jszip": "^3.1.6",
    "@types/preloadjs": "^0.6.32",
    "gsap": "^2.1.2",
    "jszip": "^3.2.1",
    "preloadjs": "^1.0.1",
    "stream": "0.0.2",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.2",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.2.1"
  }

Не хочу так сильно напрягать, но если у вас будет время, буду крайне благодарен.

6

Запустил локально - работает как надо. Единственное что собирал не вебпаком. Кинь конфиг вебпака, попробую с ним.

7

Проверял вот так:

чтобы запустить:

npm install а потом npm run dev а потом открой в браузере http://localhost:1234/

8

Спасибо, попробую.
Конфиг

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  mode:"production",
  module:{
      rules:[{
          test: /\.ts$/,
          use:"ts-loader",
      },
    ],
  },
  resolve:{
      extensions:['.ts',
    ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bin')
  }
};
9

На самом деле проблема в конфигурации. Надо сказать webpack-у чтобы он использовал файлы как с ts так и с js расширением. Если подумать, то логично, ибо подключается-то модуль в котором js файлы.

Работающий конфиг

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  mode:"production",
  module:{
      rules:[{
          test: [/\.ts$/],
          use:"ts-loader",
      },
    ],
  },
  resolve:{
      extensions:['.ts','.js' // вот тут добавил расширение
    ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'bin')
  }
};
1 лайк
10

Да, теперь работает. Большое спасибо.