babel / babel/babel-loader

Module parse failed, but only when outside of a 'create-react-app' style app

Open
#775 3 comments 0 reactions 0 assignees View on GitHub
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 (
>

(this.chart = ref)}
@ ./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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.