You may need an appropriate loader to handle this file type: @expo/vector-icons/build/createIconSet.js

losintikfos commented 2 years ago

Any idea why I am getting below error during npm run dev. Using react: ^18.2.0, next: ^12.2.0 and @expo/vector-icons: ^13.0.0.

error - ./node_modules/@expo/vector-icons/build/createIconSet.js
Module parse failed: Unexpected token (39:27)
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
|                 }
|                 if (!this.state.fontIsLoaded) {
>                     return <Text />;
|                 }
|                 return (<RNVIconComponent ref={(view) => {

ernoaapa commented 2 years ago

I have same problem when using storybook and writing story for component that includes some icon (for example <Ionicons/>

bombillazo commented 1 year ago

Hitting this error as well.

UPDATE We are getting this error when we upgraded from "@expo/next-adapter": "4.0.13" to "@expo/next-adapter": "5.0.0"

saeedblanchette commented 1 year ago

I have the same I issue here, any updates

wesvance commented 1 year ago

+1 on this; anyone find a work around?

dezerb commented 1 year ago

@losintikfos any updates?

oussamabenkortbi commented 1 year ago

i can't believe that after a year of opening this, people (including me) are still not finding a solution!

i tried every next.config.js transpile with no success

deeeed commented 1 year ago

+1...

trymbill commented 1 year ago

Downgrading to @expo/next-adapter v4.0.13 doesn't seem to fix this. Are there really no solutions for this out there?

discodane commented 1 year ago

It seems without a proper fix, the lot of you might've found a work around? Any suggestions?

landonwjohnson commented 1 year ago

I am still getting this error

andrew-bierman commented 10 months ago

Same issue here, if anyone finds a workaround for this please share

MikeJWms commented 10 months ago

I am also experiencing this problem.

gregoire-jianda commented 10 months ago

I faced the same issue using :

"expo": "^49.0.0"
"react": "18.2.0"
"next": "^14.0.3"

Only on web, native seems to run fine. From what I gathered, I believe upgrading to "@expo/next-adapter": "^5.0.2" was what triggered the issue for me.

I finally got it working after banging my head in several walls. The root cause is still unclear to me and I can't claim the workaround is perfect at all, but hopefully it can help :

Again, this workaround targets your web stack, assuming the native one is running fine.

Explicitely add react-native-vector-icons

yarn add react-native-vector-icons

Edit your next.config.js file :


const nextConfig = {
webpack: (config, options) => {
config.resolve.alias = {
  ...(config.resolve.alias || {}),
  'react-native$': 'react-native-web',
  '@expo/vector-icons': 'react-native-vector-icons',
}
config.module.rules.push({
  test: /\.ttf$/,
  type: 'asset/resource',
})
return config
},
transpilePackages: [
'react-native',
'react-native-web',
// Whatever modules you already transpile, the important part is to add react-native-vector-icons
'react-native-vector-icons',
],
}

module.exports = withExpo(nextConfig)


**At this point, you should be able to run Next.** However, icons are not loaded. We solve that in step 3.

3. Edit your `_app.tsx` (or `.jsx`)

Import the icon font(s) you intend to use :

import iconFont from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf'

const iconFontStyles = @font-face { src: url(${iconFont}); font-family: MaterialCommunityIcons; }


And add the font-face declaration in your `<Head>` component :

expo / vector-icons

You may need an appropriate loader to handle this file type: @expo/vector-icons/build/createIconSet.js #226