react-voice-components icon indicating copy to clipboard operation
react-voice-components copied to clipboard

Module parse failed

Open tjiang11 opened this issue 7 years ago • 10 comments

Hi everyone, I'm having trouble importing VoicePlayer into my project. Anyone know what the problem is? This is the error I get.

I'm trying to get this to work in a project made with create-react-app

error repro: https://github.com/tjiang11/react-bug-repro

./~/react-voice-components/lib/VoicePlayer.js
Module parse failed: /home/tjiang11/Documents/Projects/lingua/node_modules/react-voice-components/lib/VoicePlayer.js Unexpected token (19:15)
You may need an appropriate loader to handle this file type.
|   }
| 
|   createSpeech = () => {
|     const defaults = {
|       text: '',

tjiang11 avatar May 31 '17 19:05 tjiang11

@tjiang11 it might have something to do with the source code of this library not being compiled to ES5

cr101 avatar Jun 01 '17 10:06 cr101

I'm not sure how to do the compiling thing but I fixed this by rewriting all functions to this form

createSpeech() { const defaults = { text: '',

I also had to import both the VoicePlayer and VoiceRecognition in order to use either of them.

import {VoicePlayer, VoiceRecognition} from 'react-voice-components';

v-stickykeys avatar Sep 22 '17 17:09 v-stickykeys

@tjiang11 I had the same problem, i resolved it by adding the /(?!react-voice-components)/ to my exclude line in my webpack.config.

it's referenced here https://github.com/webpack/webpack/issues/2031

{
  test: /\.jsx?$/,
  exclude: /node_modules\/(?!react-voice-components)/,
  use: [
    'babel-loader',
  ],
}

sho13 avatar Oct 06 '17 17:10 sho13

@sho13 Would it be possible for me to see your whole config file?

DamnedScholar avatar Jan 05 '18 03:01 DamnedScholar

Copy VoiceRecognition.js, VoicePlayer.js in you src folder. And import them from there. You might have to add a loader in webpack file also (or rewriting all functions to this form createSpeech() { const defaults = { text: '', )

jangidhitesh avatar Jan 05 '18 13:01 jangidhitesh

I solved it by importing them with a loader directive:

import { VoicePlayer, VoiceRecognition } from 'babel-loader!react-voice-components'

DamnedScholar avatar Jan 07 '18 19:01 DamnedScholar

I forked this module and fixed the ES5 incompatability by rewriting the functions in the same way as @thevaleriemack .

I have made a pull request for the fixes, but in the meantime, you can fork my repo from here: https://github.com/bchang1213/react-voice-components

sazokashi avatar Mar 07 '18 07:03 sazokashi

@bchang1213 Your fix worked for me

stahlmanDesign avatar Mar 20 '18 05:03 stahlmanDesign

@jangidhitesh your fix worked for me, but I had to modify the code in VoicePlayer.js by removing references to the end method, which doesn't exist for speechsynthesis.

MonaTem avatar Mar 31 '18 13:03 MonaTem

@tjiang11 your fix worked for me. Thanks.

flamincode avatar Sep 24 '18 20:09 flamincode