Unexpected token <Text>

[MitchEff]

I've spent days and days now trying to get this to run. I'm not clear whether the documentation is inaccurate, or project is just haunted, or what.

Every time someone raises an issue like this the official response is just "something's up with your Webpack". I've followed every configuration possible on the internet identically, and just get the same error:

ERROR in ./src/App.js 155:3
Module parse failed: Unexpected token (155:3)
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 (!fontsLoaded) {
| 		return (
> 			<Text>
| 				Loading fonts.
| 			</Text>
 @ ./index.web.js 1:209-229

I honestly don't have a clue what else to try. Does anyone at all see anything wrong with this Webpack set-up?

const path = require('path');
const webpack = require('webpack');

const appDirectory = path.resolve(__dirname, '../');

// This is needed for webpack to compile JavaScript.
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// node_module.
const babelLoaderConfiguration = {
  test: /.js$/,
  // Add every directory that needs to be compiled by Babel during the build.
  include: [
    path.resolve(appDirectory, 'index.web.js'),
    path.resolve(appDirectory, 'node_modules/react-native-uncompiled')
  ],
  use: {
    loader: 'babel-loader',
    options: {
      cacheDirectory: false,
      // Babel configuration (or use .babelrc)
      // This aliases 'react-native' to 'react-native-web' and includes only
      // the modules needed by the app.
      plugins: ['react-native-web'],
      // The 'react-native' preset is recommended to match React Native's packager
      presets: ['react-native']
    }
  }
};

// This is needed for webpack to import static images in JavaScript files.
const imageLoaderConfiguration = {
  test: /.(gif|jpe?g|png|svg)$/,
  use: {
    loader: 'url-loader',
    options: {
      name: '[name].[ext]'
    }
  }
};

module.exports = {
  // your web-specific entry file
  entry: path.resolve(appDirectory, 'index.web.js'),

  // configures where the build ends up
  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'dist')
  },

  // ...the rest of your config

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration
    ]
  },

  plugins: [
    // process.env.NODE_ENV === 'production' must be true for production
    // builds to eliminate development checks and reduce build size. You may
    // wish to include additional optimizations.
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
      DEV: process.env.NODE_ENV === 'production' || true
    })
  ],

  resolve: {
    // If you're working on a multi-platform React Native app, web-specific
    // module implementations should be written in files using the extension
    // .web.js.
    extensions: ['.web.js', '.js']
  }
}

[github-actions]

⚠️ This issue is missing required fields. To avoid this issue being closed, please provide the required information as described in the ISSUE TEMPLATE.

[necolas]

https://necolas.github.io/react-native-web/docs/multi-platform/#compiling-and-bundling

You will need the react preset which is included in the RN one