Unexpected String issue when importing the slider in React (Gatsby)

[Bobeta]

I'm importing the slider in a statically generated site using default GatsbyJS installation, it's built using React and I'm getting the following error:

Uncaught SyntaxError: Unexpected string - commons.js:54025

It's referring to the following section:

/***/ "./node_modules/ventura-slider/src/tiny-slider.module.js":
/***/ (function(module, exports) {
	// Format: ES MODULE
	// Version: 2.5.2
	// helper functions 
	import './helpers/keys';
	import './helpers/childNode.remove';

Any ideas?

[ganlanyuan]

Did it say which string is unexpected?

[Bobeta]

@ganlanyuan I just did a clean install and added the following to the class:

import { tns } from 'tiny-slider/src/tiny-slider.module.js'

The error I get:

Uncaught SyntaxError: Unexpected token {

which refers to:

import { raf } from './helpers/raf.js';

[ganlanyuan]

I have no idea what's wrong with "GatsbyJS" or "react", since this is the basic import method in ES6.

[a-barbieri]

Same happens with NextJS7.0.2

[a-barbieri]

A workaround is to use require it inside componentDidMount which isn't that elegant but it works.

[a-barbieri]

Using require brakes tests (with Jest).

[michielmetcake]

Any update on this issue? Next to @a-barbieri temporary solution.

[quintmouthaan]

I'm experiencing this issue as well. Maybe the message in the following screenshot helps

[Andreew4x4]

I'm experiencing this issue as well. Maybe the message in the following screenshot helps

Same here.

[Kevinio04]

I'm experiencing this issue as well. Maybe the message in the following screenshot helps

Same here.

Yep, same here, be great if we can get a fix for this

[a-barbieri]

The line causing the issue has been removed with this recent commit by the author @ganlanyuan.

@Kevinio04, @Andreew4x4 or @quintmouthaan

Can any of you try the master version?

Just replace the current package.json entry with the master version:

  "dependencies": {
    "tiny-slider": "ganlanyuan/tiny-slider#master"
    // ...
  }

A better option would be to use the current commit so we can better target the problem:

  "dependencies": {
    "tiny-slider": "ganlanyuan/tiny-slider#f6cbe5d"
    // ...
  }

Does it solve the issue? Or does it return something different?

[DranPy]

I have the same problem. I update dependency but it didn't solve it. I think this problem more from jest side end rather than react/gatsby or next.js. Maybe there is some issue in executing environment because of jest use jsdom.

[a-barbieri]

It's clear that the error is thrown by the first import hit by the parser. I bet is Node not being able to understand import and Babel not being there to rescue.

I've found serveral articles talking about esm. This might be a quick fix for the server side rendering, but I'm not sure about Jest.

@DranPy Can you try it?

See also this article: How To Enable ECMAScript 6 Imports in Node.JS

[a-barbieri]

Regarding Jest I just found:

• Please consider adding native support for ES modules jestjs/jest#4842
• jest transform support standard-things/esm#706

Where they basically say that import is still somehow problematic in 2019.

This will be solved sometime in the future, but if any feels like trying we could actually make a PR where we replace all those import with require and make sure nothing brakes within the code (I'm referring to any possible ES6 syntax).

[DranPy]

@a-barbieri
I'm not sure if I did this in the right way, but here is what I have. I try to use ESM and info from this article.
I create two files NewOrder.test.js and Exec.test.js with fallow code:

// Exec.test.js
const esmImport = require('esm')(module)
esmImport('./NewOrder.test.js')

// NewOrder.test.js
import React from 'react'
import renderer from 'react-test-renderer'

import { NewOrder } from '../'

describe('<NewOrder/>', () => {
  const wrapper = renderer.create(
    <NewOrder  />
  )

  test('render', () => {
    expect(wrapper).toMatchSnapshot()
  })
})

Next thing I try to execute Exec.test.js test which in turn have to execute and mock ES6 import in Component.test.js test file.
yarn test Exec.test.js or npx jest Exec.test.js or npx test Exec.test.js --env=node
In every case I get an error. Correct me please if I did something in a wrong way.

[a-barbieri]

Before diving into your code I'd rather know if the example in the link you shared worked also on your machine. Can you replicate it exactly as it is? Then, when we know that it works we can debug your example and see if esm helps.

[romelgomez]

I heaved that error too Uncaught SyntaxError: Unexpected string after restart the server the error is gone. But in mi case I implemented in Angular as one Directive:

import { Directive, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
import { TinySliderSettings, TinySliderInstance } from 'tiny-slider';
import { tns } from 'tiny-slider/src/tiny-slider';


@Directive({
  selector: '[appTinySlider]'
})
export class TinySliderDirective implements OnInit, OnDestroy {

  __tinySliderInstance: TinySliderInstance;

  @Input() tinySliderSettings: TinySliderSettings = {};

  @Output() tinySliderInstance = new EventEmitter<TinySliderInstance>();

  public constructor(
    private element: ElementRef,
  ) { }

  ngOnInit() {
    this.__tinySliderInstance = this.initSlider(this.tinySliderSettings, this.element);
    this.tinySliderInstance.emit(this.__tinySliderInstance);
  }

  ngOnDestroy() {
    this.__tinySliderInstance.destroy();
  }

  initSlider(settings: TinySliderSettings, elementRef: ElementRef): TinySliderInstance {
    const extendConfig: TinySliderSettings = Object.assign({
      container: elementRef.nativeElement
    },
      settings
    );
    return tns(extendConfig);
  }

}

          <div appTinySlider>
            <div>a</div>
            <div>b</div>
            <div>c</div>
          </div>

            "styles": [
              "src/styles.scss",
              "node_modules/tiny-slider/src/tiny-slider.scss"
            ],

[emmgfx]

Any news about this? I'm having the same issue : (

[bkstorm]

I have the same issue.
There is a workaround, require tns inside useEffect hook.

  useEffect(() => {
    require('tiny-slider/src/tiny-slider').tns({
      container: '.client-feedback-slider',
      items: 2,
      autoplay: true
    });
  }, []);

[Kevinio04]

I have the same issue.
There is a workaround, require tns inside useEffect hook.

  useEffect(() => {
    require('tiny-slider/src/tiny-slider').tns({
      container: '.client-feedback-slider',
      items: 2,
      autoplay: true
    });
  }, []);

Thanks @bkstorm you are correct this solves the issue when using shallow rendering in enzyme. The error "Cannot use import statement outside a module" is still reported when using mount however -

[jorianvo]

I was able to solve the issue with import by letting babel transform the module (so I'm assuming you are using babel). From the Jest documentation:

Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors.

Jest has the transformIgnorePatterns and this section of the documentation goes in further detail. You have to add the following line to your jest.config.js:

transformIgnorePatterns: ['node_modules/(?!tiny-slider/)'],

Note the regex pattern here: we are letting Jest know that we want to ignore tiny-slider from being ignored (so we are telling Jest: please let babel transform this file for us). If you already ignoring other modules you can just add the module name using a regex or e.g.:

transformIgnorePatterns: ['node_modules/(?!(tiny-slider|my-other-module-to-transform)/)'],

A full example of a jest.config.js file:

module.exports = {
  moduleNameMapper: {
    '\\.scss$': '<rootDir>/test/mocks/styleMock.js',
  },
  coverageThreshold: {
    global: {
      branches: 100,
      functions: 96.67,
      lines: 98.94,
      statements: 99.03,
    },
  },
  transformIgnorePatterns: ['node_modules/(?!tiny-slider/)'],
};

This should make Jest happy again.