Using DefinePlugin to define import throws an error

[connor4312]

Bug report

What is the current behavior?

Have a webpack config that includes this in its plugins:

			new DefinePlugin({
				// defined to access the native browser import, which is ordinarily
				// prevented by (1) TS compiling import to AMD require(), and (2) 
				// to its own native module loading. This bypasses both.
				__non_webpack_import__: 'import',
			}),

Upon compilation, you'll get an error

SyntaxError: Unexpected token (1:7)
    at Object.pp$4.raise (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:3460:15)
    at Object.pp$9.unexpected (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:756:10)
    at Object.pp$5.parseExprImport (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:2854:12)
    at Object.pp$5.parseExprAtom (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:2829:21)
    at Object.pp$5.parseExprSubscripts (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:2627:21)
    at Object.pp$5.parseMaybeUnary (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:2593:19)
    at Object.pp$5.parseExprOps (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:2520:21)
    at Object.pp$5.parseMaybeConditional (C:\Users\Connor\Documents\Github\vscode-dev\client\node_modules\acorn\dist\acorn.js:2503:2

If the current behavior is a bug, please provide the steps to reproduce.

See above

What is the expected behavior?

It should not throw an error.

This is due to the recursion check in the DefinePlugin

...the JavaScript evaluator tries to parse it as (import), which is not valid.

Perhaps if the parsing fails, the code should be emitted as-is?

Other relevant information:
webpack version: 5.68.0
Node.js version: v16.13.2
Operating System: Windows 10
Additional tools: N/A

[vankop]

import is a reserved word, not sure that this must works. you can use/define your own require

[vankop]

The thing is that the injected code doesn't produce invalid syntax in the compiled code

hm.. in issue description there is syntax error from acorn..

[connor4312]

I mean, it shouldn't be a parser error. As a consumer of webpack, I define that __non_webpack_import__ is equivalent to import, and then expect to be able to use it like I would import. None of my own code is invalid or would result in a parse error. It's an implementation detail of Webpack that -- as I've discovered today -- DefinePlugin can only be used with valid JS expressions.

I suggest either (a) removing this restriction, or (b) dealing with parse errors and presenting them to the user in a better way. For example in the latter case, Webpack could re-throw an error with a message like ParseError: expression "import" from the DefinePlugin is not a valid expression. That would document this behavior and allow consumers to figure out what's going wrong without having to debug webpack internals like I did.

Though, as mentioned, the code emitted from the compiler after the replacement happens would be valid, it's a limitation of the way DefinePlugin is implemented that the plugin couldn't make the replacement.

[alexander-akait]

(b) dealing with parse errors and presenting them to the user in a better way. For example in the latter case, Webpack could re-throw an error with a message like ParseError: expression "import" from the DefinePlugin is not a valid expression.

This error from acorn, feel free to send a PR to them, we can't fix it here as I described above, we can't analyze your code, it will be perf problem - double parsing

[vankop]

I see this is an error in evaluating inside DefinePlugin. yeah, lets create an issue.

[vankop]

#15371