Currently, I am in the process of developing an npm package called foobar locally. This allows me to make real-time changes and modifications without the need to constantly publish and unpublish the package, which greatly improves my development efficiency and sanity.
In my projectTest, I have established a link to foobar using the command npm link foobar. For those unfamiliar, the npm link flag creates a symbolic link to global modules (for more information see: https://docs.npmjs.com/cli/link)
The projectTest is actually a ReactJS project written in ES2015 with tools like Webpack and babel. Here, I can import { x } from 'package' without encountering any issues.
However, even though the package foobar exists in the node_modules directory with a link to its development folder, when I attempt to import:
import { myFn } from 'foobar'
I encounter the following error in 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 issue surprises me since other imports are functioning perfectly fine with ES2015 code. These imports are not transpiled beforehand or saved as static files, but rather executed in real time thanks to my webpack setup with babel loader configured as follows:
... (webpack config example provided)
To troubleshoot this problem, I experimented with importing a module using the full or relative path instead of the linked package from node_modules. For instance:
import { myFn } from '/bar/zoo/lar/deep/foobar'
In this scenario, where the syntax/file mirrors working imports for utility functions across the project, the same unexpected token export error occurs.
User @felixKling suggested that webpack might be ignoring the node_module, leading to the issue persisting even after removing it:
... (error snippet shown)
Upon further investigation, it seems that only code within the specified context in the webpack dev configuration file gets transpiled during runtime. However, changing the syntax resolves the issue, indicating that it is related to how babel-loader operates within the context.
... (another webpack configuration snippet)
Even though this workaround works seamlessly, the root cause behind the syntax error remains unclear. Additionally, confirming that the syntax modification fixes the issue suggests a connection to how babel-loader functions within the specified context.
module.exports = {
myFn: function () {
console.log('Syntax correct! myFn works!')
}
}
For reference, I am utilizing webpack2 and node v7.4.0 for this project.