Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. #996

Open
harryy2510 opened this issue Apr 8, 2020 · 48 comments
Labels
🐛 Bug 🌐 Web react-native-web specific

Comments

@harryy2510
Copy link

🐛 Bug Report

Not able to build code

image

image

UI Kitten and Eva version

Package Version
@eva-design/eva ^2.0.0-alpha.1
@ui-kitten/components ^5.0.0-alpha.1

Environment information

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 13.9.0 - ~/.nvm/versions/node/v13.9.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.9.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28
      Build Tools: 27.0.3, 28.0.3, 29.0.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 
@lesmo
Copy link

lesmo commented Apr 9, 2020

Feels like a duplicate of #991. You're trying to use ui-kitten in react-native-web (or expo-web in this case), and you need to make Webpack transpile node_modules or you'll face these kinds of errors.

You'll have to add something like this in babel.config file:

module: {
  rules: [
    // This would match almost any react-native module
    {
      test: /(@?react-(navigation|native)).*\.(ts|js)x?$/,
      include: /node_modules/,
      exclude: [/react-native-web/, /\.(native|ios|android)\.(ts|js)x?$/],
      loader: 'babel-loader'
    },
    // This would match ui-kitten
    {
        test: /@?(ui-kitten|eva-design).*\.(ts|js)x?$/,
        loader: 'babel-loader'
    }
  ]
}

@harryy2510
Copy link
Author

harryy2510 commented Apr 9, 2020

This code snippet is for webpack.config I believe instead of babel.config

For now, I've used installed @expo/webpack-config packages which let us modify the webpack file, created webpack.config at root level and added this code snippet

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@ui-kitten/components'),
                    ]
                }
            })
        }
    })
    return config;
};

I know this code snippet is not clean. Any suggestions regarding this approach are much appreciated. Thanks! :)

@artyorsh
Copy link
Collaborator

artyorsh commented Apr 9, 2020

@harryy2510 @lesmo
This is a library build issue. We moved to ts3.8 without thinking about optional chaining transpiling. Here seems like a correct way to fix this, should be done on the ui kitten side.

Thanks for sharing workarounds 👍

UPD

There is a stackoverflow answer on this issue.

Webpack uses Acorn parser, and Acorn does not support optional chaining as of now.
There is a pending pull request which you can subscribe to to get notified about the progress.

@artyorsh artyorsh added 🐛 Bug 🌐 Web react-native-web specific labels Apr 9, 2020
@the-phoenix
Copy link

@artyorsh I saw you've upgraded to ts3.8 in v5.0.0-alpha.1 release but it still didn't fix above issue.
Would you please check?

@artyorsh
Copy link
Collaborator

artyorsh commented Apr 12, 2020

@the-phoenix

@artyorsh I saw you've upgraded to ts3.8 in v5.0.0-alpha.1 release but it still didn't fix above issue.

Would you please check?

Use the workaround by @harryy2510 as a temporary solution.
This definitely will be fixed in alpha.2, but no ETAs to be honest

@temitopealabi
Copy link

@harryy2510 thanks your suggestion work for me

@harryy2510
Copy link
Author

harryy2510 commented Apr 19, 2020

Steps

  1. Install expo webpack config dependency
    npm i -D @expo/webpack-config

  2. Create webpack.config.js in the root folder of the project and add the code snippet below

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};

@artyorsh
Copy link
Collaborator

artyorsh commented Apr 26, 2020

Since this is a workaround and we can do nothing about that (excluding possible changes in the build process, which is not an issue), I think I will do nothing on this issue for the package distributed with latest npm tag (which is default when you run npm install).

Despite this, I will make a separate tag to distribute the package builded with outdated build system just to make it compatible with webpack / acorn.

The new package will be published together with v5 stable (you may track it here) and installable with
npm i @ui-kitten/components@ts3.7 until this issue will be fixed in acorn.

@harryy2510 thanks for posting the workarounds and keeping it alive 👍

@Roeefl
Copy link

Roeefl commented May 22, 2020

@harryy2510 Thanks, this solution works well.

For anyone encountering this issue, I'm just gonna lay out the entire process in steps:

  1. run expo install @expo/webpack-config
  2. create 'webpack.config.js' file at root level
  3. add the last code snippet provided by @harryy2510. that's all this file should contain

