I am working on an npm package called foobar to allow me to make changes or modifications in real time without having to publish / unpublish to improve development time and performance.
In projectTest I linked foobar using the npm link foobar command. If you do not know, the npm link flag creates a symbolic link to your global links (more about this can be found here: https://docs.npmjs.com/cli/link )
projectTest is a Reactjs project written in ES2015, Webpack, babel, etc .; and where I import {x} from the "package", without any problems, etc.
As already mentioned, the foobar package exists in node_modules and has a link to its development directory, but for some reason, when I try to import:
import { myFn } from 'foobar'
The following error is issued to the console:
/foobar/lib/index.js:3 export const loadImage = () => { ^^^^^^ SyntaxError: Unexpected token export at Object.exports.runInThisContext (vm.js:78:16) at Module._compile (module.js:543:28)
This is not expected based on the fact that other in-place imports work just fine; Why does this not happen in other existing imports where the code is also ES2015? It is not carried forward or to a static file, but in real time AFAIK, since I have a web package setup with the babel loader, for example:
var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin') var AssetsPlugin = require('assets-webpack-plugin') var assetsPluginInstance = new AssetsPlugin() module.exports = { devtool: 'inline-source-map', context: path.resolve(__dirname, 'src'), entry: [ 'react-hot-loader/patch', 'webpack/hot/dev-server', 'webpack-hot-middleware/client', 'babel-polyfill', './js/index.js' ], output: { path: __dirname, publicPath: '/assets/', filename: 'js/bundle.js?[hash]' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: [ 'babel-loader' ] } ... }
I would like to understand the reason for this! So, to help me track the problem, I tried to import not into the bundled node_module package, but instead, in the full or relative path, for example:
import { myFn } from '/bar/zoo/lar/deep/foobar'
Where I posted the equivalent syntax / working import file, which is my utilities or helper functions that I use throughout the project without any problems. Syntax:
export const myFn = () => { return 'myFn call!' }
Where I import it from my app.js let's say for example:
import { myFn } from './utils' // works fine! BUT if I DO: import { myFn } from '/path/to/packageFoobar' // I get the syntax error!
SO user @felixKling left a nice comment that the webpack node_module is ignored, which I just tested, but still get an error after deleting the node_module:
(function (exports, require, module, __filename, __dirname) { export const styleObjectParser = str => { ^^^^^^ SyntaxError: Unexpected token export at Object.exports.runInThisContext (vm.js:78:16) at Module._compile (module.js:543:28)
From what I can see so far, is that in the webpack developer configuration file only the code under context at runtime is transpiled . But I could be wrong:
module.exports = { devtool: 'inline-source-map', context: path.resolve(__dirname, 'src'), entry: [ 'react-hot-loader/patch', 'webpack/hot/dev-server', 'webpack-hot-middleware/client', 'babel-polyfill', './js/index.js' ],
I would like to confirm that the syntax change works fine, so this is due to the context launched by babel-loader. Despite the fact that I do not understand why a syntax error occurs, even when the node_module exception is removed.
module.exports = { myFn: function () { console.log('Syntax correct! myFn works!') } }
I am using webpack2, node v7.4.0