babel-loader
babel-loader copied to clipboard
babel
Module parse failed, but only when outside of a 'create-react-app' style app
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": "[email protected]",
"_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": "[email protected]",
"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://[email protected]/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 (
> <div
| className={`ct-chart ${className || ''}`}
| ref={ref => (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.
You need to use babel.config.js instead of .babelrc to compile node_modules
Do you mean the node module itself needs a babel.config.js file or the project that I want to use the module in? If the former, why does it result in an error for the larger project but not the smaller one?
(I deleted my comment in less then a minute, I was too slow? :stuck_out_tongue:)
I meant that it needs to be in the project, but it only works with Babel 7. I don't know how to configure Babel to transpile node_modules with Babel 6.
(I deleted my comment in less then a minute, I was too slow? 😛)
I meant that it needs to be in the project, but it only works with Babel 7. I don't know how to configure Babel to transpile node_modules with Babel 6.
Haha, guess you were! Ah ok. When I updated everything to babel 7 I kept getting an error that it was using loader 6.26.3 no matter what I did so I'll go down that rabbit hole another time...
I got rid of the second error by editing my webpack file like so:
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules\/(?!inferno-chartist)/,
use: {
loader: "babel-loader",
options: JSON.parse(fs.readFileSync("./.babelrc"))
}
}
]
}
};
But the first error is still there. Do you know how I can transpile the package BEFORE installing it my project? Maybe that will fix it?