Typescript : require statement not part of an import statement

Question

Typescript version 2.2.2

I wrote this require in my UserRoutzr.ts

const users = <IUser[]> require(path.join(process.cwd() + "/data"));

TSLint is raising the following warning:

require statement not part of an import statement

if I changed it to :

import users = <IUser[]> require(path.join(process.cwd() + "/data"));

Then it's raising an error :

TS1003 Identifier expected

How should I rewrite this require ? thanks for feedback

Do you need to build the path like that? cannot you just use "./data"? Assuming process is the running process. — Juan, Mar 30 '17 at 09:51
I tried , but ./data will not be defined in the build directory... ? — , Mar 30 '17 at 11:52

Paleo · Accepted Answer · 2019-05-12T18:13:42.880

TypeScript modules are an implementation of ES6 modules. ES6 modules are static. Your issue comes from the dynamic path: path.join(process.cwd() + "/data"). The compiler can't determine which module it is at compile time, and the linter doesn't like the causes that lead to any.

You should use a static path to the module. At compile time, TypeScript resolves it. And it affects the right exported type (IUser[]) to users.

import users = require("./yourModuleThatExportsUsers");

Notice: If your module data contains just data, you could consider to change it to a JSON file, which could be loaded (Node.js) or bundled (Webpack).

UPDATE (from May 2019) — It is also possible to use dynamic import, with which TypeScript accepts static and dynamic paths:

const users = await import("./yourModuleThatExportsUsers");

See also: TypeScript 2.4 Release Notes

score 4 · Answer 2 · answered Jul 09 '20 at 04:31

if your can run the code correctly but eslint report an error, you can add /* eslint-disable */above you error code like this


/* eslint-disable */
const path =  require("path");
module.exports = {
    lintOnSave: false,
    chainWebpack: config => {

        const dir = path.resolve(__dirname, "src/assets/icons");

        config.module
            .rule("svg-sprite")
            .test(/\.svg$/)
            .include.add(dir).end() // 包含 icons 目录
            .use("svg-sprite-loader").loader("svg-sprite-loader").options({extract: false}).end();
        /* eslint-disable */
        config.plugin("svg-sprite").use(require("svg-sprite-loader/plugin"), [{plainSprite: true}] || []);
        config.module.rule("svg").exclude.add(dir); // 其他 svg loader 排除 icons 目录
    }
};

That will disable all eslint checks for the entire file. It would be far better to disable it for only the rule and line needed. — Trott, Apr 10 '22 at 17:05

holi-java · Answer 3 · 2017-03-30T09:37:55.277

3

may be you need dynamic module loading, and the code like this:

import {IUser} from './lib/user';
const users:IUser[] = require(path.join(process.cwd() + "/data"));

edited Mar 30 '17 at 09:37

answered Mar 30 '17 at 09:28

holi-java

29,655
7
72
83

score 0 · Answer 4 · answered Jul 02 '20 at 07:24

Needed to use provide plugin, yet neither require nor dynamic imports worked for me, this construct helped though:

module.exports = {
  // ..
  chainWebpack: (config) => {
    config.plugin('provide').use(require('webpack').ProvidePlugin, [
      // ..
    ])
  },

Typescript : require statement not part of an import statement

4 Answers4

Linked