Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

webpack externals don't work

See original GitHub issue

If I add webpack externals to webpack config, I get strange SyntaxError: Unexpected token '.' poiting to react-apollo but I saw stack trace pointing to other libraries, so it is not related with library, but more likely with parser.

Is there some caveat when working with externals in Gatsby?

success run queries - 2.500s - 48/48 19.20/s

 ERROR 

There was an error compiling the html.js component for the development server.

See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html SyntaxError: Unexpected token '.'


  202 |         }
  203 |     };
> 204 |     QueryData.prototype.updateObservableQuery = function () {
      | ^
  205 |         if (!this.currentObservable.query) {
  206 |             this.initializeObservableQuery();
  207 |             return;


  WebpackError: SyntaxError: Unexpected token '.'
  
  - react-hooks.esm.js:204 Module._compile
    [project]/[@apollo]/react-hooks/lib/react-hooks.esm.js:204:1
  
  - react-hooks.esm.js:304 Object.Module._extensions..js
    [project]/[@apollo]/react-hooks/lib/react-hooks.esm.js:304:1
  
  - react-hooks.esm.js:124 Module.load
    [project]/[@apollo]/react-hooks/lib/react-hooks.esm.js:124:1
  
  - react-hooks.esm.js:36 Function.Module._load
    [project]/[@apollo]/react-hooks/lib/react-hooks.esm.js:36:1
  
  - react-hooks.esm.js:161 Module.require
    [project]/[@apollo]/react-hooks/lib/react-hooks.esm.js:161:1
  
  - react-hoc.esm.js:28 Promise._execute
    [project]/[@apollo]/react-hoc/lib/react-hoc.esm.js:28:1
  
  - react-hoc.esm.js:162 Promise._resolveFromExecutor
    [project]/[@apollo]/react-hoc/lib/react-hoc.esm.js:162:1
  
  - react-common.esm.js:1 MappingPromiseArray.PromiseArray._iterate
    [project]/[@apollo]/react-common/lib/react-common.esm.js:1:1
  
  - react-common.esm.js:38 execFunction
    [project]/[@apollo]/react-common/lib/react-common.esm.js:38:1
  
  - react-common.esm.js:22 execHelper
    [project]/[@apollo]/react-common/lib/react-common.esm.js:22:1
  
  - react-common.esm.js:26 execMethod
    [project]/[@apollo]/react-common/lib/react-common.esm.js:26:1
  
  - react-common.esm.js:107 process.emit
    [project]/[@apollo]/react-common/lib/react-common.esm.js:107:1
  
  - react-hooks.esm.js:189 emit
    [project]/[@apollo]/react-hooks/lib/react-hooks.esm.js:189:1

my webpack.config

// this file is also loaded by ESLint webpack import resolver plugin

const path = require('path');

if (process.env.NODE_ENV === 'development' && process.env.BROWSERSLIST === undefined) {
	process.env.BROWSERSLIST = 'last 1 chrome versions';
}

module.exports = {
	devtool: process.env.NODE_ENV === 'development' ? 'cheap-module-source-map' : 'source-map',
	externals: {
		jquery: 'jQuery',
	},
	module: {
		rules: [
			{
				test: /\.(docx)$/i,
				use: [
					{
						loader: 'file-loader',
						options: { name: '[name].[hash:8].[ext]', outputPath: 'files' },
					},
				],
			},
		],
	},
	resolve: {
		alias: {
			'@project/core': path.resolve(__dirname, `../core/src`),
			spec: path.resolve(__dirname, `./spec`),
		},
		extensions: [`.js`, `.json`, `.ts`, `.tsx`],
		modules: [
			path.resolve(__dirname, `node_modules`), // prioritize own dependencies
			`node_modules`,
			`src`,
		],
	},
};

running “gatsby@2.19.12” on node v12.15.0

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

gchallencommented, Jun 13, 2020

I am encountering the same problem. Please unmark as stale.

0reactions

github-actions[bot]commented, Mar 19, 2020

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

Top Results From Across the Web

webpack externals setup not working, files being included

I tried this: /* main.js */ import React from 'react'; export default () => <div>Hello World!</div> /* webpack.config.js */ module.exports ...

External modules are not packaged with webpack 5 · Issue #651

This is a Bug Report Description Since updating to the release version of webpack 5, it seems like external modules are no longer...

Externals - webpack

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency ...

Webpack Externals - Mastering JS

Externals let you exclude certain imports from the bundle so they can be resolved at runtime (like loaded via a script tag).

How to use the webpack-node-externals function in ... - Snyk

To help you get started, we've selected a few webpack-node-externals examples, based on popular ways it is used in public projects.