Sp-dev-fx-controls-react: Can't resolve ControlStrings

[repolife]

Hi There,

I've been using spfx-controls-react just fine. However, now when attempting to add a ListView component I get the following error.

ERROR in ./node_modules/@pnp/spfx-controls-react/lib/controls/listView/ListView.js
Module not found: Error: Can't resolve 'ControlStrings' in 'C:\Users\Studio\Developer\SharePoint\SPFormnode_modules\@pnp\spfx-controls-react\lib\controls\listView'
@ ./node_modules/@pnp/spfx-controls-react/lib/controls/listView/ListView.js 18:14-39
@ ./node_modules/@pnp/spfx-controls-react/lib/controls/listView/index.js
@ ./node_modules/@pnp/spfx-controls-react/lib/ListView.js
@ ./src/scripts/components/list/List.tsx
@ ./src/scripts/components/form/TabTwo.tsx
@ ./src/scripts/components/layout/Form.tsx
@ ./src/scripts/root.tsx
@ ./src/scripts/index.ts
@ multi ./node_modules/sp-build-tasks/dist/webpack/polyfills.js ./src/scripts/index.ts

ERROR in ./node_modules/@microsoft/sp-core-library/lib/SPCoreLibraryStrings.resx.js
Module not found: Error: Can't resolve 'resx-strings' in 'C:\Users\Studio\Developer\SharePoint\SPForm\node_modules\@microsoft\sp-core-library\lib'
 @ ./node_modules/@microsoft/sp-core-library/lib/SPCoreLibraryStrings.resx.js 4:4-27
 @ ./node_modules/@microsoft/sp-core-library/lib/SPError.js
 @ ./node_modules/@microsoft/sp-core-library/lib/index.js
 @ ./node_modules/@pnp/spfx-controls-react/lib/common/telemetry/index.js
 @ ./node_modules/@pnp/spfx-controls-react/lib/controls/listView/ListView.js
 @ ./node_modules/@pnp/spfx-controls-react/lib/controls/listView/index.js
 @ ./node_modules/@pnp/spfx-controls-react/lib/ListView.js
 @ ./src/scripts/components/list/List.tsx
 @ ./src/scripts/components/form/TabTwo.tsx
 @ ./src/scripts/components/layout/Form.tsx
 @ ./src/scripts/root.tsx
 @ ./src/scripts/index.ts
 @ multi ./node_modules/sp-build-tasks/dist/webpack/polyfills.js `./src/scripts/index.ts

app.json
{ "$schema": "../node_modules/sp-build-tasks/schema/v1/sppp.json", "spFolder": "_catalogs/masterpage/sppp-listform", "distFolder": "./dist", "localizedResources": { "ControlStrings": "../node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" } }

tsconfig.json
{ "compilerOptions": { "target": "es5", "module": "esnext", "lib": ["es2017", "dom"], "rootDir": "src", "jsx": "react", "sourceMap": true, "declaration": true, "moduleResolution": "node", "noImplicitAny": false, "removeComments": true, "experimentalDecorators": true, "skipLibCheck": true, "types": ["node", "sharepoint"], "outDir": "tmp" }, "exclude": [ "node_modules", "webpack.config.js", "gulpfile.js", "build", "dist", "tmp", "cache" ] }

[coreyroth]

Make sure you have "ControlStrings": "node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
in your localizedResources in config.json. NPM installs it for you automatically in newer versions I think. Check and make sure it's there.

[repolife]

locale

I imagine in my case. I need to add to the tsconfig.json file.

{ "compilerOptions": { "target": "es5", "module": "esnext", "lib": ["es2017", "dom"], "rootDir": "src", "jsx": "react", "sourceMap": true, "declaration": true, "moduleResolution": "node", "noImplicitAny": false, "removeComments": true, "experimentalDecorators": true, "skipLibCheck": true, "types": ["node", "sharepoint"], "outDir": "tmp" }, "exclude": [ "node_modules", "webpack.config.js", "gulpfile.js", "build", "dist", "tmp", "cache" ], "localizedResources": { "ControlStrings": "../node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" } }

That didn't work either for me.

I was under the impression that it should be in the app.json file but that didn't work either.

[AJIXuMuK]

Hi @thisisspeedy
"ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js" should be added to config/config.json file in localizedResources section.
something like that:

{
  "$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
  "version": "2.0",
  "bundles": {
    "my-bundle": {
      "components": [
        {
        "entrypoint": "...",
        "manifest": "..."
        }
      ]
    }
    }
  },
  "externals": {
  },
  "localizedResources": {
    "ControlStrings": "./node_modules/@pnp/spfx-controls-react/lib/loc/{locale}.js"
  }
}

[repolife]

I'm currently working with this clone
https://github.com/olegrumiancev/generator-spreactformfields#readme

Look like app.json is the config file. However, I'm still getting the error.

{
  "$schema": "../node_modules/sp-build-tasks/schema/v1/sppp.json",
  "spFolder": "_catalogs/masterpage/sppp-listform",
  "distFolder": "./dist",

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

[AJIXuMuK]

sp-dev-fx-controls-react is developed to be used in SharePoint Framework solutions.
generator-spreactformfields creates projects that are not SPFx solutions.
So, I don't think you can use it without some additional tricks.

[repolife]

sp-dev-fx-controls-react is developed to be used in SharePoint Framework solutions.
generator-spreactformfields creates projects that are not SPFx solutions.
So, I don't think you can use it without some additional tricks.

That would be a blocker for sure. :) Thanks!

[FreBon]

This is an old issue, but I got the same error when adding a PeoplePicker to my SPFx webpart. That was solved by just stopping the local server and re run "gulp serve"..