CODEWITHSUNDEEP
javascriptnode.jstypescriptnpmfaker
Peter J
Peter J

Reputation: 147

Can't import NPM Package (eg Faker) in TypeScript

I'm currently trying to import Faker into my project.

I have a file similar to the following:

import * as faker from 'faker';

interface Test {
    FirstName: String,
    LastName: String
}

function create() {
    let account: Test = {
        FirstName: faker.name.firstName(),
        LastName: faker.name.lastName()
    }
}

When I run this, I get an error: SyntaxError: Cannot use import statement outside a module

I'm importing this in another file without any issues, but the moment Faker is attempted to be imported I receive this error. I've tried a handful of solutions that should fix this, such as modifying the tsconfig and package.json to add type: modules or change the lib and target in the tsconfig but no luck.

I should note this works with hardcoded values, but I need to use faker.

Edit: Just mentioning I have tried const/var faker = require('faker'); as well as import faker = require('faker')

Upvotes: 3

Views: 5000

Answers (2)

Nicholas Kolatsis
Nicholas Kolatsis

Reputation: 632

I had the same issue and tried the above suggested solution without success. What worked for me, was changing the following line in tsconfig.json:

//"module": "esnext", "module": "commonjs",

Or, pass it at the command-line:

ts-node -O '{"module": "commonjs"}' ./server/generate.ts > ./server/database.json

Explanation [1]:

Current node.js stable releases do not support ES modules. Additionally, ts-node does not have the required hooks into node.js to support ES modules. You will need to set "module": "commonjs" in your tsconfig.json for your code to work.

[1] https://github.com/TypeStrong/ts-node#import-statements

Upvotes: 0

MjZac
MjZac

Reputation: 3536

Here's a working example.

You have to install the @types/faker package also for getting type definitions.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

import faker from 'faker';

interface AppProps { }
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: faker.name.firstName()
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />

      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

This is tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

Upvotes: 1

Related Questions