Webpack alongside prettier's glimmer parser - Critical Dependency & require.extensions

[waynevanson]

Describe the bug

Webpack throws 2 types of errors when Prettier's parser-glimmer is required.

Did you try recovering your dependencies?

Oath. I even made a fresh repository and we still came across the same error.

Which terms did you search for in User Guide?

require.extension

Environment

Wow, how nifty is this!

I have node installed via a snap package currently, 10.16.1. I had this version and 12.x installed via .deb package with the same bug.

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 AMD FX-9830P RADEON R7, 12 COMPUTE CORES 4C+8G
  Binaries:
    Node: Not Found
    Yarn: Not Found
    npm: Not Found
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: Not Found
  npmPackages:
    react: ^16.9.0 => 16.9.0 
    react-dom: ^16.9.0 => 16.9.0 
    react-scripts: 3.1.1 => 3.1.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. Add prisma-client-lib as a dependancy
2. Insert your generated types/schema from a PRISMA project.
3. Import { prisma } from './[your/folder/of/choice/prisma-client'
4. Use prisma.[x] in a react component, so it gets called at any point in time.

Expected behavior

No error and the function alongside react should run smoothly.

Actual behavior

Screenshots

Terminal

Compiled with warnings.
# First issue
./node_modules/prettier/index.js
Critical dependency: the request of a dependency is an expression

./node_modules/prettier/index.js
Critical dependency: the request of a dependency is an expression

./node_modules/prettier/third-party.js
Critical dependency: the request of a dependency is an expression

# Ignore this one..
./src/App.tsx
  Line 8:  'ourError' is assigned a value but never used  @typescript-eslint/no-unused-vars

# Second Issue, which looks to be a webpack issue
./node_modules/prettier/parser-glimmer.js
require.extensions is not supported by webpack. Use a loader instead.

./node_modules/prettier/parser-glimmer.js
require.extensions is not supported by webpack. Use a loader instead.

./node_modules/prettier/parser-glimmer.js
require.extensions is not supported by webpack. Use a loader instead.

# Not relevant
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Reproducible demo

https://github.com/waynevanson/cra-prettier-issue

[ianschmitz]

Hmm that stack trace would make sense since require() isn't available at runtime.

You'll see the request of a dependency is an expression when webpack runs into a piece of code like require(someVar) as it can't determine which module to bundle in at build time.

Maybe someone else can chime in? My guess is this is expected behavior.

[waynevanson]

@ianschmitz So that sounds like it makes sense. Running the latest prettier version resolves this, but still has warnings. This means it will still run the dev sever and still build when running yarn build.

I'm going to issue a pull request on this to the prettier team, as they said "PR Welcome".

[waynevanson]

So it looks like they've removed eval and if not, it's high on their list.

I'm going to close this, as there's nothing more to do. Thank you for having a look at it :)