Question 198511 in React native Question posted in
The official React Native documentation can be found here.

Cannot import react native API because of module parse error

I tried to import react-native-lyric inside MUI box but got error shown below when I run npm web start.

Failed to compile.

Module parse failed: Unexpected token (1:7)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export type {LrcLine} from './constant';
| 
| export {default as Lyric} from './components/lyric';
ERROR in ./node_modules/react-native-lyric/src/index.ts 1:7
Module parse failed: Unexpected token (1:7)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> export type {LrcLine} from './constant';
| 
| export {default as Lyric} from './components/lyric';

To fix the issue I tried making the following change to package.json

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }

Run npm cache clean --force and rm -rf node_modules && rm -f package-lock.json && npm i
still the same error.

Tags:

2

Answers


  1. 0

    I think you can try adding the babel-loader to your project if it’s not already included, so install it like below

    npm install babel-loader --save-dev

    or

    yarn add babel-loader --dev

    and make sure it is properly configured in your webpack or babel configuration, and also make sure that you have the latest versions of the loaders you are using in your project because outdated loaders might have compatibility issues!
    you can update the loaders by running

    npm update

    or

    yarn upgrade

    also check your tsconfig.json file and make sure that the necessary TypeScript options are set, such as the target version and module resolution!

    good luck !

    Login or Signup to reply.
  2. 0

    It seems like the react-native-lyric package you’re trying to import might not be compatible with the version of Node.js you’re using. Check the package’s documentation and the release notes to see if there are any specific requirements or compatibility issues for your Node.js version.

    Additionally, you might want to try clearing the cache and reinstalling the package using the following commands:

    npm cache clean --force
rm -rf node_modules
npm i

    Or if that doesn’t work, try uninstalling and reinstalling the entire package:

    npm cache clean --force
npm uninstall react-native-lyric -S
rm -rf node_modules/react-native-lyric
npm install

    And also make sure your Node.js version is the latest that is available:

    # Using a package called "n"
npm install n -g

# Update Node.js to the latest version
n latest

# Update NPM to the latest version
npm install npm -g

    If you’re still encountering the same error, you can try starting an "Issue" on the package’s GitHub. The owner might be able to provide more insight into the specific issue and provide solutions to resolve it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search