Wildhoney / ReactShadow

:beginner: Utilise Shadow DOM in React with all the benefits of style encapsulation.
https://react-shadow.herokuapp.com/
MIT License
1.31k stars 81 forks source link

Update to 18.0.0 cause Jest error #74

Closed NPM8 closed 4 years ago

NPM8 commented 4 years ago

After updating to newest 18.0.0v I got a problem with importing your module:

Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /[my_home_path]/node_modules/react-shadow/react-shadow.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import e,{useRef as r,useEffect as t,createContext as n,forwardRef as o,useState as a,useContext as c}from"react";import{createPortal as u}from"react-dom";import l from"prop-types";var i="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function s(e,r){return e(r={exports:{}},r.exports),r.exports}var f=s((function(e){!function(r){var t=function(e,r,n){if(!l(r)||s(r)||f(r)||p(r)||u(r))return r;var o,a=0,c=0;if(i(r))for(o=[],c=r.length;a<c;a++)o.push(t(e,r[a],n));else for(var d in o={},r)Object.prototype.hasOwnProperty.call(r,d)&&(o[e(d,n)]=t(e,r[d],n));return o},n=function(e){return d(e)?e:(e=e.replace(/[\-_\s]+(.)?/g,(function(e,r){return r?r.toUpperCase():""}))).substr(0,1).toLowerCase()+e.substr(1)},o=function(e){var r=n(e);return r.substr(0,1)

    SyntaxError: Cannot use import statement outside a module

      4 | import * as React from 'react';
      5 | import {useSelector} from 'react-redux';
    > 6 | import root from 'react-shadow';
        | ^
      7 | import {ContentStyles} from './content-styles';
      8 | 
      9 | export const ShadowContent: React.FunctionComponent = ({children}) => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1085:14)
      at Object.<anonymous> (src/app/modules/resource/components/shadow-content/index.tsx:6:1)

I was trying to change it to react-shadow/styled-component but the same error appears.

Dependecies:

Last running version 17.6.0

Wildhoney commented 4 years ago

Hmm, maybe it's because I removed the CJS build. I didn't really change anything else that would affect the build.

If you're using react-shadow/styled-component then that would become react-shadow/styled-component.cjs

Could you try v18.0.1 please and let me know if this improves the situation?

NPM8 commented 4 years ago

I tried and it worked, thank you.