Module parse failed, but only when outside of a 'create-react-app' style app
- Dominant language
- JavaScript
- Stars
- 4.8k
- Forks
- 456
- Avg merge
- 9h 19m
- Merged PRs (30d)
- 2
Description
I'm trying to use a node module I've made in my own project. I am using Inferno, which is essentially a React clone. This module I have made works perfectly fine in a fresh, basic create-inferno-app application, but when installing and trying to use it in my real application, I get import and parse errors. I've been looking at this for so many hours and I just can't figure it out. I've tried a lot of different things.
**Here is the package.json of the node module**
```{
"_from": "git+https://github.com/jason-james/inferno-chartist.git",
"_id": "inferno-chartist@0.13.2",
"_inBundle": false,
"_integrity": "",
"_location": "/inferno-chartist",
"_phantomChildren": {},
"_requested": {
"type": "git",
"raw": "https://github.com/jason-james/inferno-chartist.git",
"rawSpec": "https://github.com/jason-james/inferno-chartist.git",
"saveSpec": "git+https://github.com/jason-james/inferno-chartist.git",
"fetchSpec": "https://github.com/jason-james/inferno-chartist.git",
"gitCommittish": null
},
"_requiredBy": [
"#USER",
"/"
],
"_resolved": "git+https://github.com/jason-james/inferno-chartist.git#47a3f7f484395ae4317d81984a2c22d59428b60c",
"_spec": "https://github.com/jason-james/inferno-chartist.git",
"_where": "C:\\Users\\Jason\\inferno-projects\\my-app",
"author": {
"name": "Jason James",
"email": "jason@iotxplorer.io",
"url": "iotxplorer.io"
},
"babel": {
"presets": [
"react",
"es2015",
"stage-0"
]
},
"bugs": {
"url": "https://github.com/jason-james/inferno-chartist/issues"
},
"bundleDependencies": false,
"dependencies": {
"prop-types": "^15.5.8"
},
"deprecated": false,
"description": "Inferno component for Chartist.js",
"devDependencies": {
"@types/chartist": "^0.9.43",
"@types/react": "^16.7.17",
"@types/react-dom": "^16.0.11",
"babel-cli": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.16.0",
"create-inferno-app": "^7.0.6",
"cross-env": "^5.2.0",
"inferno-devtools": "^7.0.4",
"inferno-router": "^7.0.4",
"inferno-scripts": "7.0.4",
"inferno-test-utils": "^7.0.4"
},
"homepage": "https://github.com/jason-james/inferno-chartist/",
"keywords": [
"inferno",
"inferno-component",
"component",
"chartist",
"graph"
],
"license": "MIT",
"main": "dist/index.js",
"name": "inferno-chartist",
"peerDependencies": {
"chartist": "^0.10.1",
"react": "^0.14.9 || ^15.0.0 || ^16.0.0",
"inferno": "^7.0.4",
"inferno-shared": "^7.1.7",
"inferno-create-element": "^7.0.4"
},
"repository": {
"type": "git",
"url": "git://github.com/jason-james/inferno-chartist.git"
},
"scripts": {
"build": "mkdir -p dist && babel index.js -o dist/index.js && cp index.d.ts dist/index.d.ts",
"prepublishOnly": "npm run build"
},
"version": "0.13.2"
}
```
**Here is the package.json of the simple app, which the module works fine with**
```{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"chartist": "^0.11.0",
"inferno": "^7.1.10",
"inferno-chartist": "git+https://github.com/jason-james/inferno-chartist.git",
"inferno-clone-vnode": "^7.1.10",
"inferno-compat": "^7.1.10",
"inferno-component": "^7.1.10",
"inferno-dom": "^1.0.7",
"inferno-scripts": "7.0.4"
},
"scripts": {
"start": "inferno-scripts start",
"build": "inferno-scripts build",
"test": "inferno-scripts test",
"eject": "inferno-scripts eject"
},
"eslintConfig": {
"extends": "inferno-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
```
**Here is the package.json for the app which it is not working with**
```{
"name": "@iotex/iotex-explorer",
"version": "0.1.1",
"description": "field_description",
"main": "server.js",
"scripts": {
"test": "npm run cover && npm run check-coverage",
"check-coverage": "nyc check-coverage --lines 50",
"ava": "NODE_ENV=test ava",
"watch": "gulp watch",
"build": "npm run bp",
"build-production": "NODE_ENV=production gulp build",
"server": "node server",
"lint": "eslint . --fix",
"cover": "NODE_ENV=test npm run lint && nyc npm run ava",
"flow": "flow",
"flow-install": "flow-typed install",
"size": "ls -lh dist/",
"bp": "npm run build-production && npm run size",
"update-idl": "barrister -t \"Explorer Interface\" -d explorer.html -j explorer.json explorer.idl",
"changelog-major": "build-changelog --major",
"changelog-minor": "build-changelog --minor",
"changelog-patch": "build-changelog --patch",
"kill": "lsof -n -i4TCP:4004 | grep LISTEN | awk '{ print $2 }' | xargs kill"
},
"ava": {
"require": [
"babel-register",
"babel-polyfill"
],
"babel": {
"extends": "./.babelrc"
},
"files": [
"src/**/*.test.js"
]
},
"nyc": {
"include": [
"src/**/*.js"
],
"exclude": [
"src/server/gateways/coin-market-cap.js",
"src/server/gateways/wallet-core/rpc_pb.js",
"src/server/gateways/wallet-core/rpc_grpc_pb.js",
"src/server/gateways/wallet-core/wallet-core.js",
"src/server/gateways/iotex-core/iotex-core.js",
"src/**/*.test.js",
"src/**/__tests__/**"
],
"reporter": [
"lcov",
"text",
"text-summary"
],
"extension": [
".jsx"
],
"cache": true,
"temp-directory": "./coverage/.nyc_output"
},
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/iotexproject/iotex-explorer.git"
},
"keywords": [],
"author": "field_author",
"license": "UNLICENSED",
"bugs": {
"url": "https://github.com/iotexproject/iotex-explorer/issues"
},
"homepage": "https://github.com/iotexproject/iotex-explorer#readme",
"dependencies": {
"assert": "^1.4.1",
"axios": "^0.18.0",
"babel-plugin-inferno": "^3.2.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-flow-strip-types": "^6.18.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-register": "^6.24.1",
"barrister": "^0.1.8",
"bech32": "^1.1.3",
"bulma-timeline": "^3.0.1",
"chartist": "^0.11.0",
"config": "^1.26.1",
"copy-to-clipboard": "^3.0.8",
"d3": "^5.9.1",
"deep-extend": "^0.5.1",
"dotenv": "^6.2.0",
"dotty": "0.0.2",
"ethereumjs-abi": "^0.6.6",
"extend": "^3.0.0",
"form-serialize": "^0.7.2",
"fromnow": "^3.0.0",
"global": "^4.3.1",
"google-protobuf": "^3.7.0",
"grpc": "^1.19.0",
"grpc-tools": "^1.7.1",
"hex2ascii": "0.0.3",
"hex2dec": "^1.1.2",
"history": "^4.6.3",
"inferno": "^3.10.1",
"inferno-chartist": "git+https://github.com/jason-james/inferno-chartist.git",
"inferno-component": "^3.9.0",
"inferno-create-element": "^7.1.10",
"inferno-helmet": "^4.0.2",
"inferno-outside-click-handler": "^0.1.1",
"inferno-redux": "^3.9.0",
"inferno-router": "^3.10.1",
"inferno-server": "^3.9.0",
"inferno-shared": "^7.1.10",
"inferno-side-effect": "1.1.0",
"iotex-client-js": "^0.1.8",
"is-browser": "^2.0.1",
"js-sha3": "^0.8.0",
"js-yaml": "^3.12.2",
"jump.js": "^1.0.1",
"key-mirror-nested": "^1.2.4",
"koa": "^2.7.0",
"koa-bodyparser": "^4.2.1",
"koa-csrf": "^3.0.7",
"koa-helmet": "^4.1.0",
"koa-i18n": "^2.1.0",
"koa-locale": "^1.3.0",
"koa-router": "^7.2.1",
"koa-send": "^4.1.0",
"koa-session": "^5.10.1",
"load-script": "^1.0.0",
"methods": "^1.1.2",
"mysql": "^2.10.2",
"nkn-client": "^0.4.3",
"path": "^0.12.7",
"process": "^0.11.9",
"redux": "^3.5.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"request": "^2.87.0",
"request-promise-native": "^1.0.7",
"rewire": "^4.0.1",
"safe-json-globals": "^3.0.0",
"shader": "^1.0.0",
"sprintf": "^0.1.5",
"styletron-client": "^3.0.4",
"styletron-inferno": "^3.0.4",
"styletron-server": "^3.0.4",
"twilio": "^3.29.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"unfetch": "^3.1.0",
"url-join": "^2.0.2",
"uuid": "^3.3.2",
"webpack-manifest-plugin": "^2.0.3",
"winston": "^2.4.2",
"xhr": "^2.5.0"
},
"devDependencies": {
"ava": "^0.24.0",
"babel-cli": "^6.24.1",
"babel-eslint": "^8.1.2",
"babel-loader": "^7.1.2",
"build-changelog": "^2.1.2",
"del": "^3.0.0",
"eslint": "^4.4.0",
"eslint-plugin-flowtype": "^2.49.3",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-inferno": "^7.0.1",
"flow-bin": "^0.62.0",
"flow-typed": "^2.0.0",
"fs": "0.0.1-security",
"glob": "^7.1.2",
"gulp": "^3.9.1",
"gulp-livereload": "^3.8.1",
"gulp-nodemon": "^2.4.2",
"gulp-sass": "^3.1.0",
"gulp-util": "^3.0.8",
"inferno-test-utils": "^3.10.1",
"jsdom": "11.5.1",
"jsdom-global": "3.0.2",
"nyc": "^11.9.0",
"webpack": "^4.29.6",
"webpack-bundle-analyzer": "^3.1.0"
},
"engines": {
"node": "v10.14.2",
"npm": "6.4.1"
},
"private": true,
"heroku-run-build-script": true
}
```
**Here is the babelrc file of the app it is not working with:**
```{
"presets": [
"es2017",
"es2015"
],
"plugins": [
[
"inferno",
{
"imports": true,
"pragma": ""
}
],
"transform-flow-strip-types",
"transform-object-rest-spread",
"transform-class-properties"
]
}```
```
**Here is the error message**:
```
(function (exports, require, module, __filename, __dirname) { import { Component } from 'inferno';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Object.require.extensions.(anonymous function) [as .js] (/home/jason/iotxplorer/iotex-explorer/node_modules/babel-register/lib/node.js:152:7)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
```
**and a little further down...**
```
ERROR in ./node_modules/inferno-chartist/index.js 65:6
Module parse failed: Unexpected token (65:6)
You may need an appropriate loader to handle this file type.
| );
| return (
>
@ ./src/shared/staking-dashboard/staking-dashboard.js 22:23-50
@ ./src/shared/staking-dashboard/staking-dashboard-container.js
@ ./src/shared/view-routes.js
@ ./src/client/javascripts/main.js
```
Sorry for the large code blocks, but I hope someone can help. I can't see what the second app is missing for it not to work.
Contributor guide
Assessment
This issue has not been assessed yet.