@jasuno
Copy link

jasuno commented Jun 17, 2020

@harryy2510 I added that snipped to my webpack.config.js but the problem persists, any other work around?

@harryy2510
Copy link
Author

@jasuno Can you share the screenshot of exactly what error you are getting? It maybe due to some other module and You might need to add that module too in your webpack config for babel to transform it

@jasuno
Copy link

jasuno commented Jun 17, 2020

the error says

 web  Failed to compile.
/Users/jasonmatthews/Documents/atlantaDark/node_modules/@ui-kitten/components/ui/input/input.component.js 110:38
Module parse failed: Unexpected token (110:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         this.webEventResponder = devsupport_1.WebEventResponder.create(this);
|         this.focus = () => {
>             this.textInputRef.current?.focus();
|         };
|         this.blur = () => {

my config code is set up like this in:
node_modules/@expo/webpack-config/webpack-config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const webpack = require('./webpack')


module.exports = async function(env, argv) {

    webpack.default
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};

@harryy2510
Copy link
Author

harryy2510 commented Jun 17, 2020

@jasuno
If I'm correct

  1. You've installed expo webpack config npm i -D @expo/webpack-config
  2. You've created a webpack.config.js file in the root folder of your project?
    And its content should be
const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync({
        ...env,
        babel: {
            dangerouslyAddModulePathsToTranspile: ['@ui-kitten/components']
        }
    }, argv);
    return config;
};

@jasuno
Copy link

jasuno commented Jun 17, 2020

Thank you very much that actually helped out, I was changing the one in my node modules... yeah I know a silly mistake

@adammcarth
Copy link

adammcarth commented Jul 14, 2020

This also causes issues for Jest and React Test Renderer when testing components which import anything from @ui-kitten/components.

FAIL  src/screens/Login/Login.test.tsx
  - Test suite failed to run

Jest encountered an unexpected token

Details:

    ./../node_modules/@ui-kitten/components/ui/autocomplete/autocomplete.component.js:95
                this.popoverRef.current?.show();
                                        ^

    SyntaxError: Unexpected token '.'

How on earth is TypeScript specific syntax even making it to the distribution build in the first place? That's surely not the desired output, right?

@harryy2510
Copy link
Author

@adammcarth
Hi, I think instead of accusing, we can always find a solution to the problem and alwasy praise the efforts and time UI Kitten team has put up.

Firstly, It is not a typescript specific syntax now. It has been introduced to Javascript also and you'll start to find more of this syntax in near future in almost every project. You can read more about it here - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

Secondly, What you can do is use babel transform in your jest config and use this plugin
https://babeljs.io/docs/en/next/babel-plugin-proposal-optional-chaining

@adammcarth
Copy link

Thanks for the info @harryy2510. I genuinely had no idea the ?. operator had made it to the JavaScript core 🤷‍♀️

My follow up questions are still going to be quite similar though. Why isn't UI Kitten transpiling down to ES5 JavaScript? What are the benefits of remaining at ES Next and requiring projects to use additional Babel plugins when (I assume) it could just be transpiled to ES5 for increased support and flexibility?

The reason I'm asking these questions is because I'm happy to help make those changes if it was just an initial oversight. They weren't meant to come off as accusations; apologies to everyone if they did 👍

@harryy2510
Copy link
Author

@adammcarth
I think UI Kitten team will be better able to answer this question. No hard feelings though :)

@Pfurr
Copy link

Pfurr commented Jul 29, 2020

@adammcarth
I think UI Kitten team will be better able to answer this question. No hard feelings though :)

i have some error. I'm not working with expo. Any fix?

Ps. "@ui-kitten/components": "^5.0.0"

@Pfurr
Copy link

Pfurr commented Jul 29, 2020

@artyorsh i fix, thank you for support! Ps. I'm working with next js and rnw and kitten ui

@jmakGH
Copy link

jmakGH commented Aug 1, 2020

Is anyone else running into this issue when using Typescript and Expo?

@0plus1
Copy link

0plus1 commented Mar 4, 2021

After following @harryy2510 I now get:

Module parse failed: Unexpected token (1:7)
File was processed with these loaders:
 * ../../../babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
