Wp-calypso: Cannot find module "notifications-panel", the file is pre-built in the node_modules directory.

[wufeng87]

When I run npm start， the error says the Notifications.jsx file is pre-built.
how to build the src file in mode_modules?
Thanks.

[designsimply]

@wufeng87 can you post the exact text of the error please? (this is so we have it on record)

It may also help to include information about your OS and OS version.

Also may I please ask why you want to build src file in mode_modules?

[wufeng87]

win10
node: 6.10.3
npm: 3.10.10
yarn: 0.24.5

ERROR in ./~/[email protected]@notifications-panel/src/Notifications.jsx
Module parse failed: C:\code\ghub\wp-calypso\node_modules\[email protected]@notifications-panel\src\Notifications.jsx Unexpected token (32:21)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (32:21)
    at Parser.pp$4.raise (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:2221:15)
    at Parser.pp.unexpected (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:603:10)
    at Parser.pp.expect (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:597:28)
    at Parser.pp$3.parseMethod (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:2071:10)
    at Parser.pp$1.parseClassMethod (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:1137:25)
    at Parser.pp$1.parseClass (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:1118:14)
    at Parser.pp$1.parseStatement (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:697:19)
    at Parser.pp$1.parseExport (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:1181:31)
    at Parser.pp$1.parseStatement (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:719:71)
    at Parser.pp$1.parseTopLevel (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:638:25)
    at Parser.parse (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:516:17)
    at Object.parse (C:\code\ghub\wp-calypso\node_modules\[email protected]@acorn\dist\acorn.js:3098:39)
    at Parser.parse (C:\code\ghub\wp-calypso\node_modules\[email protected]@webpack\lib\Parser.js:902:15)
    at DependenciesBlock.<anonymous> (C:\code\ghub\wp-calypso\node_modules\[email protected]@webpack\lib\NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (C:\code\ghub\wp-calypso\node_modules\[email protected]@webpack-core\lib\NormalModuleMixin.js:310:10)
    at nextLoader (C:\code\ghub\wp-calypso\node_modules\[email protected]@webpack-core\lib\NormalModuleMixin.js:275:25)
    at C:\code\ghub\wp-calypso\node_modules\[email protected]@webpack-core\lib\NormalModuleMixin.js:259:5
    at Storage.finished (C:\code\ghub\wp-calypso\node_modules\[email protected]@enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
    at C:\code\ghub\wp-calypso\node_modules\[email protected]@graceful-fs\graceful-fs.js:78:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:446:3)
 @ ./client/notifications/index.jsx 60:26-56

Also may I please ask why you want to build src file in mode_modules?

The code in node_modules\[email protected]@notifications-panel\src\Notifications.jsx is unbuild ES6 code. :(

[blowery]

Hi @wufeng87,

Are you using yarn or npm to install the required packages? The path to the notifications panel looks a bit strange and we have a special exemption in our webpack.config to process notifications-panel with babel. Seems like the path you're seeing would break that exception.

cc @dmsnell

[ockham]

When I run npm start

That probably doesn't build Calypso (thus ES6 code isn't transpiled). Try make run instead, which should also invoke required building steps.

[dmsnell]

Yeah if we're trying to build notifications-panel from within the node_modules directory then I'm guessing it will fail on account of weird interactions with Babel and webpack. If we are running npm start from within the root Calypso directory it should all be fine. If we want to run the notifications panel separately then it's probably best to clone it in a separate directory and build it there by itself.

[wufeng87]

Thanks for your help.
@blowery yes, I ran a cnpm install to install the required packages.
(npm install -g cnpm --registry=https://registry.npm.taobao.org)

I changed the exclude value of the babel loader config, and it works now:
exclude: /node_modules[\/\\](?!_notifications-panel|notifications-panel)/,