天道酬勤,学无止境

Module parse failed

I'm going to port GiftedMessanger on web.

I'm stuck on an error in Webpack bundle:

Krishti:react-native-web-exploding-hearts-master MacBook$ npm run web-bundle

> react-native-web-exploding-hearts@0.0.1 web-bundle /Users/MacBook/WebWork/ReactWeb/react-native-web-exploding-hearts-master
> NODE_ENV=production webpack --config web/webpack.config.js --colors

Crawl: 6012ms
Hash: d8df1262d7af54a6c6cd
Version: webpack 1.12.10
Time: 10949ms
   [0] multi main 28 bytes {0} [built]
    + 339 hidden modules

ERROR in ./~/react-native-gifted-messenger/GiftedMessenger.js
Module parse failed: /Users/MacBook/WebWork/ReactWeb/react-native-web-exploding-hearts-master/node_modules/react-native-gifted-messenger/GiftedMessenger.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, {
|   Text,
|   View,
 @ ./GiftedMessengerContainer.js 19:22-62

I don't know what exactly the problem is. My webconfig file is

   'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlPlugin = require('webpack-html-plugin');
var HasteResolverPlugin = require('haste-resolver-webpack-plugin');

var IP = '0.0.0.0';
var PORT = 3000;
var NODE_ENV = process.env.NODE_ENV;
var ROOT_PATH = path.resolve(__dirname, '..');
var PROD = 'production';
var DEV = 'development';
let isProd = NODE_ENV === 'production';

var config = {
  paths: {
    src: path.join(ROOT_PATH, '.'),
    index: path.join(ROOT_PATH, 'index.ios'),
  },
};

module.exports = {
  ip: IP,
  port: PORT,
  devtool: 'source-map',
  resolve: {
    alias: {
      'react-native': 'react-web',
    },
    extensions: ['', '.js', '.jsx'],
  },
  entry: isProd? [
    config.paths.index
  ]: [
    'webpack-dev-server/client?http://' + IP + ':' + PORT,
    'webpack/hot/only-dev-server',
    config.paths.index,
  ],
  output: {
    path: path.join(__dirname, 'output'),
    filename: 'bundle.js'
  },
  plugins: [
    new HasteResolverPlugin({
      platform: 'web',
      nodeModules: ['react-web']
    }),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(isProd? PROD: DEV),
      }
    }),
    isProd? new webpack.ProvidePlugin({
      React: "react"
    }): new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlPlugin(),
  ],
  module: {
    loaders: [{
      test: /\.json$/,
      loader: 'json',
    }, {
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel?stage=1'],
      include: [config.paths.src],
      exclude: [/node_modules/]
    }, {
        test: /\.es6\.js$/, loader: "babel-loader",
        query: {
          presets: ['es2015']
        }
      }]
  }
};

My GiftedMessenger.js is

import React, {
  Text,
  View,
  ListView,
  TextInput,
  Dimensions,
  Animated,
  Platform,
  PixelRatio,
  Component,
} from 'react-native';

import Message from './Message';
import GiftedSpinner from 'react-native-gifted-spinner';
import moment from 'moment';
import {setLocale} from './Locale';
import deepEqual from 'deep-equal';
import Button from 'react-native-button';

class GiftedMessenger extends Component {