> export ActivityBar from "./ActivityBar";
| export ReactionBar from "./ReactionBar";

@darcstar-solutions
Copy link

Adding the following underneath the "web" key in app.json also resolves the issue:
"build": { "babel": { "include": [ "@ui-kitten/components" ] }

@LadislavBohm
Copy link

It would be great if someone know how to configure webpack on an app without Expo.

@siarheipashkevich
Copy link

Hi @harryy2510 I've followed your steps, but I'm getting an error:

(node:22535) UnhandledPromiseRejectionWarning: TypeError: tapable_1.AsyncSeriesWaterfallHook is not a constructor

@atemp21
Copy link

atemp21 commented Mar 25, 2021

It would be great if someone know how to configure webpack on an app without Expo.

Here's how to configure webpack with expo.

first, run npm install @expo/webpack-config

create a webpack.config.js file in the root of your app

paste this:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@ui-kitten/components'),
                    ]
                }
            })
        }
    })
    return config;
};

now you should be able to setup your App.js or App.tsx file with ui-kitten and eva.

@LadislavBohm
Copy link

@pabariyash Why are you posting this here when you are using angular? This is an issue with a specific library for React Native and has nothing to do with your setup and framework.

oussa added a commit to oussa/react-native-ui-kitten that referenced this issue Nov 29, 2021
In order to solve the bug that you bump into as soon as you add `ui-kitten` library to an expo project and try to see the the project in Expo for Web, this super clean solution needs to be part of the docs, thus this PR. akveo#996 (comment)
@elisjoaquim
Copy link

Thanks @harryy2510 ! Yoursuggestions works great.

@belaziv
Copy link

belaziv commented Dec 29, 2021

