Sp-dev-fx-controls-react: No localized files found.

[NZainchkovskiy]

Category

[ ] Enhancement

[ ] Bug

[ X] Question

Version

Please specify what version of the library you are using: [1.1.3]

Expected / Desired Behavior / Question

"gulp serve" command serves web par without errors

Observed Behavior

"gulp serve" emmits an error: "Error - 'collectLocalizedResources' sub task errored after 22 ms
"Error for resource \"ControlStrings\": No localized files found under the \"lib\" directory matching pattern \"./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js\"""

Steps to Reproduce

Generate project with @microsoft/generator 1.4
npm install @pnp/spfx-controls-react --save --save-exact
Add "ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" to config.json
Run "gulp serve" command

What I did wrong?
Thanks!

[estruyf]

Some of our controls make use of a resource file which you need to add to your config.json file. This step is explained in the getting started guide: https://sharepoint.github.io/sp-dev-fx-controls-react/getting-started/

Did you add this in your project?

[NZainchkovskiy]

Yes, I added "ControlStrings": "./node_modules/@pnp/lib/loc/{locale}.js" to config.json.
Without it I had different error.
Now I have workaround by copying resource file to webpart folder and point to a new path.
Everything works fine in this configuration.
I think it can be some folder permissions issue, but everyting else works just fine...

[estruyf]

Did you use this path ./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js instead of "./node_modules//loc/{locale}.js"?

[NZainchkovskiy]

Yes, sorry, it was a strange typo while I copy my error.
There is a right one:
"Error for resource \"ControlStrings\": No localized files found under the \"lib\" directory matching pattern \"./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js\""

I had copy of path from "getting started" page, and have this issue with it.
When I use path to my webparts folder - it works just fine.

[estruyf]

Can you check if the path is correct on your machine? Does the file exists in the node_modules folder structure?

[NZainchkovskiy]

I checked it, it's correct (except it's en-us instead of {locale}).
There is a screenshot of my config file with opened path to file in VSCode:

[estruyf]

The location is good, it needs to include the locale token. Might be a stupid question, but is the file saved?

[NZainchkovskiy]

Yes, file is saved. I know, on screenshot its not saved, but I saved it several times, changing from this location to webparts copy locations. And error mention to this location. So I think my problems can be in some permission issue when gulp process can't read this location, but I can't figure what can be wrong and why everything else (webpack compliling, for instance) working.

[estruyf]

Do you also have it when you start with a new project?

[NZainchkovskiy]

It was quite a new project. But I will try to create another one just to reproduce this issue.
I will keep you informed.
I'm afraid I will do it only at Monday, so it will be some delay from my side.

[estruyf]

No problem.

[NZainchkovskiy]

Sorry for delay.
Now I'm test it with newly created empty project.
Just created spfx project, did npm install @pnp/spfx-controls-react --save --save-exact , add ControlsStrings to config.json.
After adding ControlsString I'm start to receive error message while doing gulp serve.
I'm on Windows 2016 Server.

[10:56:03] Project spfx-test version: 0.0.1
[10:56:03] Build tools version: 2.5.3
[10:56:03] Node version: v7.10.0

[estruyf]

I tested this out on a couple Windows environments, but I do not encounter the issue. Even tested it with Node v8.

It might not make any difference, but have you tested it out on a none server version already?

[Ofer-Gal]

I have in /config/config.json: "localizedResources": {
"HelloReactCompWebPartStrings": "webparts/helloReactComp/loc/{locale}.js",
"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
}
and a file "\lib\webparts\helloReactComp\loc\en-us.js"
the "npm install @pnp/spfx-controls-react --save --save-exact" installed a folder:
"E:\Learning\SPFrameWork\WithReact\react-Compnode_modules\@pnp\spfx-controls-react\lib\loc\" with en-us.js en-us.d.ts and en-us.js.map
_I also get the error:_
"Error for resource \"ControlStrings\": No localized files found under the \"lib\" directory matching pattern \"./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js\""
I changed the config.json to be:
"ControlStrings": "../node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
because the file is under config folder, it should go up twice to get down to node_modules.
You should change the documentation

[estruyf]

Thank @Ofer-Gal, but I did some tests, and by actually using ../node_modules I get that error you are mentioning. Everything in the config.json file is mapped to ./ like, for instance, the entrypoint and manifest location of your web part:

Can you try out to including this:

"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"

[estruyf]

I tested this one out on a couple of other environments, and changing it to ../node_modules leads to the mentioned error:

[10:34:07] Error - 'collectLocalizedResources' sub task errored after 11 ms
 Error for resource "ControlStrings": No localized files found under the root directory ("C:\data\pnp-controls") matching pattern "../node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"

Like mentioned in my previous reply, the following path might work (or at least it does in the environments where I tested it - MacOS and Windows):

"ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"

If you can let me know the results of your tests, that would be great.

[Simo9552]

Hello,

I also had this issue and the reason why it fails in my case is:
The path to the localized resource file, relative to the root of the project

When you use the ../.. notation inside the reference of the controlstrings, it is going to be based on the current location.

What does that mean? If you need to go 5 folders up to reach the modules from the current folder
you would type ../../ and so on. But if you hover over the "ControlStrings" it says
The path to the localized resource file, relative to the root of the project. Which means that when trying to look for that file it will start at the root. So you do not need to go up 5 times. But start at the root and than look how many more you need to go up.

This scenario is only correct if your modules are not inside each and every extension.

Hope this makes sense

Kind regards
Simon

[estruyf]

@Simo9552 thanks for your comment. The config.json file paths are a bit special. As the paths are processed in the build process and seem to be giving problems with relative paths. Have you tried out this notation "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"?

[Simo9552]

@estruyf
Yes that notation is also working. It probably goes looking for the module folder ?
Thx.

[estruyf]

Thanks @Simo9552 for testing. The config.json is indeed used during the build from a different location. That is why the mismatch can occur.

Documentation got updated. Closing this issue as it is now solved.

[patrickabel]

@estruyf thanks for your time helping out @Simo9552 – I had a similar issue resolved from your feedback.

Thank you sir!

[cameronsibbald]

I have in /config/config.json: "localizedResources": {
"HelloReactCompWebPartStrings": "webparts/helloReactComp/loc/{locale}.js",
"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
}
and a file "\lib\webparts\helloReactComp\loc\en-us.js"
the "npm install @pnp/spfx-controls-react --save --save-exact" installed a folder:
"E:\Learning\SPFrameWork\WithReact\react-Compnode_modules@pnp\spfx-controls-react\lib\loc" with en-us.js en-us.d.ts and en-us.js.map
_I also get the error:_
"Error for resource "ControlStrings": No localized files found under the "lib" directory matching pattern "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js""
I changed the config.json to be:
"ControlStrings": "../node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
because the file is under config folder, it should go up twice to get down to node_modules.
You should change the documentation

This path fix is what worked for me.

The ControlStrings value was initially set to "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" after adding the package to my solution as Elio had suggested in his response (and the documentation). Could this have something to do with the v1 schema (in older spfx solutions) on the config.json file?

Using [email protected] with [email protected]

[meetKushan]

Changing from "ControlStrings": "/node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" to "ControlStrings": "../node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" worked for me.

Thanks @Ofer-Gal