  constructor(props) {..... many code stuff

My GiftedMessengerContainer.js is

'use strict';
var React = require('react-native');
import React, {
  Linking,
  Platform,
  ActionSheetIOS,
  Dimensions,
  View,
  Text,
  //Navigator,
  Component,
} React;

var GiftedMessenger = require('react-native-gifted-messenger');
var Communications = require('react-native-communications');


// var STATUS_BAR_HEIGHT = Navigator.NavigationBar.Styles.General.StatusBarHeight;
// if (Platform.OS === 'android') {
//   var ExtraDimensions = require('react-native-extra-dimensions-android');
//   var STATUS_BAR_HEIGHT = ExtraDimensions.get('STATUS_BAR_HEIGHT');
// }


class GiftedMessengerContainer extends Component {
.
.
.
code stuff

Where exactly am I going wrong?

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 从命令行运行 Python 时导入 urllib.parse 失败(import urllib.parse fails when Python run from command line)
    问题 我在 python 3.4.2 中观察到以下行为,我无法解释。 希望有人可以对此事有所了解: 在 IPython 中: In [129]: import urllib In [130]: print(urllib.parse) <module 'urllib.parse' from '/Users/ashwin/.pyenv/versions/3.4.2/lib/python3.4/urllib/parse.py'> 我导入了一个模块,并打印了它的一个属性。 一切都按预期工作。 到目前为止,生活还不错。 现在,我从命令行做同样的事情: $ python -c 'import urllib; print(urllib.parse)' Traceback (most recent call last): File "<string>", line 1, in <module> AttributeError: 'module' object has no attribute 'parse' 说什么?! 这不是应该的工作方式。 好吧,也许这是一个 python 范围的行为; 使用-c标志时,可能不会立即导入模块。 让我们尝试另一个模块: $ python -c 'import datetime; print(datetime.datetime)' <class 'datetime
  • ERROR in ./ansi-html 1:0 Module parse failed: Unexpected character '#' (1:0)
    I am learning angular js. When I run ng serve --open I get below error ERROR in ./ansi-html 1:0 Module parse failed: Unexpected character '#' (1:0) You may need an appropriate loader to handle this file type > #!/bin/sh | basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") angular CLI version is 6.2.0 node version is 8.11.4 npm version is 6.4.1 ansi-html file is as #!/bin/sh basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") case `uname` in *CYGWIN*) basedir=`cygpath -w "$basedir"`;; esac if [ -x "$basedir/node" ]; then "$basedir/node" "$basedir/node_modules/ansi-html/bin/ansi-html" "$@"
  • Webpack@4.0.0: “Module parse failed. You may need an appropriate loader to handle this file type” - though using css-loader and style-loader
    Below is my webpack.config.js and the package.json module.exports = { entry: "./entry.js", output: { filename: "./build/js/bundle.js" }, module: { rules: [ { test: /.\js$/, use: [ { loader: 'babel-loader', options: { presets: ["es2015"] } } ] }, { test: /.\css?$/, include: __dirname + "./src/css", exclude: __dirname + "./src/js", use: [ 'style-loader', { loader: 'css-loader', options: { modules: true } } ] } ] }, plugins: [ // new UglifyJsPlugin() ] } "dependencies": { "ajv-keywords": "^3.1.0", "ajv": "^6.0.0", "axios": "^0.17.1", "babel-minify-webpack-plugin": "^0.3.0", "extract-text-webpack
  • Webpack 4 - Module parse failed: Unexpected character '@'
    I recently upgraded from Webpack 3 to 4. It's now throwing an error: Module parse failed: Unexpected character '@' You may need an appropriate loader to handle this file type. | @import './scss/variables.scss'; | | * { @ ./src/index.js 1:0-22 In my styles.scss file, I am doing the following: @import 'scss/variables.scss'; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } In my index.js file, I am only doing the following: import './style.scss'; In my webpack.dev.js, all I changed was an addition of mode: 'development': const
  • webpack module parse failed Unexpected character '@'
    I am working with vue-cli, after import a css file in main.js, import Vue from 'vue' import App from './App.vue' import 'element-ui/lib/theme-default/index.css' import ElementUI from 'element-ui' Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }) the console logged an error and failed to render VM818:1Uncaught Error: Module parse failed: C:\02-folks\new-version\vueproject\fademo01\node_modules.1.0.2@element-ui\lib\theme-default\index.css Unexpected character '@'... I have installed the style-loader and css loader Here is the package.json file { "name": "fademo01", "description":
  • fsevents causes Module parse failed: Unexpected character '�'
    I am using next.js and I get: Failed to compile. ./node_modules/fsevents/fsevents.node 1:0 Module parse failed: Unexpected character '�' (1:0) 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 (Source code omitted for this binary file) I tried almost everything, most recently, to package.json, I added: "optionalDependencies": { "fsevents": "^2.1.3" } In next.config.js, I have: const withImages = require("next-images"); const withPlugins = require("next-compose-plugins"); const
  • How to fix Module parse failed: Unexpected token?
    When I run npm run build I got this error: ERROR in ./src/client.js 7:2 Module parse failed: Unexpected token (7:2) File was processed with these loaders: * ./node_modules/jshint-loader/index.js You may need an additional loader to handle the result of these loaders. | | const component = ( > <Router history={browserHistory}> | {routes} | </Router> @ multi babel-polyfill ./src/client.js main[1] ./src/client.js (with warning for browserHistory -- Cannot resolve symbol 'browserHistory' ) import React from 'react'; import ReactDOM from 'react-dom'; import { browserHistory, Router } from 'react
  • Running gunjs with Reactjs and webpack throws Reference Error in console
    I am trying to install gun.js and run it inside a Reactjs webpack bundled app var path = require('path'), webpack = require('webpack'); module.exports = { devtool: 'source-map', target: 'node', node: { fs: 'empty' }, entry: { workboard: './src/workboard/main.js' }, output: { path: __dirname, filename: '/public/[name]/js/bundle.js' }, module: { loaders: [ { test: /.js?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react', 'stage-2', 'stage-1'] } } ], noParse: [/aws-sdk/] }, plugins: [ new webpack.DefinePlugin({ "global.GENTLY": false }) ] }; package.json
  • Maven: set property in pom.xml from properties file
    I have multi-module project with a lot of dependencies on different modules versions. At the moment versions are hardcoded and one needs to change them manually. So I decided to put all of them to a properties file and get properties values from it during project build. Here is how I try to do it: root pom.xml <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>properties-maven-plugin</artifactId> <version>1.0-alpha-2</version> <executions> <execution> <phase>initialize</phase> <goals> <goal>read-project-properties</goal> </goals> <configuration> <files> <file>./version.properties</file>
  • Angular 4 ng2-bootstrap-modal error: Module parse failed,Unexpected token
    I'm trying to deploy an angular 4 + webpack app and got this error on build ERROR in ./$$_gendir/~/ng2-bootstrap-modal/dist/dialog-wrapper.component.ngfactory.ts Module parse failed: D:\myapp\$$_gendir\node_modules\ng2-bootstrap-modal\dist\dialog-wrapper.component.ngfactory.ts Unexpected token (12:35) You may need an appropriate loader to handle this file type. | import * as i1 from 'ng2-bootstrap-modal/dist/dialog-wrapper.component'; | import * as i2 from 'ng2-bootstrap-modal/dist/dialog.service'; | const styles_DialogWrapperComponent:any[] = ([] as any[]); | export const RenderType
  • Webpack 4 Module parse failed: Unexpected character '@' (1:0)
    I get this error when i try to run npm run dev to compile my scss to css. I know that issue is related to @import ERROR in ./src/scss/main.scss Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. | @import "header"; @ ./src/index.js 3:0-27 src/index.js import "./scss/main.scss"; src/scss/main.sccs @import "header"; webpack.config.js ` const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const WebpackMd5Hash = require('webpack-md5-hash'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"
  • webpack 模块解析失败意外字符“@”(webpack module parse failed Unexpected character '@')
    问题 我正在使用 vue-cli,在 main.js 中导入一个 css 文件后, import Vue from 'vue' import App from './App.vue' import 'element-ui/lib/theme-default/index.css' import ElementUI from 'element-ui' Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) }) 控制台记录了一个错误并且无法呈现 VM818:1Uncaught Error: Module parse failed: C:\02-folks\new-version\vueproject\fademo01\node_modules.1.0.2@element-ui\lib\theme-default\index.css Unexpected character '@'.. . 我已经安装了 style-loader 和 css loader 这是 package.json 文件 { "name": "fademo01", "description": "A Vue.js project", "author": "", "private": true, "scripts": { "dev": "cross
  • 引入ElementUI 日历组件报错Module parse failed: Unexpected token (65:6)
    由于业务需求,需要一个小型日历,ElementUI 组件中有一个日历组件,不过太大了,功能没有日期选择器中的日历全,所以,就想到单独引入日历选择器中中的日历组件 打开源码包找到日历组件所在位置,并引入 import DatePanel from "element-ui/packages/date-picker/src/panel/date.vue"; 果不其然,报错了 Module parse failed: Unexpected token (65:6) You may need an appropriate loader to handle this file type. | }, this.$slots.default); | const wrap = ( | <div | ref="wrap" | style={ style } 最后有人帮忙解决了 1、安装依赖 https://github.com/vuejs/babel-plugin-transform-vue-jsx npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev 2、添加vue-cli3的 vue
  • Module parse failed: Unexpected character '@' (1:0) with Storybook 6.1.11, Webpack 5.11.0, React 17.0.1
    Trying to setup a react-app with all latest versions. Github Repo Link Trying to run storybook with sass file imported will result in below error. Trying to run without importing the styles, storybook works. The same code works correctly when its run as npm start run with no warnings and errors. I have configured css modules using @dr.pogodin/babel-plugin-react-css-modules with sass, webpack 5, react 17 and with latest packages. ERROR in ./src/assets/stylesheets/app.scss 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type
  • Module parse failed: Unexpected token (11:19)
    web Failed to compile. C:/XXX/node_modules/galio-framework/src/Toast.js 11:19 Module parse failed: Unexpected token (11:19) 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 | | class Toast extends Component { static propTypes = { | children: PropTypes.node.isRequired, | isShow: PropTypes.bool.isRequired, { "name": "Bay", "version": "1.3.0", "description": "Desc", "scripts": { "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios",
  • import urllib.parse fails when Python run from command line
    I have observed the following behavior in python 3.4.2, and I am unableto explain it. Hopefully someone could shed some light on the matter: In IPython: In [129]: import urllib In [130]: print(urllib.parse) <module 'urllib.parse' from '/Users/ashwin/.pyenv/versions/3.4.2/lib/python3.4/urllib/parse.py'> I've imported a module, and printed one of its attributes. Everything works as expected. So far, life is good. Now, I do the same thing from the command line: $ python -c 'import urllib; print(urllib.parse)' Traceback (most recent call last): File "<string>", line 1, in <module> AttributeError:
  • How can I solve the Module parse failed: Unexpected token (11:9) react-router-native
    I installed react-native-router using yarn and just on importing NativeRouter This is how I import from react-router-native import { NativeRouter, Route, Link } from "react-router-native"; This is the error I get D:/WORKSHOP/Tunga/music-app/node_modules/react-router-native/NativeRouter.js 11:9 Module parse failed: Unexpected token (11:9) 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 | */ | function NativeRouter(props) { > return <MemoryRouter {...props} />; | } |
  • Why does module parse failed: /xxx/MyFont.ttf Unexpected character ''
    I encountered this error ERROR in ./src/style/MyFont.ttf Module parse failed: /xxx/MyFont.ttf Unexpected character '' (1:0) You may need an appropriate loader to handle this file type. (Source code omitted for this binary file)` when I import my custom font in my less file like this: @font-face { font-family: "MyFont"; src: url("./MyFont.ttf") format("truetype"); } my webpack config is as follow: rules: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: babelQuery },{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.less$/i, use: ExtractTextPlugin
  • React / Webpack - “Module parse failed: Unexpected token - You may need an appropriate loader to handle this file type.”
    I am trying to build a simple React app using Webpack, however during run time from the Webpack dev server I get the following error: > ERROR in ./client/components/home.js Module parse failed: Unexpected > token (8:3) You may need an appropriate loader to handle this file > type. | render(){ | return( | <h1>Hello World!</h1> | ) | } > @ ./client/app.js 13:12-43 @ multi > (webpack)-dev-server/client?http://localhost:8080 ./client/app.js Here is my Webpack.config.js file contents: var path = require('path'); var debug = process.env.NODE_ENV !== 'production'; var webpack = require('webpack')
  • Maven:从属性文件中设置pom.xml中的属性(Maven: set property in pom.xml from properties file)
    问题 我有一个多模块项目,在不同模块版本上有很多依赖性。 目前,版本已进行硬编码,因此需要手动进行更改。 因此,我决定将所有这些文件放入属性文件,并在项目构建期间从中获取属性值。 这是我尝试执行的操作: 根pom.xml <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>properties-maven-plugin</artifactId> <version>1.0-alpha-2</version> <executions> <execution> <phase>initialize</phase> <goals> <goal>read-project-properties</goal> </goals> <configuration> <files> <file>./version.properties</file> </files> </configuration> </execution> </executions> </plugin> 文件version.properties module1.version=1.1 module2.version=1.8 module3.version=5.4 pom.xml模块的示例 <properties> <module1.project.version>$