How do you import a json file?

[NullVoxPopuli]

I tried adding this to the auto import config:

      webpack: {
        module: {
          rules: [
            {
              test: /\.json/,
              loader: 'json-loader',
            },
          ],
        },
      },

but, I get weird errors on every json file in my node_modules (or so it seems) -- but I don't even know why they're being touched -- all the files with errors are not files I'm importing.

Errors like:

ERROR in ./node_modules/character-entities-html4/index.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"n...'
File was processed with these loaders:
 * ./node_modules/json-loader/index.js
You may need an additional loader to handle the result of these loaders.
SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"n...'
    at JSON.parse (<anonymous>)
    at parseJson (/..../node_modules/json-parse-better-errors/index.js:7:17)
    at JsonParser.parse (/..../node_modules/webpack/lib/JsonParser.js:16:16)

^ the specific json file here doesn't seem to matter, cause the error shows on every json file -- and they all look like valid json so I don't know where it's getting this 'module.exports' from

[ef4]

All loaders output JavaScript, so I think json-loader wraps json in module.exports =. The error looks like that is happening correctly but then something subsequent is still trying to parse the now-JS as JSON.

Are you trying to import the json directly into the ember app, or is it a transitive module dependency of something that you’re importing?

On Sun, Mar 21, 2021 at 9:26 PM NullVoxPopuli @.***> wrote:

I tried adding this to the auto import config:

  webpack: {
    module: {
      rules: [
        {
          test: /\.json/,
          loader: 'json-loader',
        },
      ],
    },
  },

but, I get weird errors on every json file in my node_modules (or so it seems) -- but I don't even know why they're being touched -- all the files with errors are not files I'm importing.

Errors like:

ERROR in ./node_modules/character-entities-html4/index.json Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"n...' File was processed with these loaders:

• ./node_modules/json-loader/index.js You may need an additional loader to handle the result of these loaders. SyntaxError: Unexpected token m in JSON at position 0 while parsing near 'module.exports = {"n...' at JSON.parse () at parseJson (/..../node_modules/json-parse-better-errors/index.js:7:17) at JsonParser.parse (/..../node_modules/webpack/lib/JsonParser.js:16:16)

^ the specific json file here doesn't seem to matter, cause the error shows on every json file -- and they all look like valid json so I don't know where it's getting this 'module.exports' from

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ef4/ember-auto-import/issues/363, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACN6MUO5B47JQTXFDCVEADTE2MERANCNFSM4ZSFRQGQ .

[NullVoxPopuli]

Are you trying to import the json directly into the ember app, or is it a transitive module dependency of something that you’re importing?

Yeah, I'm loading JSON directly in my app. I have a function that does:

  await import('vscode-glimmer/syntaxes/inline-hbs.json');
  await import('vscode-glimmer/syntaxes/inline-template.json');

which is why I added the json-loader -- but it doesn't seem to be even making it to these imports.

[ef4]

Try making your test pattern more specific. For example, it’s not anchored to the end so it may be matching stuff you don’t intend.

On Sun, Mar 21, 2021 at 9:40 PM NullVoxPopuli @.***> wrote:

Are you trying to import the json directly into the ember app, or is it a transitive module dependency of something that you’re importing?

Yeah, I'm loading JSON directly in my app. I have a function that does:

await import('vscode-glimmer/syntaxes/inline-hbs.json');

await import('vscode-glimmer/syntaxes/inline-template.json');

which is why I added the json-loader -- but it doesn't seem to be even making it to these files.

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/ef4/ember-auto-import/issues/363#issuecomment-803707204, or unsubscribe https://github.com/notifications/unsubscribe-auth/AACN6MRBZKUYB7MQ6MHL533TE2NYJANCNFSM4ZSFRQGQ .

[NullVoxPopuli]

This is what I was using

        module: {
          rules: [
            {
              test: /\.json/,
              loader: 'json-loader',
            },
          ],
        },

Next time I try loading the monaco editor, I'll try adding a $ to the end.

(maybe) tangentially, I also had issues with the style/css loaders (loading CSS) and file loaders (loading ttf fonts) -- not sure if related though -- it's def the most webpack I've had to interact with in a long while -- the monaco examples are pretty webpack focused -- so, that's why I'm exploring all this craziness.

[ef4]

I have used monaco-editor with ember-auto-import, it worked when I used their dedicated webpack plugin like https://github.com/microsoft/monaco-editor-samples/blob/main/browser-esm-webpack-monaco-plugin/webpack.config.js

[NullVoxPopuli]

🤔 ah! I didn't see that they have a webpack plugin!