Adding the following underneath the "web" key in app.json also resolves the issue:
"build": { "babel": { "include": [ "@ui-kitten/components" ] }

@darcstar-solutions Can you please specify where exactly to add it? ty

@belaziv
Copy link

belaziv commented Dec 30, 2021

If I add that I get the following error:

ERROR in ./src/App.tsx 29:2
Module parse failed: Unexpected token (29:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const HomeScreen = () => (
>   <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|     <Text category='h1'>HOME</Text>
|   </Layout>
 @ ./src/index.tsx 2:0-24 4:43-46

Any idea?

@shamaz332
Copy link

change react-scripts version in package.json to "react-scripts": "^4.0.3" . create-react-app is not pulling the correct version that's why you are facing this issue.

@AnkittSharmaa
Copy link

./src/Checkout.js 59:21
Module parse failed: Unexpected token (59:21)
You may need an appropriate loader to handle this file type.
|       columnNumber: 11
|     }
>   }, "Hello, ", user**?**.email), /*#__PURE__*/React.createElement("h2", {
|     className: "checkout__title",
|     __self: this,

I am getting this error in my console.

@harryy2510
Copy link
Author

./src/Checkout.js 59:21
Module parse failed: Unexpected token (59:21)
You may need an appropriate loader to handle this file type.
|       columnNumber: 11
|     }
>   }, "Hello, ", user**?**.email), /*#__PURE__*/React.createElement("h2", {
|     className: "checkout__title",
|     __self: this,

I am getting this error in my console.

Are you trying to use h2 in react native code? 🤔

@harryy2510
Copy link
Author

If I add that I get the following error:

ERROR in ./src/App.tsx 29:2
Module parse failed: Unexpected token (29:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| const HomeScreen = () => (
>   <Layout style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|     <Text category='h1'>HOME</Text>
|   </Layout>
 @ ./src/index.tsx 2:0-24 4:43-46

Any idea?

Did you try this?
#996 (comment)

@Athiban-32
Copy link

🐛 Bug Report

Not able to build code

image

image

UI Kitten and Eva version

Package Version
@eva-design/eva ^2.0.0-alpha.1
@ui-kitten/components ^5.0.0-alpha.1

Environment information

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 13.9.0 - ~/.nvm/versions/node/v13.9.0/bin/node
    Yarn: 1.22.4 - ~/.yvm/shim/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.9.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 27, 28
      Build Tools: 27.0.3, 28.0.3, 29.0.3
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  npmPackages:
    react: ~16.13.1 => 16.13.1 
    react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4 

Screenshot 2022-08-15 003934

the same error has occurred for me right now !! could you please resolve my bugs so that it would be helpful for me

@Athiban-32
Copy link

Can Anyone say why this error is occurring in the code and I fixed it by adding webpack-config.js after that also the code is showing an error...

@Engr-hmzeshan
Copy link

Module Parse Failed Error!

@Engr-hmzeshan
Copy link

I have stuck with the module parse failed error while adding Toast-Notification in my react-app.
Please help me out! if anyone has any idea about handling this error

@jbmarflo
Copy link

jbmarflo commented Feb 9, 2023

This code snippet is for webpack.config I believe instead of babel.config

For now, I've used installed @expo/webpack-config packages which let us modify the webpack file, created webpack.config at root level and added this code snippet

const createExpoWebpackConfigAsync = require('@expo/webpack-config');
const path = require('path')

module.exports = async function(env, argv) {
    const config = await createExpoWebpackConfigAsync(env, argv);
    config.module.rules.forEach(r => {
        if (r.oneOf) {
            r.oneOf.forEach(o => {
                if (o.use && o.use.loader && o.use.loader.includes('babel-loader')) {
                    o.include = [
                        path.resolve('.'),
                        path.resolve('node_modules/@ui-kitten/components'),
                    ]
                }
            })
        }
    })
    return config;
};

I know this code snippet is not clean. Any suggestions regarding this approach are much appreciated. Thanks! :)

Hi, I have the same error but with NUXT. I put @expo/webpack-config and created webpack.config. But not work yet.

image
image

@abhijith1741
Copy link

hey while importing query-string in react it showing an error:
./node_modules/query-string/base.js 424:161
Module parse failed: Unexpected token (424:161)
File was processed with these loaders:

  • ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    |
    | return {
url: ((_url_ = url_) === null || _url_ === void 0 ? void 0 : (_url_$split = _url_.split('?')) === null || _url_$split === void 0 ? void 0 : _url_$split[0]) ?? '',

| query: parse(extract(url), options),
| ...(options && options.parseFragmentIdentifier && hash ? {

@Karthikaddagalla
Copy link

Thanks @harryy2510 it works. For anyone to whom his solution is not working. Dont forget to replace the package name inside
dangerouslyAddModulePathsToTranspile key.

        dangerouslyAddModulePathsToTranspile: ['@package_name']

@NabiiBux
Copy link

I am getting this error Please Help me to Fix This on Windows 10
while running the command Npm Start or Yarn Start

Node version. v18.16.1
Npm Version. 9.5.1
Yarn Version. 1.22.19

Failed to compile.
./node_modules/@noble/curves/abstract/weierstrass.js 1016:57
Module parse failed: Unexpected token (1016:57)
File was processed with these loaders:

  • ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | const u1 = modN(h * is); // u1 = hs^-1 mod n
    | const u2 = modN(r * is); // u2 = rs^-1 mod n
const R = Point.BASE.multiplyAndAddUnsafe(P, u1, u2)?.toAffine(); // R = u1⋅G + u2⋅P

| if (!R) return false;
| const v = modN(R.x);

123

@JeffXu1
Copy link

JeffXu1 commented Jan 17, 2024

I am getting this error Please Help me to Fix This on Windows 10 while running the command Npm Start or Yarn Start

Node version. v18.16.1 Npm Version. 9.5.1 Yarn Version. 1.22.19

Failed to compile. ./node_modules/@noble/curves/abstract/weierstrass.js 1016:57 Module parse failed: Unexpected token (1016:57) File was processed with these loaders:

  • ./node_modules/babel-loader/lib/index.js
    You may need an additional loader to handle the result of these loaders.
    | const u1 = modN(h * is); // u1 = hs^-1 mod n
    | const u2 = modN(r * is); // u2 = rs^-1 mod n
const R = Point.BASE.multiplyAndAddUnsafe(P, u1, u2)?.toAffine(); // R = u1⋅G + u2⋅P

| if (!R) return false; | const v = modN(R.x);

123

do you solve this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug 🌐 Web react-native-web specific
Projects
None yet
Development

No branches or pull requests