Import assignment cannot be used when targeting ECMAScript modules

[GeorgeKnap]

I'm using screenfull.js in typescript project targeting ES2015.

After updating to v 5.0.0 I should make a change in import statement

You need to change import screenfull from 'screenfull'; to import screenfull = require('screenfull');

vscode mark this import with following error:

Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead.

[sindresorhus]

I cannot document all the possible config you can use with TS. The instructions are for default TS. Try to Google the error.

[GeorgeKnap]

what is the default TS ?

[cdeutsch]

import screenfull from 'screenfull'; still works but the only property that exists is isEnabled.

All of the functions are missing like .request, .exit, etc

If I keep import screenfull from 'screenfull';, the following still works:

(screenfull as any).request()

That means Typescript is importing the actual code correctly but the typings are wrong.

I've yet to see someone recommend import screenfull = require('screenfull'); in any scenario, so not really sure what that is attempting to get around.

Generally in typescript you'd use const screenfull = require('screenfull') to import a module that doesn't have typings.

My tsconfig:

{
  "compilerOptions": {
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es2015",
    "lib": ["es2016", "dom"],
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "/",
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "incremental": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    // add skipLibCheck for antd.
    // https://github.com/ant-design/ant-design/issues/5627#issuecomment-339056618
    // can maybe try remove it someday
    "skipLibCheck": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    // needed to prevent error TS1192: Module 'react' has no default export.
    // https://ant.design/docs/react/introduce#TypeScript
    "allowSyntheticDefaultImports": true,
    // this allows you to reference modules stored in lib with non-relative names
    // https://www.typescriptlang.org/docs/handbook/module-resolution.html#base-url
    "baseUrl": "lib"
  },
  "exclude": [
    "node_modules"
  ]
}

"allowSyntheticDefaultImports": true, probably plays a factor here

[tmtron]

here is what I do after updating to version 5:

import screenfull, { Screenfull } from 'screenfull';

const fullScreen = (screenfull.isEnabled) ? screenfull as Screenfull : undefined;

So my constant fullScreen is either the correctly typed Screenfull or undefined:
now the use in typescript code is simple and intuitive, e.g.

if (fullScreen) {
  fullScreen.toggle();
  ..
}