Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Syntax Error in styles.js -> 'styles' is not defined

See original GitHub issue

Describe the bug styles.js is exporting something that hasn’t been defined

To Reproduce Steps to reproduce the behavior:

Import component from library
Start application/load component that’s importing the OTPInput

Expected behavior N/A

Screenshots

Smartphone (please complete the following information):

Device: Virtual/Simulated
OS: os x 10.15.1
Browser: Firefox
Version: 73.0.1

Additional context Using Expo 36.0.0 with some babel overrides:

/* eslint-disable @typescript-eslint/no-var-requires */
module.exports = function(api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['babel-plugin-graphql-tag', { importName: 'graphql-tag-ts' }],
      '@babel/plugin-transform-modules-commonjs',
      [
        'babel-plugin-styled-components',
        {
          displayName: true
        }
      ]
    ],
    env: {
      production: {
        plugins: ['react-native-paper/babel']
      }
    }
  }
}

Issue Analytics

State:
Created 4 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

baronhacommented, Mar 17, 2020

I edit in node_modules @twotalltotems/react-native-otp-input/styles.js. I relace ‘export default StyleSheet.create’ instead of export default styles = StyleSheet.create. This is a basic error

1reaction

BeckyWu220commented, Apr 2, 2020

Fixed in PR https://github.com/tttstudios/react-native-otp-input/pull/48

Top Results From Across the Web

Syntax error in styles class React - Stack Overflow

I'm getting a syntax error when trying to create a variable for a component style. I've read the documentation over and over and...

ReferenceError: "x" is not defined - JavaScript - MDN Web Docs

The JavaScript exception "variable is not defined" occurs when there is a non-existent variable referenced somewhere.

Troubleshooting Common Errors - Gatsby

Errors in styling. The following errors are related to styles in your site, using CSS, preprocessors, or CSS-in-JS solutions.

Solving the React Error: Not Picking Up CSS Style | Pluralsight

Here, the CSS file is saved outside the src folder, so the compiler failed to import it. To make this code work, you...

style-loader - webpack

Behavior is undefined when unuse is called more often than use . Don't do that. component.js import styles from "./styles.lazy.css"; styles.use(); ...