CODEWITHSUNDEEP
typescriptwebpackfabricjs
chrisan
chrisan

Reputation: 4292

Module not found: Error: Can't resolve 'fabric/fabric-impl'

I have the following file

import {fabric} from 'fabric';
import {Point} from 'fabric/fabric-impl';

class Editor {
  private canvas: fabric.Canvas;
  private startPoint:Point;

  constructor() {
    let editor = document.getElementById('editor');
    let canvasElement = document.createElement('canvas') as HTMLCanvasElement;
    canvasElement.id = 'canvas';
    editor.appendChild(canvasElement);

    this.canvas = new fabric.Canvas('canvas');

    this.canvas.on('mouse:down', (event) => {
      this.startPoint = event.pointer;
      console.log(event.pointer);
    })
  }
}

window.addEventListener('load', function(){
  new Editor();
});

And that compiles fine, however if I want to create a new Point() with something like

import {fabric} from 'fabric';
import {Point} from 'fabric/fabric-impl';

class Editor {
  private canvas: fabric.Canvas;
  private startPoint:Point;

  constructor() {
    let p = new Point(0,0);
    let editor = document.getElementById('editor');
    let canvasElement = document.createElement('canvas') as HTMLCanvasElement;
    canvasElement.id = 'canvas';
    editor.appendChild(canvasElement);

    this.canvas = new fabric.Canvas('canvas');

    this.canvas.on('mouse:down', (event) => {
      this.startPoint = event.pointer;
      console.log(event.pointer);
    })
  }
}

window.addEventListener('load', function(){
  new Editor();
});

I get the error loading module

ERROR in ./resources/ts/Editor.ts
Module not found: Error: Can't resolve 'fabric/fabric-impl' in '/mnt/c/Users/Chris/code/test/resources/ts'
 @ ./resources/ts/Editor.ts 2:0-43 5:20-25

Here are my node packages

package.json

{
    "private": true,
    "devDependencies": {
        "@types/fabric": "^3.6.8",
        "fabric": "^3.6.3",       
        "ts-loader": "^8.0.1",
        "typescript": "^3.9.6",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.12"
    },
    "dependencies": {}
}

tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    "incremental": true,
    "target": "ES6",
    "module": "es6",
    "outDir": "./public/js/"
  },
  "files": [
    "resources/ts/Editor.ts"
  ]
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: './resources/ts/Editor.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  output: {
    filename: 'Editor.js',
    path: path.resolve(__dirname, 'public/js'),
  },
};

Running with npx webpack --watch --mode=development

Why would it fail when trying to create a new object, but works fine above type casting the variable alone?

Upvotes: 2

Views: 4301

Answers (1)

Alex Wayne
Alex Wayne

Reputation: 187184

I believe you are importing Point wrong. It looks like the typings have it as a named export on the main library file.

That means you should be able to simply do:

import { fabric, Point } from 'fabric';

const point = new Point(1, 2) // Works

Playground

Or possibly:

const Point = fabric.Point
const point = new Point(1, 2)

Upvotes: 2

Related Questions