Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CRA 2.0 w/typescript Overrides my tsconfig.json due to implementation limitation

I'm trying to get tailwindcss setup and working with typescript inside a brand new CRA 2.0 (specifically 2.1.2).

I am unable to override the "isolatedModules": true flag without CRA overwriting it.

I've tried to get around the issue by changing the export style from modules.export and forcing the config to false instead of deleting it. I read that you can also create a seperate tsconfig.json, extend your old one and override the changes there, but this seems hacky.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "preserve",
    "isolatedModules": true
  },
  "include": [
    "src",
    "postcss.config.js"
  ]
}

postcss.config.json

const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [tailwindcss('./tailwind.config.js'), require('autoprefixer')]
};

And here is what my npm start spits out

The following changes are being made to your tsconfig.json file:
  - compilerOptions.isolatedModules must be true (implementation limitation)

I can see my application compile, work, and then paint to the page before it is replaced by a red error box that says

Type error: Cannot compile namespaces when the '--isolatedModules' flag is 
provided.  TS1208

  > 1 | const tailwindcss = require('tailwindcss');
      | ^
    2 | module.exports = {
    3 |   plugins: [tailwindcss('./tailwind.config.js'), 
require('autoprefixer')]
    4 | };

How can I override this without ejecting or extending my tsconfig.json and using the modified version throughout my app.

UPDATE: I was able to fix this by ejecting my application and going into the webpack-config directly to remove the isolatedModules flag, not the way I wanted to do it, but it works.

like image 561
sanyangkkun Avatar asked Dec 25 '18 00:12

sanyangkkun


1 Answers

I got this same thing and added a

// @ts-ignore 

before the offending statement(s) with require and that fixed it.

Ejecting is a pretty drastic solution to this; not recommended.

like image 151
Francis Upton IV Avatar answered Nov 16 '22 03:11

Francis Upton IV