kentcdodds/testing-workshop

npm run dev fails in /calculator

theJakub opened this issue · 3 comments

theJakub commented

Environment info:

  • node version (node --version): v8.11.3
  • npm version (npm --version): v6.1.0
  • yarn version (yarn --version): none

Problem description:
I'm using the 'master' branch.
While following along with the videos I ran into a build issue during video 5 'Configuring Jest & Babel'.
When running 'npm run dev' in the '/calculator' directory I get:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown plugin "syntax-dynamic-import" specified in "/Users/jmuhle/github/testing-workshop/other/configuration/calculator/.babelrc.js" at 0, attempted to resolve relative to "/Users/jmuhle/github/testing-workshop/other/configuration/calculator" (While processing preset: "/Users/jmuhle/github/testing-workshop/other/configuration/calculator/.babelrc.js")
    at /Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (<anonymous>)
    at Function.normalisePlugins (/Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (/Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at /Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:265:14
    at /Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:323:22
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/Users/jmuhle/github/testing-workshop/other/configuration/calculator/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js main[1]

If I remove "syntax-dynamic-import" from .babelrc I run into syntax errors in the code. I tried to install that babel plugin with npm and that led to more build errors. My './calculator/package.json' is the same as what I see in the video and the 'npm run setup --silent' script was successful during setup.

rafaelbiten commented

@theJakub I run into the same problem as you, then I checked the main README for this repo and noticed that I haven't run the npm run setup --silent mentioned on the setup section.

If you also skipped that step, could you try running it and see if it works as expected?

aleksandar78 commented

Same problem as @theJakub.

rishispeets commented

Was able to reproduce the issue. Fixed it by adding the dependency, which was missing.

@theJakub @aleksandar78 try running the following command from the calculator directory:

npm i -D babel-plugin-syntax-dynamic-import

Let me know if that fixed it!

@kentcdodds I opened a PR that adds the missing dependency.

  • 👍3